Merge branch 'main' into fix-base-url

2025-05-08 18:57:51 +00:00 · 2024-07-28 23:00:11 -05:00 · 2024-07-28 23:00:11 -05:00 · c114c35104
commit c114c35104
parent 77035c9362 9a4c995bb6
43 changed files with 1782 additions and 3589 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,23 +0,0 @@
-module.exports = {
-  extends: ['next', 'prettier'],
-  plugins: ['unicorn'],
-  rules: {
-    'no-unused-vars': [
-      'error',
-      {
-        args: 'after-used',
-        caughtErrors: 'none',
-        ignoreRestSiblings: true,
-        vars: 'all'
-      }
-    ],
-    'prefer-const': 'error',
-    'react-hooks/exhaustive-deps': 'error',
-    'unicorn/filename-case': [
-      'error',
-      {
-        case: 'kebabCase'
-      }
-    ]
-  }
-};
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -1,6 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: 'github-actions'
-    directory: '/'
-    schedule:
-      interval: 'weekly'
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -1,35 +0,0 @@
-name: test
-on: pull_request
-
-# Cancel in progress workflows on pull_requests.
-# https://docs.github.com/en/actions/using-jobs/using-concurrency#example-using-a-fallback-value
-concurrency:
-  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-  cancel-in-progress: true
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v4
-      - name: Set node version
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-      - name: Set pnpm version
-        uses: pnpm/action-setup@v2
-        with:
-          run_install: false
-          version: 7
-      - name: Cache node_modules
-        id: node-modules-cache
-        uses: actions/cache@v3
-        with:
-          path: '**/node_modules'
-          key: node-modules-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
-      - name: Install dependencies
-        if: steps.node-modules-cache.outputs.cache-hit != 'true'
-        run: pnpm install --no-frozen-lockfile
-      - name: Run tests
-        run: pnpm test
--- a/.nvmrc
+++ b/.nvmrc
@ -1 +0,0 @@
-18
--- a/.prettierignore
+++ b/.prettierignore
@ -1,3 +0,0 @@
-.vercel
-.next
-pnpm-lock.yaml
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -2,8 +2,8 @@
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": true,
-    "source.sortMembers": true
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
  }
 }
--- a/README.md
+++ b/README.md
@ -27,6 +27,7 @@ Vercel is happy to partner and work with any commerce provider to help them get

 - Shopify (this repository)
 - [BigCommerce](https://github.com/bigcommerce/nextjs-commerce) ([Demo](https://next-commerce-v2.vercel.app/))
+- [Ecwid by Lightspeed](https://github.com/Ecwid/ecwid-nextjs-commerce/) ([Demo](https://ecwid-nextjs-commerce.vercel.app/))
 - [Medusa](https://github.com/medusajs/vercel-commerce) ([Demo](https://medusa-nextjs-commerce.vercel.app/))
 - [Saleor](https://github.com/saleor/nextjs-commerce) ([Demo](https://saleor-commerce.vercel.app/))
 - [Shopware](https://github.com/shopwareLabs/vercel-commerce) ([Demo](https://shopware-vercel-commerce-react.vercel.app/))
@ -73,4 +74,4 @@ Your app should now be running on [localhost:3000](http://localhost:3000/).

 ## Vercel, Next.js Commerce, and Shopify Integration Guide

-You can use this comprehensive [integration guide](http://vercel.com/docs/integrations/shopify) with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.
+You can use this comprehensive [integration guide](https://vercel.com/docs/integrations/ecommerce/shopify) with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.
--- a/app/[page]/layout.tsx
+++ b/app/[page]/layout.tsx
@ -1,15 +1,12 @@
 import Footer from 'components/layout/footer';
-import { Suspense } from 'react';

 export default function Layout({ children }: { children: React.ReactNode }) {
  return (
-    <Suspense>
+    <>
      <div className="w-full">
-        <div className="mx-8 max-w-2xl py-20 sm:mx-auto">
-          <Suspense>{children}</Suspense>
-        </div>
+        <div className="mx-8 max-w-2xl py-20 sm:mx-auto">{children}</div>
      </div>
      <Footer />
-    </Suspense>
+    </>
  );
 }
--- a/app/[page]/page.tsx
+++ b/app/[page]/page.tsx
@ -4,8 +4,6 @@ import Prose from 'components/prose';
 import { getPage } from 'lib/shopify';
 import { notFound } from 'next/navigation';

-export const runtime = 'edge';
-
 export async function generateMetadata({
  params
 }: {
--- a/app/api/revalidate/route.ts
+++ b/app/api/revalidate/route.ts
@ -1,8 +1,6 @@
 import { revalidate } from 'lib/shopify';
 import { NextRequest, NextResponse } from 'next/server';

-export const runtime = 'edge';
-
 export async function POST(req: NextRequest): Promise<NextResponse> {
  return revalidate(req);
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,7 +1,12 @@
-import Navbar from 'components/layout/navbar';
-import { GeistSans } from 'geist/font';
+import { CartProvider } from 'components/cart/cart-context';
+import { Navbar } from 'components/layout/navbar';
+import { WelcomeToast } from 'components/welcome-toast';
+import { GeistSans } from 'geist/font/sans';
+import { getCart } from 'lib/shopify';
 import { ensureStartsWith } from 'lib/utils';
-import { ReactNode, Suspense } from 'react';
+import { cookies } from 'next/headers';
+import { ReactNode } from 'react';
+import { Toaster } from 'sonner';
 import './globals.css';
 import { BASE_URL } from 'lib/constants';

@ -30,13 +35,21 @@ export const metadata = {
 };

 export default async function RootLayout({ children }: { children: ReactNode }) {
+  const cartId = cookies().get('cartId')?.value;
+  // Don't await the fetch, pass the Promise to the context provider
+  const cart = getCart(cartId);
+
  return (
    <html lang="en" className={GeistSans.variable}>
      <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
-        <Navbar />
-        <Suspense>
-          <main>{children}</main>
-        </Suspense>
+        <CartProvider cartPromise={cart}>
+          <Navbar />
+          <main>
+            {children}
+            <Toaster closeButton />
+            <WelcomeToast />
+          </main>
+        </CartProvider>
      </body>
    </html>
  );
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,9 +1,6 @@
 import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
-import { Suspense } from 'react';
-
-export const runtime = 'edge';

 export const metadata = {
  description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
@ -12,16 +9,12 @@ export const metadata = {
  }
 };

-export default async function HomePage() {
+export default function HomePage() {
  return (
    <>
      <ThreeItemGrid />
-      <Suspense>
-        <Carousel />
-        <Suspense>
-          <Footer />
-        </Suspense>
-      </Suspense>
+      <Carousel />
+      <Footer />
    </>
  );
 }
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@ -1,17 +1,16 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { Suspense } from 'react';

 import { GridTileImage } from 'components/grid/tile';
 import Footer from 'components/layout/footer';
 import { Gallery } from 'components/product/gallery';
+import { ProductProvider } from 'components/product/product-context';
 import { ProductDescription } from 'components/product/product-description';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image } from 'lib/shopify/types';
 import Link from 'next/link';
-
-export const runtime = 'edge';
+import { Suspense } from 'react';

 export async function generateMetadata({
  params
@ -74,7 +73,7 @@ export default async function ProductPage({ params }: { params: { handle: string
  };

  return (
-    <>
+    <ProductProvider>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
@ -90,7 +89,7 @@ export default async function ProductPage({ params }: { params: { handle: string
              }
            >
              <Gallery
-                images={product.images.map((image: Image) => ({
+                images={product.images.slice(0, 5).map((image: Image) => ({
                  src: image.url,
                  altText: image.altText
                }))}
@ -99,17 +98,15 @@ export default async function ProductPage({ params }: { params: { handle: string
          </div>

          <div className="basis-full lg:basis-2/6">
-            <ProductDescription product={product} />
+            <Suspense fallback={null}>
+              <ProductDescription product={product} />
+            </Suspense>
          </div>
        </div>
-        <Suspense>
-          <RelatedProducts id={product.id} />
-        </Suspense>
+        <RelatedProducts id={product.id} />
      </div>
-      <Suspense>
-        <Footer />
-      </Suspense>
-    </>
+      <Footer />
+    </ProductProvider>
  );
 }

@ -127,7 +124,11 @@ async function RelatedProducts({ id }: { id: string }) {
            key={product.handle}
            className="aspect-square w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
          >
-            <Link className="relative h-full w-full" href={`/product/${product.handle}`}>
+            <Link
+              className="relative h-full w-full"
+              href={`/product/${product.handle}`}
+              prefetch={true}
+            >
              <GridTileImage
                alt={product.title}
                label={{
--- a/app/search/[collection]/page.tsx
+++ b/app/search/[collection]/page.tsx
@ -6,8 +6,6 @@ import Grid from 'components/grid';
 import ProductGridItems from 'components/layout/product-grid-items';
 import { defaultSort, sorting } from 'lib/constants';

-export const runtime = 'edge';
-
 export async function generateMetadata({
  params
 }: {
--- a/app/search/layout.tsx
+++ b/app/search/layout.tsx
@ -2,11 +2,10 @@ import Footer from 'components/layout/footer';
 import Collections from 'components/layout/search/collections';
 import FilterList from 'components/layout/search/filter';
 import { sorting } from 'lib/constants';
-import { Suspense } from 'react';

 export default function SearchLayout({ children }: { children: React.ReactNode }) {
  return (
-    <Suspense>
+    <>
      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white">
        <div className="order-first w-full flex-none md:max-w-[125px]">
          <Collections />
@ -17,6 +16,6 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
        </div>
      </div>
      <Footer />
-    </Suspense>
+    </>
  );
 }
--- a/app/search/loading.tsx
+++ b/app/search/loading.tsx
@ -7,7 +7,7 @@ export default function Loading() {
        .fill(0)
        .map((_, index) => {
          return (
-            <Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-900" />
+            <Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-800" />
          );
        })}
    </Grid>
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@ -3,8 +3,6 @@ import ProductGridItems from 'components/layout/product-grid-items';
 import { defaultSort, sorting } from 'lib/constants';
 import { getProducts } from 'lib/shopify';

-export const runtime = 'edge';
-
 export const metadata = {
  title: 'Search',
  description: 'Search for products in the store.'
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@ -8,6 +8,8 @@ type Route = {
  lastModified: string;
 };

+export const dynamic = 'force-dynamic';
+
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  validateEnvironmentVariables();

--- a/components/cart/actions.ts
+++ b/components/cart/actions.ts
@ -4,23 +4,13 @@ import { TAGS } from 'lib/constants';
 import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/shopify';
 import { revalidateTag } from 'next/cache';
 import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';

 export async function addItem(prevState: any, selectedVariantId: string | undefined) {
  let cartId = cookies().get('cartId')?.value;
-  let cart;

-  if (cartId) {
-    cart = await getCart(cartId);
-  }
-
-  if (!cartId || !cart) {
-    cart = await createCart();
-    cartId = cart.id;
-    cookies().set('cartId', cartId);
-  }
-
-  if (!selectedVariantId) {
-    return 'Missing product variant ID';
+  if (!cartId || !selectedVariantId) {
+    return 'Error adding item to cart';
  }

  try {
@ -31,16 +21,28 @@ export async function addItem(prevState: any, selectedVariantId: string | undefi
  }
 }

-export async function removeItem(prevState: any, lineId: string) {
-  const cartId = cookies().get('cartId')?.value;
+export async function removeItem(prevState: any, merchandiseId: string) {
+  let cartId = cookies().get('cartId')?.value;

  if (!cartId) {
    return 'Missing cart ID';
  }

  try {
-    await removeFromCart(cartId, [lineId]);
-    revalidateTag(TAGS.cart);
+    const cart = await getCart(cartId);
+
+    if (!cart) {
+      return 'Error fetching cart';
+    }
+
+    const lineItem = cart.lines.find((line) => line.merchandise.id === merchandiseId);
+
+    if (lineItem && lineItem.id) {
+      await removeFromCart(cartId, [lineItem.id]);
+      revalidateTag(TAGS.cart);
+    } else {
+      return 'Item not found in cart';
+    }
  } catch (e) {
    return 'Error removing item from cart';
  }
@ -49,35 +51,68 @@ export async function removeItem(prevState: any, lineId: string) {
 export async function updateItemQuantity(
  prevState: any,
  payload: {
-    lineId: string;
-    variantId: string;
+    merchandiseId: string;
    quantity: number;
  }
 ) {
-  const cartId = cookies().get('cartId')?.value;
+  let cartId = cookies().get('cartId')?.value;

  if (!cartId) {
    return 'Missing cart ID';
  }

-  const { lineId, variantId, quantity } = payload;
+  const { merchandiseId, quantity } = payload;

  try {
-    if (quantity === 0) {
-      await removeFromCart(cartId, [lineId]);
-      revalidateTag(TAGS.cart);
-      return;
+    const cart = await getCart(cartId);
+
+    if (!cart) {
+      return 'Error fetching cart';
    }

-    await updateCart(cartId, [
-      {
-        id: lineId,
-        merchandiseId: variantId,
-        quantity
+    const lineItem = cart.lines.find((line) => line.merchandise.id === merchandiseId);
+
+    if (lineItem && lineItem.id) {
+      if (quantity === 0) {
+        await removeFromCart(cartId, [lineItem.id]);
+      } else {
+        await updateCart(cartId, [
+          {
+            id: lineItem.id,
+            merchandiseId,
+            quantity
+          }
+        ]);
      }
-    ]);
+    } else if (quantity > 0) {
+      // If the item doesn't exist in the cart and quantity > 0, add it
+      await addToCart(cartId, [{ merchandiseId, quantity }]);
+    }
+
    revalidateTag(TAGS.cart);
  } catch (e) {
+    console.error(e);
    return 'Error updating item quantity';
  }
 }
+
+export async function redirectToCheckout() {
+  let cartId = cookies().get('cartId')?.value;
+
+  if (!cartId) {
+    return 'Missing cart ID';
+  }
+
+  let cart = await getCart(cartId);
+
+  if (!cart) {
+    return 'Error fetching cart';
+  }
+
+  redirect(cart.checkoutUrl);
+}
+
+export async function createCartAndSetCookie() {
+  let cart = await createCart();
+  cookies().set('cartId', cart.id!);
+}
--- a/components/cart/add-to-cart.tsx
+++ b/components/cart/add-to-cart.tsx
@ -3,10 +3,10 @@
 import { PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
-import LoadingDots from 'components/loading-dots';
-import { ProductVariant } from 'lib/shopify/types';
-import { useSearchParams } from 'next/navigation';
-import { useFormState, useFormStatus } from 'react-dom';
+import { useProduct } from 'components/product/product-context';
+import { Product, ProductVariant } from 'lib/shopify/types';
+import { useFormState } from 'react-dom';
+import { useCart } from './cart-context';

 function SubmitButton({
  availableForSale,
@ -15,7 +15,6 @@ function SubmitButton({
  availableForSale: boolean;
  selectedVariantId: string | undefined;
 }) {
-  const { pending } = useFormStatus();
  const buttonClasses =
    'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
  const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
@ -45,44 +44,40 @@ function SubmitButton({

  return (
    <button
-      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
-        if (pending) e.preventDefault();
-      }}
      aria-label="Add to cart"
-      aria-disabled={pending}
      className={clsx(buttonClasses, {
-        'hover:opacity-90': true,
-        disabledClasses: pending
+        'hover:opacity-90': true
      })}
    >
      <div className="absolute left-0 ml-4">
-        {pending ? <LoadingDots className="mb-3 bg-white" /> : <PlusIcon className="h-5" />}
+        <PlusIcon className="h-5" />
      </div>
      Add To Cart
    </button>
  );
 }

-export function AddToCart({
-  variants,
-  availableForSale
-}: {
-  variants: ProductVariant[];
-  availableForSale: boolean;
-}) {
+export function AddToCart({ product }: { product: Product }) {
+  const { variants, availableForSale } = product;
+  const { addCartItem } = useCart();
+  const { state } = useProduct();
  const [message, formAction] = useFormState(addItem, null);
-  const searchParams = useSearchParams();
-  const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
+
  const variant = variants.find((variant: ProductVariant) =>
-    variant.selectedOptions.every(
-      (option) => option.value === searchParams.get(option.name.toLowerCase())
-    )
+    variant.selectedOptions.every((option) => option.value === state[option.name.toLowerCase()])
  );
+  const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
  const selectedVariantId = variant?.id || defaultVariantId;
  const actionWithVariant = formAction.bind(null, selectedVariantId);
+  const finalVariant = variants.find((variant) => variant.id === selectedVariantId)!;

  return (
-    <form action={actionWithVariant}>
+    <form
+      action={async () => {
+        addCartItem(finalVariant, product);
+        await actionWithVariant();
+      }}
+    >
      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
      <p aria-live="polite" className="sr-only" role="status">
        {message}
--- a/components/cart/cart-context.tsx
+++ b/components/cart/cart-context.tsx
@ -0,0 +1,184 @@
+'use client';
+
+import type { Cart, CartItem, Product, ProductVariant } from 'lib/shopify/types';
+import React, { createContext, use, useContext, useMemo, useOptimistic } from 'react';
+
+type UpdateType = 'plus' | 'minus' | 'delete';
+
+type CartAction =
+  | { type: 'UPDATE_ITEM'; payload: { merchandiseId: string; updateType: UpdateType } }
+  | { type: 'ADD_ITEM'; payload: { variant: ProductVariant; product: Product } };
+
+type CartContextType = {
+  cart: Cart | undefined;
+  updateCartItem: (merchandiseId: string, updateType: UpdateType) => void;
+  addCartItem: (variant: ProductVariant, product: Product) => void;
+};
+
+const CartContext = createContext<CartContextType | undefined>(undefined);
+
+function calculateItemCost(quantity: number, price: string): string {
+  return (Number(price) * quantity).toString();
+}
+
+function updateCartItem(item: CartItem, updateType: UpdateType): CartItem | null {
+  if (updateType === 'delete') return null;
+
+  const newQuantity = updateType === 'plus' ? item.quantity + 1 : item.quantity - 1;
+  if (newQuantity === 0) return null;
+
+  const singleItemAmount = Number(item.cost.totalAmount.amount) / item.quantity;
+  const newTotalAmount = calculateItemCost(newQuantity, singleItemAmount.toString());
+
+  return {
+    ...item,
+    quantity: newQuantity,
+    cost: {
+      ...item.cost,
+      totalAmount: {
+        ...item.cost.totalAmount,
+        amount: newTotalAmount
+      }
+    }
+  };
+}
+
+function createOrUpdateCartItem(
+  existingItem: CartItem | undefined,
+  variant: ProductVariant,
+  product: Product
+): CartItem {
+  const quantity = existingItem ? existingItem.quantity + 1 : 1;
+  const totalAmount = calculateItemCost(quantity, variant.price.amount);
+
+  return {
+    id: existingItem?.id,
+    quantity,
+    cost: {
+      totalAmount: {
+        amount: totalAmount,
+        currencyCode: variant.price.currencyCode
+      }
+    },
+    merchandise: {
+      id: variant.id,
+      title: variant.title,
+      selectedOptions: variant.selectedOptions,
+      product: {
+        id: product.id,
+        handle: product.handle,
+        title: product.title,
+        featuredImage: product.featuredImage
+      }
+    }
+  };
+}
+
+function updateCartTotals(lines: CartItem[]): Pick<Cart, 'totalQuantity' | 'cost'> {
+  const totalQuantity = lines.reduce((sum, item) => sum + item.quantity, 0);
+  const totalAmount = lines.reduce((sum, item) => sum + Number(item.cost.totalAmount.amount), 0);
+  const currencyCode = lines[0]?.cost.totalAmount.currencyCode ?? 'USD';
+
+  return {
+    totalQuantity,
+    cost: {
+      subtotalAmount: { amount: totalAmount.toString(), currencyCode },
+      totalAmount: { amount: totalAmount.toString(), currencyCode },
+      totalTaxAmount: { amount: '0', currencyCode }
+    }
+  };
+}
+
+function createEmptyCart(): Cart {
+  return {
+    id: undefined,
+    checkoutUrl: '',
+    totalQuantity: 0,
+    lines: [],
+    cost: {
+      subtotalAmount: { amount: '0', currencyCode: 'USD' },
+      totalAmount: { amount: '0', currencyCode: 'USD' },
+      totalTaxAmount: { amount: '0', currencyCode: 'USD' }
+    }
+  };
+}
+
+function cartReducer(state: Cart | undefined, action: CartAction): Cart {
+  const currentCart = state || createEmptyCart();
+
+  switch (action.type) {
+    case 'UPDATE_ITEM': {
+      const { merchandiseId, updateType } = action.payload;
+      const updatedLines = currentCart.lines
+        .map((item) =>
+          item.merchandise.id === merchandiseId ? updateCartItem(item, updateType) : item
+        )
+        .filter(Boolean) as CartItem[];
+
+      if (updatedLines.length === 0) {
+        return {
+          ...currentCart,
+          lines: [],
+          totalQuantity: 0,
+          cost: {
+            ...currentCart.cost,
+            totalAmount: { ...currentCart.cost.totalAmount, amount: '0' }
+          }
+        };
+      }
+
+      return { ...currentCart, ...updateCartTotals(updatedLines), lines: updatedLines };
+    }
+    case 'ADD_ITEM': {
+      const { variant, product } = action.payload;
+      const existingItem = currentCart.lines.find((item) => item.merchandise.id === variant.id);
+      const updatedItem = createOrUpdateCartItem(existingItem, variant, product);
+
+      const updatedLines = existingItem
+        ? currentCart.lines.map((item) => (item.merchandise.id === variant.id ? updatedItem : item))
+        : [...currentCart.lines, updatedItem];
+
+      return { ...currentCart, ...updateCartTotals(updatedLines), lines: updatedLines };
+    }
+    default:
+      return currentCart;
+  }
+}
+
+export function CartProvider({
+  children,
+  cartPromise
+}: {
+  children: React.ReactNode;
+  cartPromise: Promise<Cart | undefined>;
+}) {
+  const initialCart = use(cartPromise);
+  const [optimisticCart, updateOptimisticCart] = useOptimistic(initialCart, cartReducer);
+
+  const updateCartItem = (merchandiseId: string, updateType: UpdateType) => {
+    updateOptimisticCart({ type: 'UPDATE_ITEM', payload: { merchandiseId, updateType } });
+  };
+
+  const addCartItem = (variant: ProductVariant, product: Product) => {
+    updateOptimisticCart({ type: 'ADD_ITEM', payload: { variant, product } });
+  };
+
+  const value = useMemo(
+    () => ({
+      cart: optimisticCart,
+      updateCartItem,
+      addCartItem
+    }),
+    [optimisticCart]
+  );
+
+  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
+}
+
+export function useCart() {
+  const context = useContext(CartContext);
+  if (context === undefined) {
+    throw new Error('useCart must be used within a CartProvider');
+  }
+  return context;
+}
--- a/components/cart/delete-item-button.tsx
+++ b/components/cart/delete-item-button.tsx
@ -1,47 +1,35 @@
 'use client';

 import { XMarkIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
 import { removeItem } from 'components/cart/actions';
-import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
-import { useFormState, useFormStatus } from 'react-dom';
+import { useFormState } from 'react-dom';

-function SubmitButton() {
-  const { pending } = useFormStatus();
-
-  return (
-    <button
-      type="submit"
-      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
-        if (pending) e.preventDefault();
-      }}
-      aria-label="Remove cart item"
-      aria-disabled={pending}
-      className={clsx(
-        'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200',
-        {
-          'cursor-not-allowed px-0': pending
-        }
-      )}
-    >
-      {pending ? (
-        <LoadingDots className="bg-white" />
-      ) : (
-        <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
-      )}
-    </button>
-  );
-}
-
-export function DeleteItemButton({ item }: { item: CartItem }) {
+export function DeleteItemButton({
+  item,
+  optimisticUpdate
+}: {
+  item: CartItem;
+  optimisticUpdate: any;
+}) {
  const [message, formAction] = useFormState(removeItem, null);
-  const itemId = item.id;
-  const actionWithVariant = formAction.bind(null, itemId);
+  const merchandiseId = item.merchandise.id;
+  const actionWithVariant = formAction.bind(null, merchandiseId);

  return (
-    <form action={actionWithVariant}>
-      <SubmitButton />
+    <form
+      action={async () => {
+        optimisticUpdate(merchandiseId, 'delete');
+        await actionWithVariant();
+      }}
+    >
+      <button
+        type="submit"
+        aria-label="Remove cart item"
+        className="flex h-[24px] w-[24px] items-center justify-center rounded-full bg-neutral-500"
+      >
+        <XMarkIcon className="mx-[1px] h-4 w-4 text-white dark:text-black" />
+      </button>
      <p aria-live="polite" className="sr-only" role="status">
        {message}
      </p>
--- a/components/cart/edit-item-quantity-button.tsx
+++ b/components/cart/edit-item-quantity-button.tsx
@ -3,32 +3,22 @@
 import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { updateItemQuantity } from 'components/cart/actions';
-import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
-import { useFormState, useFormStatus } from 'react-dom';
+import { useFormState } from 'react-dom';

 function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
-  const { pending } = useFormStatus();
-
  return (
    <button
      type="submit"
-      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
-        if (pending) e.preventDefault();
-      }}
      aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
-      aria-disabled={pending}
      className={clsx(
-        'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
+        'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full p-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
        {
-          'cursor-not-allowed': pending,
          'ml-auto': type === 'minus'
        }
      )}
    >
-      {pending ? (
-        <LoadingDots className="bg-black dark:bg-white" />
-      ) : type === 'plus' ? (
+      {type === 'plus' ? (
        <PlusIcon className="h-4 w-4 dark:text-neutral-500" />
      ) : (
        <MinusIcon className="h-4 w-4 dark:text-neutral-500" />
@ -37,17 +27,29 @@ function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
  );
 }

-export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) {
+export function EditItemQuantityButton({
+  item,
+  type,
+  optimisticUpdate
+}: {
+  item: CartItem;
+  type: 'plus' | 'minus';
+  optimisticUpdate: any;
+}) {
  const [message, formAction] = useFormState(updateItemQuantity, null);
  const payload = {
-    lineId: item.id,
-    variantId: item.merchandise.id,
+    merchandiseId: item.merchandise.id,
    quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
  };
  const actionWithVariant = formAction.bind(null, payload);

  return (
-    <form action={actionWithVariant}>
+    <form
+      action={async () => {
+        optimisticUpdate(payload.merchandiseId, type);
+        await actionWithVariant();
+      }}
+    >
      <SubmitButton type={type} />
      <p aria-live="polite" className="sr-only" role="status">
        {message}
--- a/components/cart/index.tsx
+++ b/components/cart/index.tsx
@ -1,14 +0,0 @@
-import { getCart } from 'lib/shopify';
-import { cookies } from 'next/headers';
-import CartModal from './modal';
-
-export default async function Cart() {
-  const cartId = cookies().get('cartId')?.value;
-  let cart;
-
-  if (cartId) {
-    cart = await getCart(cartId);
-  }
-
-  return <CartModal cart={cart} />;
-}
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@ -2,13 +2,16 @@

 import { Dialog, Transition } from '@headlessui/react';
 import { ShoppingCartIcon } from '@heroicons/react/24/outline';
+import LoadingDots from 'components/loading-dots';
 import Price from 'components/price';
 import { DEFAULT_OPTION } from 'lib/constants';
-import type { Cart } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useEffect, useRef, useState } from 'react';
+import { useFormStatus } from 'react-dom';
+import { createCartAndSetCookie, redirectToCheckout } from './actions';
+import { useCart } from './cart-context';
 import CloseCart from './close-cart';
 import { DeleteItemButton } from './delete-item-button';
 import { EditItemQuantityButton } from './edit-item-quantity-button';
@ -18,21 +21,28 @@ type MerchandiseSearchParams = {
  [key: string]: string;
 };

-export default function CartModal({ cart }: { cart: Cart | undefined }) {
+export default function CartModal() {
+  const { cart, updateCartItem } = useCart();
  const [isOpen, setIsOpen] = useState(false);
  const quantityRef = useRef(cart?.totalQuantity);
  const openCart = () => setIsOpen(true);
  const closeCart = () => setIsOpen(false);

  useEffect(() => {
-    // Open cart modal when quantity changes.
-    if (cart?.totalQuantity !== quantityRef.current) {
-      // But only if it's not already open (quantity also changes when editing items in cart).
+    if (!cart) {
+      createCartAndSetCookie();
+    }
+  }, [cart]);
+
+  useEffect(() => {
+    if (
+      cart?.totalQuantity &&
+      cart?.totalQuantity !== quantityRef.current &&
+      cart?.totalQuantity > 0
+    ) {
      if (!isOpen) {
        setIsOpen(true);
      }
-
-      // Always update the quantity reference
      quantityRef.current = cart?.totalQuantity;
    }
  }, [isOpen, cart?.totalQuantity, quantityRef]);
@ -67,7 +77,6 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[390px] dark:border-neutral-700 dark:bg-black/80 dark:text-white">
              <div className="flex items-center justify-between">
                <p className="text-lg font-semibold">My Cart</p>
-
                <button aria-label="Close cart" onClick={closeCart}>
                  <CloseCart />
                </button>
@ -81,76 +90,89 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
              ) : (
                <div className="flex h-full flex-col justify-between overflow-hidden p-1">
                  <ul className="flex-grow overflow-auto py-4">
-                    {cart.lines.map((item, i) => {
-                      const merchandiseSearchParams = {} as MerchandiseSearchParams;
+                    {cart.lines
+                      .sort((a, b) =>
+                        a.merchandise.product.title.localeCompare(b.merchandise.product.title)
+                      )
+                      .map((item, i) => {
+                        const merchandiseSearchParams = {} as MerchandiseSearchParams;

-                      item.merchandise.selectedOptions.forEach(({ name, value }) => {
-                        if (value !== DEFAULT_OPTION) {
-                          merchandiseSearchParams[name.toLowerCase()] = value;
-                        }
-                      });
+                        item.merchandise.selectedOptions.forEach(({ name, value }) => {
+                          if (value !== DEFAULT_OPTION) {
+                            merchandiseSearchParams[name.toLowerCase()] = value;
+                          }
+                        });

-                      const merchandiseUrl = createUrl(
-                        `/product/${item.merchandise.product.handle}`,
-                        new URLSearchParams(merchandiseSearchParams)
-                      );
+                        const merchandiseUrl = createUrl(
+                          `/product/${item.merchandise.product.handle}`,
+                          new URLSearchParams(merchandiseSearchParams)
+                        );

-                      return (
-                        <li
-                          key={i}
-                          className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
-                        >
-                          <div className="relative flex w-full flex-row justify-between px-1 py-4">
-                            <div className="absolute z-40 -mt-2 ml-[55px]">
-                              <DeleteItemButton item={item} />
-                            </div>
-                            <Link
-                              href={merchandiseUrl}
-                              onClick={closeCart}
-                              className="z-30 flex flex-row space-x-4"
-                            >
-                              <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
-                                <Image
-                                  className="h-full w-full object-cover"
-                                  width={64}
-                                  height={64}
-                                  alt={
-                                    item.merchandise.product.featuredImage.altText ||
-                                    item.merchandise.product.title
-                                  }
-                                  src={item.merchandise.product.featuredImage.url}
+                        return (
+                          <li
+                            key={i}
+                            className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
+                          >
+                            <div className="relative flex w-full flex-row justify-between px-1 py-4">
+                              <div className="absolute z-40 -ml-1 -mt-2">
+                                <DeleteItemButton item={item} optimisticUpdate={updateCartItem} />
+                              </div>
+                              <div className="flex flex-row">
+                                <div className="relative h-16 w-16 overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
+                                  <Image
+                                    className="h-full w-full object-cover"
+                                    width={64}
+                                    height={64}
+                                    alt={
+                                      item.merchandise.product.featuredImage.altText ||
+                                      item.merchandise.product.title
+                                    }
+                                    src={item.merchandise.product.featuredImage.url}
+                                  />
+                                </div>
+                                <Link
+                                  href={merchandiseUrl}
+                                  onClick={closeCart}
+                                  className="z-30 ml-2 flex flex-row space-x-4"
+                                >
+                                  <div className="flex flex-1 flex-col text-base">
+                                    <span className="leading-tight">
+                                      {item.merchandise.product.title}
+                                    </span>
+                                    {item.merchandise.title !== DEFAULT_OPTION ? (
+                                      <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                                        {item.merchandise.title}
+                                      </p>
+                                    ) : null}
+                                  </div>
+                                </Link>
+                              </div>
+                              <div className="flex h-16 flex-col justify-between">
+                                <Price
+                                  className="flex justify-end space-y-2 text-right text-sm"
+                                  amount={item.cost.totalAmount.amount}
+                                  currencyCode={item.cost.totalAmount.currencyCode}
                                />
-                              </div>
-
-                              <div className="flex flex-1 flex-col text-base">
-                                <span className="leading-tight">
-                                  {item.merchandise.product.title}
-                                </span>
-                                {item.merchandise.title !== DEFAULT_OPTION ? (
-                                  <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                                    {item.merchandise.title}
+                                <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
+                                  <EditItemQuantityButton
+                                    item={item}
+                                    type="minus"
+                                    optimisticUpdate={updateCartItem}
+                                  />
+                                  <p className="w-6 text-center">
+                                    <span className="w-full text-sm">{item.quantity}</span>
                                  </p>
-                                ) : null}
-                              </div>
-                            </Link>
-                            <div className="flex h-16 flex-col justify-between">
-                              <Price
-                                className="flex justify-end space-y-2 text-right text-sm"
-                                amount={item.cost.totalAmount.amount}
-                                currencyCode={item.cost.totalAmount.currencyCode}
-                              />
-                              <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
-                                <EditItemQuantityButton item={item} type="minus" />
-                                <p className="w-6 text-center">
-                                  <span className="w-full text-sm">{item.quantity}</span>
-                                </p>
-                                <EditItemQuantityButton item={item} type="plus" />
+                                  <EditItemQuantityButton
+                                    item={item}
+                                    type="plus"
+                                    optimisticUpdate={updateCartItem}
+                                  />
+                                </div>
                              </div>
                            </div>
-                          </div>
-                        </li>
-                      );
-                    })}
+                          </li>
+                        );
+                      })}
                  </ul>
                  <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
@ -174,12 +196,9 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                      />
                    </div>
                  </div>
-                  <a
-                    href={cart.checkoutUrl}
-                    className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
-                  >
-                    Proceed to Checkout
-                  </a>
+                  <form action={redirectToCheckout}>
+                    <CheckoutButton />
+                  </form>
                </div>
              )}
            </Dialog.Panel>
@ -189,3 +208,17 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
    </>
  );
 }
+
+function CheckoutButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <button
+      className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
+      type="submit"
+      disabled={pending}
+    >
+      {pending ? <LoadingDots className="bg-white" /> : 'Proceed to Checkout'}
+    </button>
+  );
+}
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@ -16,7 +16,11 @@ function ThreeItemGridItem({
    <div
      className={size === 'full' ? 'md:col-span-4 md:row-span-2' : 'md:col-span-2 md:row-span-1'}
    >
-      <Link className="relative block aspect-square h-full w-full" href={`/product/${item.handle}`}>
+      <Link
+        className="relative block aspect-square h-full w-full"
+        href={`/product/${item.handle}`}
+        prefetch={true}
+      >
        <GridTileImage
          src={item.featuredImage.url}
          fill
@ -48,7 +52,7 @@ export async function ThreeItemGrid() {
  const [firstProduct, secondProduct, thirdProduct] = homepageItems;

  return (
-    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2">
+    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2 lg:max-h-[calc(100vh-200px)]">
      <ThreeItemGridItem size="full" item={firstProduct} priority={true} />
      <ThreeItemGridItem size="half" item={secondProduct} priority={true} />
      <ThreeItemGridItem size="half" item={thirdProduct} />
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@ -56,10 +56,12 @@ export default async function Footer() {
            {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
          </p>
          <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
-          <p>Designed in California</p>
+          <p>
+            <a href="https://github.com/vercel/commerce">View the source</a>
+          </p>
          <p className="md:ml-auto">
            <a href="https://vercel.com" className="text-black dark:text-white">
-              Crafted by ▲ Vercel
+              Created by ▲ Vercel
            </a>
          </p>
        </div>
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@ -1,5 +1,4 @@
-import Cart from 'components/cart';
-import OpenCart from 'components/cart/open-cart';
+import CartModal from 'components/cart/modal';
 import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopify';
 import { Menu } from 'lib/shopify/types';
@ -7,9 +6,10 @@ import Link from 'next/link';
 import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
 import Search, { SearchSkeleton } from './search';
+
 const { SITE_NAME } = process.env;

-export default async function Navbar() {
+export async function Navbar() {
  const menu = await getMenu('next-js-frontend-header-menu');

  return (
@ -21,7 +21,11 @@ export default async function Navbar() {
      </div>
      <div className="flex w-full items-center">
        <div className="flex w-full md:w-1/3">
-          <Link href="/" className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6">
+          <Link
+            href="/"
+            prefetch={true}
+            className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
+          >
            <LogoSquare />
            <div className="ml-2 flex-none text-sm font-medium uppercase md:hidden lg:block">
              {SITE_NAME}
@ -33,6 +37,7 @@ export default async function Navbar() {
                <li key={item.title}>
                  <Link
                    href={item.path}
+                    prefetch={true}
                    className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
                  >
                    {item.title}
@ -48,9 +53,7 @@ export default async function Navbar() {
          </Suspense>
        </div>
        <div className="flex justify-end md:w-1/3">
-          <Suspense fallback={<OpenCart />}>
-            <Cart />
-          </Suspense>
+          <CartModal />
        </div>
      </div>
    </nav>
--- a/components/layout/navbar/mobile-menu.tsx
+++ b/components/layout/navbar/mobile-menu.tsx
@ -83,7 +83,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                        className="py-2 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
                        key={item.title}
                      >
-                        <Link href={item.path} onClick={closeMobileMenu}>
+                        <Link href={item.path} prefetch={true} onClick={closeMobileMenu}>
                          {item.title}
                        </Link>
                      </li>
--- a/components/layout/navbar/search.tsx
+++ b/components/layout/navbar/search.tsx
@ -33,7 +33,7 @@ export default function Search() {
        placeholder="Search for products..."
        autoComplete="off"
        defaultValue={searchParams?.get('q') || ''}
-        className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
+        className="text-md w-full rounded-lg border bg-white px-4 py-2 text-black placeholder:text-neutral-500 md:text-sm dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
      />
      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
        <MagnifyingGlassIcon className="h-4" />
--- a/components/layout/product-grid-items.tsx
+++ b/components/layout/product-grid-items.tsx
@ -8,7 +8,11 @@ export default function ProductGridItems({ products }: { products: Product[] })
    <>
      {products.map((product) => (
        <Grid.Item key={product.handle} className="animate-fadeIn">
-          <Link className="relative inline-block h-full w-full" href={`/product/${product.handle}`}>
+          <Link
+            className="relative inline-block h-full w-full"
+            href={`/product/${product.handle}`}
+            prefetch={true}
+          >
            <GridTileImage
              alt={product.title}
              label={{
--- a/components/layout/search/filter/index.tsx
+++ b/components/layout/search/filter/index.tsx
@ -28,12 +28,12 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
        <ul className="hidden md:block">
          <Suspense fallback={null}>
            <FilterItemList list={list} />
-          </Suspense>{' '}
+          </Suspense>
        </ul>
        <ul className="md:hidden">
          <Suspense fallback={null}>
            <FilterItemDropdown list={list} />
-          </Suspense>{' '}
+          </Suspense>
        </ul>
      </nav>
    </>
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@ -2,32 +2,22 @@

 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import { GridTileImage } from 'components/grid/tile';
-import { createUrl } from 'lib/utils';
+import { useProduct, useUpdateURL } from 'components/product/product-context';
 import Image from 'next/image';
-import Link from 'next/link';
-import { usePathname, useSearchParams } from 'next/navigation';

 export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const imageSearchParam = searchParams.get('image');
-  const imageIndex = imageSearchParam ? parseInt(imageSearchParam) : 0;
+  const { state, updateImage } = useProduct();
+  const updateURL = useUpdateURL();
+  const imageIndex = state.image ? parseInt(state.image) : 0;

-  const nextSearchParams = new URLSearchParams(searchParams.toString());
  const nextImageIndex = imageIndex + 1 < images.length ? imageIndex + 1 : 0;
-  nextSearchParams.set('image', nextImageIndex.toString());
-  const nextUrl = createUrl(pathname, nextSearchParams);
-
-  const previousSearchParams = new URLSearchParams(searchParams.toString());
  const previousImageIndex = imageIndex === 0 ? images.length - 1 : imageIndex - 1;
-  previousSearchParams.set('image', previousImageIndex.toString());
-  const previousUrl = createUrl(pathname, previousSearchParams);

  const buttonClassName =
    'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white flex items-center justify-center';

  return (
-    <>
+    <form>
      <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
        {images[imageIndex] && (
          <Image
@ -43,23 +33,27 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
        {images.length > 1 ? (
          <div className="absolute bottom-[15%] flex w-full justify-center">
            <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
-              <Link
+              <button
+                formAction={() => {
+                  const newState = updateImage(previousImageIndex.toString());
+                  updateURL(newState);
+                }}
                aria-label="Previous product image"
-                href={previousUrl}
                className={buttonClassName}
-                scroll={false}
              >
                <ArrowLeftIcon className="h-5" />
-              </Link>
+              </button>
              <div className="mx-1 h-6 w-px bg-neutral-500"></div>
-              <Link
+              <button
+                formAction={() => {
+                  const newState = updateImage(nextImageIndex.toString());
+                  updateURL(newState);
+                }}
                aria-label="Next product image"
-                href={nextUrl}
                className={buttonClassName}
-                scroll={false}
              >
                <ArrowRightIcon className="h-5" />
-              </Link>
+              </button>
            </div>
          </div>
        ) : null}
@ -69,16 +63,15 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
        <ul className="my-12 flex items-center justify-center gap-2 overflow-auto py-1 lg:mb-0">
          {images.map((image, index) => {
            const isActive = index === imageIndex;
-            const imageSearchParams = new URLSearchParams(searchParams.toString());
-
-            imageSearchParams.set('image', index.toString());

            return (
              <li key={image.src} className="h-20 w-20">
-                <Link
-                  aria-label="Enlarge product image"
-                  href={createUrl(pathname, imageSearchParams)}
-                  scroll={false}
+                <button
+                  formAction={() => {
+                    const newState = updateImage(index.toString());
+                    updateURL(newState);
+                  }}
+                  aria-label="Select product image"
                  className="h-full w-full"
                >
                  <GridTileImage
@ -88,12 +81,12 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
                    height={80}
                    active={isActive}
                  />
-                </Link>
+                </button>
              </li>
            );
          })}
        </ul>
      ) : null}
-    </>
+    </form>
  );
 }
--- a/components/product/product-context.tsx
+++ b/components/product/product-context.tsx
@ -0,0 +1,81 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import React, { createContext, useContext, useMemo, useOptimistic } from 'react';
+
+type ProductState = {
+  [key: string]: string;
+} & {
+  image?: string;
+};
+
+type ProductContextType = {
+  state: ProductState;
+  updateOption: (name: string, value: string) => ProductState;
+  updateImage: (index: string) => ProductState;
+};
+
+const ProductContext = createContext<ProductContextType | undefined>(undefined);
+
+export function ProductProvider({ children }: { children: React.ReactNode }) {
+  const searchParams = useSearchParams();
+
+  const getInitialState = () => {
+    const params: ProductState = {};
+    for (const [key, value] of searchParams.entries()) {
+      params[key] = value;
+    }
+    return params;
+  };
+
+  const [state, setOptimisticState] = useOptimistic(
+    getInitialState(),
+    (prevState: ProductState, update: ProductState) => ({
+      ...prevState,
+      ...update
+    })
+  );
+
+  const updateOption = (name: string, value: string) => {
+    const newState = { [name]: value };
+    setOptimisticState(newState);
+    return { ...state, ...newState };
+  };
+
+  const updateImage = (index: string) => {
+    const newState = { image: index };
+    setOptimisticState(newState);
+    return { ...state, ...newState };
+  };
+
+  const value = useMemo(
+    () => ({
+      state,
+      updateOption,
+      updateImage
+    }),
+    [state]
+  );
+
+  return <ProductContext.Provider value={value}>{children}</ProductContext.Provider>;
+}
+
+export function useProduct() {
+  const context = useContext(ProductContext);
+  if (context === undefined) {
+    throw new Error('useProduct must be used within a ProductProvider');
+  }
+  return context;
+}
+
+export function useUpdateURL() {
+  const router = useRouter();
+
+  return (state: ProductState) => {
+    const newParams = new URLSearchParams(window.location.search);
+    Object.entries(state).forEach(([key, value]) => {
+      newParams.set(key, value);
+    });
+    router.push(`?${newParams.toString()}`, { scroll: false });
+  };
+}
--- a/components/product/product-description.tsx
+++ b/components/product/product-description.tsx
@ -2,7 +2,6 @@ import { AddToCart } from 'components/cart/add-to-cart';
 import Price from 'components/price';
 import Prose from 'components/prose';
 import { Product } from 'lib/shopify/types';
-import { Suspense } from 'react';
 import { VariantSelector } from './variant-selector';

 export function ProductDescription({ product }: { product: Product }) {
@ -17,20 +16,14 @@ export function ProductDescription({ product }: { product: Product }) {
          />
        </div>
      </div>
-      <Suspense fallback={null}>
-        <VariantSelector options={product.options} variants={product.variants} />
-      </Suspense>
-
+      <VariantSelector options={product.options} variants={product.variants} />
      {product.descriptionHtml ? (
        <Prose
          className="mb-6 text-sm leading-tight dark:text-white/[60%]"
          html={product.descriptionHtml}
        />
      ) : null}
-
-      <Suspense fallback={null}>
-        <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
-      </Suspense>
+      <AddToCart product={product} />
    </>
  );
 }
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@ -1,14 +1,13 @@
 'use client';

 import clsx from 'clsx';
+import { useProduct, useUpdateURL } from 'components/product/product-context';
 import { ProductOption, ProductVariant } from 'lib/shopify/types';
-import { createUrl } from 'lib/utils';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';

 type Combination = {
  id: string;
  availableForSale: boolean;
-  [key: string]: string | boolean; // ie. { color: 'Red', size: 'Large', ... }
+  [key: string]: string | boolean;
 };

 export function VariantSelector({
@ -18,9 +17,8 @@ export function VariantSelector({
  options: ProductOption[];
  variants: ProductVariant[];
 }) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
+  const { state, updateOption } = useProduct();
+  const updateURL = useUpdateURL();
  const hasNoOptionsOrJustOneOption =
    !options.length || (options.length === 1 && options[0]?.values.length === 1);

@ -31,7 +29,6 @@ export function VariantSelector({
  const combinations: Combination[] = variants.map((variant) => ({
    id: variant.id,
    availableForSale: variant.availableForSale,
-    // Adds key / value pairs for each variant (ie. "color": "Black" and "size": 'M").
    ...variant.selectedOptions.reduce(
      (accumulator, option) => ({ ...accumulator, [option.name.toLowerCase()]: option.value }),
      {}
@ -39,68 +36,58 @@ export function VariantSelector({
  }));

  return options.map((option) => (
-    <dl className="mb-8" key={option.id}>
-      <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
-      <dd className="flex flex-wrap gap-3">
-        {option.values.map((value) => {
-          const optionNameLowerCase = option.name.toLowerCase();
+    <form key={option.id}>
+      <dl className="mb-8">
+        <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
+        <dd className="flex flex-wrap gap-3">
+          {option.values.map((value) => {
+            const optionNameLowerCase = option.name.toLowerCase();

-          // Base option params on current params so we can preserve any other param state in the url.
-          const optionSearchParams = new URLSearchParams(searchParams.toString());
+            // Base option params on current selectedOptions so we can preserve any other param state.
+            const optionParams = { ...state, [optionNameLowerCase]: value };

-          // Update the option params using the current option to reflect how the url *would* change,
-          // if the option was clicked.
-          optionSearchParams.set(optionNameLowerCase, value);
-          const optionUrl = createUrl(pathname, optionSearchParams);
+            // Filter out invalid options and check if the option combination is available for sale.
+            const filtered = Object.entries(optionParams).filter(([key, value]) =>
+              options.find(
+                (option) => option.name.toLowerCase() === key && option.values.includes(value)
+              )
+            );
+            const isAvailableForSale = combinations.find((combination) =>
+              filtered.every(
+                ([key, value]) => combination[key] === value && combination.availableForSale
+              )
+            );

-          // In order to determine if an option is available for sale, we need to:
-          //
-          // 1. Filter out all other param state
-          // 2. Filter out invalid options
-          // 3. Check if the option combination is available for sale
-          //
-          // This is the "magic" that will cross check possible variant combinations and preemptively
-          // disable combinations that are not available. For example, if the color gray is only available in size medium,
-          // then all other sizes should be disabled.
-          const filtered = Array.from(optionSearchParams.entries()).filter(([key, value]) =>
-            options.find(
-              (option) => option.name.toLowerCase() === key && option.values.includes(value)
-            )
-          );
-          const isAvailableForSale = combinations.find((combination) =>
-            filtered.every(
-              ([key, value]) => combination[key] === value && combination.availableForSale
-            )
-          );
+            // The option is active if it's in the selected options.
+            const isActive = state[optionNameLowerCase] === value;

-          // The option is active if it's in the url params.
-          const isActive = searchParams.get(optionNameLowerCase) === value;
-
-          return (
-            <button
-              key={value}
-              aria-disabled={!isAvailableForSale}
-              disabled={!isAvailableForSale}
-              onClick={() => {
-                router.replace(optionUrl, { scroll: false });
-              }}
-              title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
-              className={clsx(
-                'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
-                {
-                  'cursor-default ring-2 ring-blue-600': isActive,
-                  'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
-                    !isActive && isAvailableForSale,
-                  'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
-                    !isAvailableForSale
-                }
-              )}
-            >
-              {value}
-            </button>
-          );
-        })}
-      </dd>
-    </dl>
+            return (
+              <button
+                formAction={() => {
+                  const newState = updateOption(optionNameLowerCase, value);
+                  updateURL(newState);
+                }}
+                key={value}
+                aria-disabled={!isAvailableForSale}
+                disabled={!isAvailableForSale}
+                title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
+                className={clsx(
+                  'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
+                  {
+                    'cursor-default ring-2 ring-blue-600': isActive,
+                    'ring-1 ring-transparent transition duration-300 ease-in-out hover:ring-blue-600':
+                      !isActive && isAvailableForSale,
+                    'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
+                      !isAvailableForSale
+                  }
+                )}
+              >
+                {value}
+              </button>
+            );
+          })}
+        </dd>
+      </dl>
+    </form>
  ));
 }
--- a/components/welcome-toast.tsx
+++ b/components/welcome-toast.tsx
@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+
+export function WelcomeToast() {
+  useEffect(() => {
+    // ignore if screen height is too small
+    if (window.innerHeight < 650) return;
+    if (!document.cookie.includes('welcome-toast=2')) {
+      toast('🛍️ Welcome to Next.js Commerce!', {
+        id: 'welcome-toast',
+        duration: Infinity,
+        onDismiss: () => {
+          document.cookie = 'welcome-toast=2; max-age=31536000; path=/';
+        },
+        description: (
+          <>
+            This is a high-performance, SSR storefront powered by Shopify, Next.js, and Vercel.{' '}
+            <a
+              href="https://vercel.com/templates/next.js/nextjs-commerce"
+              className="text-blue-600 hover:underline"
+              target="_blank"
+            >
+              Deploy your own
+            </a>
+            .
+          </>
+        )
+      });
+    }
+  }, []);
+
+  return null;
+}
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@ -114,7 +114,7 @@ export async function shopifyFetch<T>({
  }
 }

-const removeEdgesAndNodes = (array: Connection<any>) => {
+const removeEdgesAndNodes = <T>(array: Connection<T>): T[] => {
  return array.edges.map((edge) => edge?.node);
 };

@ -163,7 +163,7 @@ const reshapeImages = (images: Connection<Image>, productTitle: string) => {
  const flattened = removeEdgesAndNodes(images);

  return flattened.map((image) => {
-    const filename = image.url.match(/.*\/(.*)\..*/)[1];
+    const filename = image.url.match(/.*\/(.*)\..*/)?.[1];
    return {
      ...image,
      altText: image.altText || `${productTitle} - ${filename}`
@ -254,12 +254,15 @@ export async function updateCart(
  return reshapeCart(res.body.data.cartLinesUpdate.cart);
 }

-export async function getCart(cartId: string): Promise<Cart | undefined> {
+export async function getCart(cartId: string | undefined): Promise<Cart | undefined> {
+  if (!cartId) {
+    return undefined;
+  }
+
  const res = await shopifyFetch<ShopifyCartOperation>({
    query: getCartQuery,
    variables: { cartId },
-    tags: [TAGS.cart],
-    cache: 'no-store'
+    tags: [TAGS.cart]
  });

  // Old carts becomes `null` when you checkout.
@ -357,6 +360,7 @@ export async function getMenu(handle: string): Promise<Menu[]> {
 export async function getPage(handle: string): Promise<Page> {
  const res = await shopifyFetch<ShopifyPageOperation>({
    query: getPageQuery,
+    cache: 'no-store',
    variables: { handle }
  });

@ -365,7 +369,8 @@ export async function getPage(handle: string): Promise<Page> {

 export async function getPages(): Promise<Page[]> {
  const res = await shopifyFetch<ShopifyPagesOperation>({
-    query: getPagesQuery
+    query: getPagesQuery,
+    cache: 'no-store'
  });

  return removeEdgesAndNodes(res.body.data.pages);
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@ -12,8 +12,15 @@ export type Cart = Omit<ShopifyCart, 'lines'> & {
  lines: CartItem[];
 };

-export type CartItem = {
+export type CartProduct = {
  id: string;
+  handle: string;
+  title: string;
+  featuredImage: Image;
+};
+
+export type CartItem = {
+  id: string | undefined;
  quantity: number;
  cost: {
    totalAmount: Money;
@ -25,7 +32,7 @@ export type CartItem = {
      name: string;
      value: string;
    }[];
-    product: Product;
+    product: CartProduct;
  };
 };

@ -89,7 +96,7 @@ export type SEO = {
 };

 export type ShopifyCart = {
-  id: string;
+  id: string | undefined;
  checkoutUrl: string;
  cost: {
    subtotalAmount: Money;
--- a/next.config.js
+++ b/next.config.js
@ -1,9 +1,5 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
-  eslint: {
-    // Disabling on production builds because we're running checks on PRs via GitHub Actions.
-    ignoreDuringBuilds: true
-  },
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
--- a/package.json
+++ b/package.json
@ -1,52 +1,39 @@
 {
  "private": true,
-  "packageManager": "pnpm@8.2.0",
  "engines": {
-    "node": ">=18",
-    "pnpm": ">=7"
+    "node": ">=20",
+    "pnpm": ">=9"
  },
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
-    "lint": "next lint",
-    "lint-staged": "lint-staged",
    "prettier": "prettier --write --ignore-unknown .",
    "prettier:check": "prettier --check --ignore-unknown .",
-    "test": "pnpm lint && pnpm prettier:check"
-  },
-  "git": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*": "prettier --write --ignore-unknown"
+    "test": "pnpm prettier:check"
  },
  "dependencies": {
-    "@headlessui/react": "^1.7.18",
-    "@heroicons/react": "^2.1.3",
-    "clsx": "^2.1.0",
-    "geist": "^1.3.0",
-    "next": "14.1.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@headlessui/react": "^2.1.2",
+    "@heroicons/react": "^2.1.5",
+    "clsx": "^2.1.1",
+    "geist": "^1.3.1",
+    "next": "14.2.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "sonner": "^1.5.0"
  },
  "devDependencies": {
    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/typography": "^0.5.11",
-    "@types/node": "20.11.30",
-    "@types/react": "18.2.72",
-    "@types/react-dom": "18.2.22",
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/node": "20.14.12",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
    "@vercel/git-hooks": "^1.0.0",
    "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-unicorn": "^51.0.1",
-    "lint-staged": "^15.2.2",
-    "postcss": "^8.4.38",
-    "prettier": "3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.12",
-    "tailwindcss": "^3.4.1",
-    "typescript": "5.4.3"
+    "postcss": "^8.4.39",
+    "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "tailwindcss": "^3.4.6",
+    "typescript": "5.5.4"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,7 +1,8 @@
 {
  "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
    "lib": ["dom", "dom.iterable", "esnext"],
+    "downlevelIteration": true,
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,