Initial commit: Shopify storefront Next.js template

Next.js 16 + React 19 storefront template with Shopify Storefront API integration, Tailwind v4, and shadcn/ui components. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0111qSr3KopyGRsJ6LznR1xZ
2026-07-31 22:12:19 -04:00
commit e3d5e75299
69 changed files with 7960 additions and 0 deletions
@@ -0,0 +1,379 @@
+'use client';
+
+import { create } from 'zustand';
+import { shopifyFetch } from '@/services/shopify/client';
+import {
+  CREATE_CART_MUTATION,
+  ADD_CART_LINES_MUTATION,
+  UPDATE_CART_LINES_MUTATION,
+  REMOVE_CART_LINES_MUTATION,
+  GET_CART_QUERY,
+} from '@/graphql/cart';
+import { useEffect } from 'react';
+
+// ─── Types ───────────────────────────────────────────────────────────
+
+export interface CartLineInput {
+  merchandiseId: string;
+  quantity: number;
+}
+
+export interface CartLineUpdateInput {
+  id: string;
+  quantity: number;
+}
+
+interface CartLine {
+  id: string;
+  quantity: number;
+  cost: {
+    totalAmount: {
+      amount: string;
+      currencyCode: string;
+    };
+  };
+  merchandise: {
+    id: string;
+    title: string;
+    selectedOptions: Array<{
+      name: string;
+      value: string;
+    }>;
+    price: {
+      amount: string;
+      currencyCode: string;
+    };
+    image?: {
+      id: string;
+      url: string;
+      altText?: string;
+      width: number;
+      height: number;
+    };
+    product: {
+      id: string;
+      title: string;
+      handle: string;
+      vendor?: string;
+    };
+  };
+}
+
+export interface Cart {
+  id: string;
+  checkoutUrl: string;
+  totalQuantity: number;
+  cost: {
+    subtotalAmount: {
+      amount: string;
+      currencyCode: string;
+    };
+    totalAmount: {
+      amount: string;
+      currencyCode: string;
+    };
+    totalTaxAmount?: {
+      amount: string;
+      currencyCode: string;
+    };
+  };
+  lines: {
+    edges: Array<{
+      node: CartLine;
+    }>;
+  };
+}
+
+// ─── Shopify API functions ───────────────────────────────────────────
+
+async function createCartApi(lines: CartLineInput[] = []): Promise<Cart> {
+  const response = await shopifyFetch({
+    query: CREATE_CART_MUTATION,
+    variables: { lines: lines.length > 0 ? lines : null },
+  });
+
+  if (response.data.cartCreate.userErrors.length > 0) {
+    throw new Error(response.data.cartCreate.userErrors[0].message);
+  }
+
+  return response.data.cartCreate.cart;
+}
+
+async function addCartLinesApi(
+  cartId: string,
+  lines: CartLineInput[]
+): Promise<Cart> {
+  const response = await shopifyFetch({
+    query: ADD_CART_LINES_MUTATION,
+    variables: { cartId, lines },
+  });
+
+  if (response.data.cartLinesAdd.userErrors.length > 0) {
+    throw new Error(response.data.cartLinesAdd.userErrors[0].message);
+  }
+
+  return response.data.cartLinesAdd.cart;
+}
+
+async function updateCartLinesApi(
+  cartId: string,
+  lines: CartLineUpdateInput[]
+): Promise<Cart> {
+  const response = await shopifyFetch({
+    query: UPDATE_CART_LINES_MUTATION,
+    variables: { cartId, lines },
+  });
+
+  if (response.data.cartLinesUpdate.userErrors.length > 0) {
+    throw new Error(response.data.cartLinesUpdate.userErrors[0].message);
+  }
+
+  return response.data.cartLinesUpdate.cart;
+}
+
+async function removeCartLinesApi(
+  cartId: string,
+  lineIds: string[]
+): Promise<Cart> {
+  const response = await shopifyFetch({
+    query: REMOVE_CART_LINES_MUTATION,
+    variables: { cartId, lineIds },
+  });
+
+  if (response.data.cartLinesRemove.userErrors.length > 0) {
+    throw new Error(response.data.cartLinesRemove.userErrors[0].message);
+  }
+
+  return response.data.cartLinesRemove.cart;
+}
+
+async function getCartApi(cartId: string): Promise<Cart | null> {
+  const response = await shopifyFetch({
+    query: GET_CART_QUERY,
+    variables: { cartId },
+  });
+
+  return response.data.cart;
+}
+
+export function redirectToCheckout(checkoutUrl: string): void {
+  if (checkoutUrl) {
+    window.location.href = checkoutUrl;
+  }
+}
+
+// ─── Zustand Store ───────────────────────────────────────────────────
+
+const CART_ID_KEY = 'cartId';
+
+interface CartState {
+  // State
+  isOpen: boolean;
+  cartId: string | null;
+  cart: Cart | null;
+  loading: boolean;
+  error: string | null;
+  _initialized: boolean;
+
+  // Computed (derived in the hook)
+  // items, itemCount, totalAmount, checkoutUrl
+
+  // Actions
+  openCart: () => void;
+  closeCart: () => void;
+  toggleCart: () => void;
+  initCart: () => void;
+  addItem: (variantId: string, quantity?: number) => Promise<Cart>;
+  removeItem: (lineId: string) => Promise<Cart>;
+  updateItemQuantity: (lineId: string, quantity: number) => Promise<Cart>;
+  refreshCart: () => Promise<void>;
+}
+
+export const useCartStore = create<CartState>((set, get) => ({
+  // Initial state
+  isOpen: false,
+  cartId: null,
+  cart: null,
+  loading: true,
+  error: null,
+  _initialized: false,
+
+  // UI actions
+  openCart: () => set({ isOpen: true }),
+  closeCart: () => set({ isOpen: false }),
+  toggleCart: () => set((s) => ({ isOpen: !s.isOpen })),
+
+  // Initialize cart from localStorage
+  initCart: () => {
+    if (get()._initialized) return;
+    set({ _initialized: true });
+
+    if (typeof window === 'undefined') return;
+
+    const storedCartId = localStorage.getItem(CART_ID_KEY);
+    if (!storedCartId) {
+      set({ loading: false });
+      return;
+    }
+
+    set({ loading: true });
+    getCartApi(storedCartId)
+      .then((fetchedCart) => {
+        if (fetchedCart) {
+          set({ cart: fetchedCart, cartId: storedCartId, loading: false });
+        } else {
+          localStorage.removeItem(CART_ID_KEY);
+          set({ cartId: null, cart: null, loading: false });
+        }
+      })
+      .catch(() => {
+        localStorage.removeItem(CART_ID_KEY);
+        set({
+          cartId: null,
+          cart: null,
+          loading: false,
+          error: 'Failed to fetch cart',
+        });
+      });
+  },
+
+  // Add item to cart (creates cart if needed)
+  addItem: async (variantId: string, quantity: number = 1) => {
+    try {
+      set({ loading: true, error: null });
+
+      // Get or create cart
+      let currentCartId = get().cartId;
+      if (!currentCartId) {
+        const storedCartId = localStorage.getItem(CART_ID_KEY);
+        if (storedCartId) {
+          currentCartId = storedCartId;
+          set({ cartId: storedCartId });
+        } else {
+          const newCart = await createCartApi();
+          localStorage.setItem(CART_ID_KEY, newCart.id);
+          set({ cart: newCart, cartId: newCart.id });
+          currentCartId = newCart.id;
+        }
+      }
+
+      const updatedCart = await addCartLinesApi(currentCartId, [
+        { merchandiseId: variantId, quantity },
+      ]);
+      set({ cart: updatedCart, loading: false });
+      return updatedCart;
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : 'Failed to add item to cart';
+      set({ error: errorMessage, loading: false });
+      throw err;
+    }
+  },
+
+  // Remove item from cart
+  removeItem: async (lineId: string) => {
+    const { cartId } = get();
+    if (!cartId) throw new Error('No cart exists');
+
+    try {
+      set({ loading: true, error: null });
+      const updatedCart = await removeCartLinesApi(cartId, [lineId]);
+      set({ cart: updatedCart, loading: false });
+      return updatedCart;
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : 'Failed to remove item from cart';
+      set({ error: errorMessage, loading: false });
+      throw err;
+    }
+  },
+
+  // Update item quantity
+  updateItemQuantity: async (lineId: string, quantity: number) => {
+    const { cartId, removeItem } = get();
+    if (!cartId) throw new Error('No cart exists');
+
+    if (quantity <= 0) {
+      return removeItem(lineId);
+    }
+
+    try {
+      set({ loading: true, error: null });
+      const updatedCart = await updateCartLinesApi(cartId, [
+        { id: lineId, quantity },
+      ]);
+      set({ cart: updatedCart, loading: false });
+      return updatedCart;
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : 'Failed to update item quantity';
+      set({ error: errorMessage, loading: false });
+      throw err;
+    }
+  },
+
+  // Refresh cart from Shopify
+  refreshCart: async () => {
+    const storedCartId = localStorage.getItem(CART_ID_KEY);
+    if (!storedCartId) {
+      set({ loading: false });
+      return;
+    }
+
+    try {
+      set({ loading: true, error: null });
+      const fetchedCart = await getCartApi(storedCartId);
+      if (fetchedCart) {
+        set({ cart: fetchedCart, cartId: storedCartId, loading: false });
+      } else {
+        localStorage.removeItem(CART_ID_KEY);
+        set({ cartId: null, cart: null, loading: false });
+      }
+    } catch (err) {
+      localStorage.removeItem(CART_ID_KEY);
+      set({
+        cartId: null,
+        cart: null,
+        loading: false,
+        error: 'Failed to fetch cart',
+      });
+    }
+  },
+}));
+
+// ─── Hook (backwards-compatible API) ─────────────────────────────────
+
+export function useShopifyCart() {
+  const store = useCartStore();
+
+  // Initialize cart safely in an effect, not during render
+  useEffect(() => {
+    if (!store._initialized) {
+      store.initCart();
+    }
+  }, []);
+
+  const items = store.cart?.lines?.edges?.map((edge) => edge.node) ?? [];
+  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
+  const totalAmount = parseFloat(store.cart?.cost?.totalAmount?.amount ?? '0');
+  const checkoutUrl = store.cart?.checkoutUrl ?? null;
+
+  return {
+    isOpen: store.isOpen,
+    openCart: store.openCart,
+    closeCart: store.closeCart,
+    toggleCart: store.toggleCart,
+    cartId: store.cartId,
+    cart: store.cart,
+    items,
+    itemCount,
+    totalAmount,
+    checkoutUrl,
+    loading: store.loading,
+    error: store.error,
+    addItem: store.addItem,
+    removeItem: store.removeItem,
+    updateItemQuantity: store.updateItemQuantity,
+    refreshCart: store.refreshCart,
+  };
+}
@@ -0,0 +1,127 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { shopifyFetch } from '@/services/shopify/client';
+import {
+  GET_COLLECTIONS_QUERY,
+  GET_COLLECTION_PRODUCTS_QUERY,
+} from '@/graphql/collections';
+import type { Product } from '@/hooks/use-shopify-products';
+
+interface CollectionImage {
+  url: string;
+  altText?: string;
+}
+
+export interface Collection {
+  id: string;
+  title: string;
+  handle: string;
+  description?: string;
+  descriptionHtml?: string;
+  image?: CollectionImage;
+}
+
+export interface CollectionWithProducts extends Collection {
+  products: Product[];
+}
+
+interface UseCollectionProductsOptions {
+  first?: number;
+  sortKey?: 'BEST_SELLING' | 'CREATED' | 'PRICE' | 'TITLE';
+  reverse?: boolean;
+}
+
+// Fetch all collections
+export async function getCollections(first = 50): Promise<Collection[]> {
+  const response = await shopifyFetch({
+    query: GET_COLLECTIONS_QUERY,
+    variables: { first },
+  });
+
+  return response.data.collections.edges.map((edge: { node: Collection }) => edge.node);
+}
+
+// Fetch products in a collection by handle
+export async function getCollectionProducts(
+  handle: string,
+  { first = 50, sortKey = 'BEST_SELLING', reverse = false }: UseCollectionProductsOptions = {}
+): Promise<CollectionWithProducts | null> {
+  const response = await shopifyFetch({
+    query: GET_COLLECTION_PRODUCTS_QUERY,
+    variables: { handle, first, sortKey, reverse },
+  });
+
+  const collection = response.data.collection;
+  if (!collection) return null;
+
+  return {
+    ...collection,
+    products: collection.products.edges.map((edge: { node: Product }) => edge.node),
+  };
+}
+
+// Hook for fetching all collections
+export function useCollections(first = 50) {
+  const [collections, setCollections] = useState<Collection[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchCollections = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getCollections(first);
+      setCollections(data);
+    } catch (err) {
+      console.error('Error fetching collections:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load collections');
+    } finally {
+      setLoading(false);
+    }
+  }, [first]);
+
+  useEffect(() => {
+    fetchCollections();
+  }, [fetchCollections]);
+
+  return { collections, loading, error, refetch: fetchCollections };
+}
+
+// Hook for fetching products in a collection
+export function useCollectionProducts(
+  handle: string | null,
+  options: UseCollectionProductsOptions = {}
+) {
+  const [collection, setCollection] = useState<CollectionWithProducts | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchCollection = useCallback(async () => {
+    if (!handle) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getCollectionProducts(handle, options);
+      setCollection(data);
+      if (!data) {
+        setError('Collection not found');
+      }
+    } catch (err) {
+      console.error('Error fetching collection products:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load collection');
+    } finally {
+      setLoading(false);
+    }
+  }, [handle, options.first, options.sortKey, options.reverse]);
+
+  useEffect(() => {
+    fetchCollection();
+  }, [fetchCollection]);
+
+  return { collection, loading, error, refetch: fetchCollection };
+}
@@ -0,0 +1,205 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { shopifyFetch } from '@/services/shopify/client';
+import {
+  GET_PRODUCTS_QUERY,
+  GET_PRODUCT_QUERY,
+  QUERY_PRODUCT_RECOMMENDATIONS,
+} from '@/graphql/products';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductPrice {
+  amount: string;
+  currencyCode: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: ProductPrice;
+  availableForSale: boolean;
+  selectedOptions: Array<{
+    name: string;
+    value: string;
+  }>;
+  image?: ProductImage;
+}
+
+interface ProductOption {
+  id: string;
+  name: string;
+  values: string[];
+}
+
+export interface Product {
+  id: string;
+  title: string;
+  description?: string;
+  descriptionHtml?: string;
+  handle: string;
+  images: {
+    edges: Array<{
+      node: ProductImage;
+    }>;
+  };
+  priceRange: {
+    minVariantPrice: ProductPrice;
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: ProductPrice;
+  };
+  variants: {
+    edges: Array<{
+      node: ProductVariant;
+    }>;
+  };
+  options: ProductOption[];
+}
+
+interface UseProductsOptions {
+  first?: number;
+  query?: string;
+  sortKey?: 'BEST_SELLING' | 'CREATED_AT' | 'PRICE' | 'TITLE';
+  reverse?: boolean;
+}
+
+interface UseProductsReturn {
+  products: Product[];
+  loading: boolean;
+  error: string | null;
+  refetch: () => Promise<void>;
+}
+
+// Fetch multiple products
+export async function getProducts({
+  first = 20,
+  query = '',
+  sortKey = 'BEST_SELLING',
+  reverse = false,
+}: UseProductsOptions = {}): Promise<Product[]> {
+  const response = await shopifyFetch({
+    query: GET_PRODUCTS_QUERY,
+    variables: { first, query, sortKey, reverse },
+  });
+
+  return response.data.products.edges.map((edge: { node: Product }) => edge.node);
+}
+
+// Fetch a single product by handle
+export async function getProduct(handle: string): Promise<Product | null> {
+  const response = await shopifyFetch({
+    query: GET_PRODUCT_QUERY,
+    variables: { handle },
+  });
+
+  return response.data.product;
+}
+
+// Fetch product recommendations
+export async function getProductRecommendations(productId: string): Promise<Product[]> {
+  const response = await shopifyFetch({
+    query: QUERY_PRODUCT_RECOMMENDATIONS,
+    variables: { productId },
+  });
+
+  return response.data.productRecommendations || [];
+}
+
+// Hook for fetching multiple products
+export function useProducts(options: UseProductsOptions = {}): UseProductsReturn {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchProducts = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getProducts(options);
+      setProducts(data);
+    } catch (err) {
+      console.error('Error fetching products:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load products');
+    } finally {
+      setLoading(false);
+    }
+  }, [options.first, options.query, options.sortKey, options.reverse]);
+
+  useEffect(() => {
+    fetchProducts();
+  }, [fetchProducts]);
+
+  return { products, loading, error, refetch: fetchProducts };
+}
+
+// Hook for fetching a single product
+export function useProduct(handle: string | null) {
+  const [product, setProduct] = useState<Product | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchProduct = useCallback(async () => {
+    if (!handle) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getProduct(handle);
+      setProduct(data);
+      if (!data) {
+        setError('Product not found');
+      }
+    } catch (err) {
+      console.error('Error fetching product:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load product');
+    } finally {
+      setLoading(false);
+    }
+  }, [handle]);
+
+  useEffect(() => {
+    fetchProduct();
+  }, [fetchProduct]);
+
+  return { product, loading, error, refetch: fetchProduct };
+}
+
+// Hook for fetching product recommendations
+export function useProductRecommendations(productId: string | null) {
+  const [recommendations, setRecommendations] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchRecommendations = useCallback(async () => {
+    if (!productId) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getProductRecommendations(productId);
+      setRecommendations(data);
+    } catch (err) {
+      console.error('Error fetching recommendations:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load recommendations');
+    } finally {
+      setLoading(false);
+    }
+  }, [productId]);
+
+  useEffect(() => {
+    fetchRecommendations();
+  }, [fetchRecommendations]);
+
+  return { recommendations, loading, error, refetch: fetchRecommendations };
+}