Update shopify cart

components/commerce/cart-drawer.tsx

@@ -5,12 +5,7 @@ import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
 import { Loader } from '@/components/ui/loader';
-import {
+import { X, ImageIcon, Minus, Plus } from 'lucide-react';
-  RiCloseLine,
-  RiImageLine,
-  RiSubtractLine,
-  RiAddLine,
-} from '@remixicon/react';
 import {
   Empty,
   EmptyHeader,
@@ -66,7 +61,7 @@ const CartDrawer: React.FC = () => {
               Shopping Cart ({itemCount})
             </SheetTitle>
             <Button onClick={closeCart} variant="ghost" size="icon-sm">
-              <RiCloseLine size={20} />
+              <X size={20} />
             </Button>
           </div>
         </SheetHeader>
@@ -116,7 +111,7 @@ const CartDrawer: React.FC = () => {
                         />
                       ) : (
                         <div className="w-full h-full flex items-center justify-center text-gray-400">
-                          <RiImageLine size={24} />
+                          <ImageIcon size={24} />
                         </div>
                       )}
                     </div>
@@ -153,7 +148,7 @@ const CartDrawer: React.FC = () => {
                             disabled={item.quantity <= 1 || loading}
                             className="h-7 w-7"
                           >
-                            <RiSubtractLine size={14} />
+                            <Minus size={14} />
                           </Button>
                           <span className="px-2 py-1 font-semibold min-w-[30px] text-center text-sm">
                             {item.quantity}
@@ -167,7 +162,7 @@ const CartDrawer: React.FC = () => {
                             disabled={loading}
                             className="h-7 w-7"
                           >
-                            <RiAddLine size={14} />
+                            <Plus size={14} />
                           </Button>
                         </div>
                       </div>
@@ -189,7 +184,7 @@ const CartDrawer: React.FC = () => {
                         disabled={loading}
                         className="text-gray-400 hover:text-gray-700"
                       >
-                        <RiCloseLine size={18} />
+                        <X size={18} />
                       </Button>
                     </div>
                   </div>

components/commerce/product-details.tsx

@@ -6,6 +6,7 @@ import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Typography } from "@/components/Typography";
 import { cn } from "@/lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Loader } from "@/components/ui/loader";
 
 export type ProductDetailsProps = {
   product: ShopifyProduct | null;
@@ -191,7 +192,14 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
               disabled={!variant || adding}
               className="flex-1 rounded-full bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background transition-opacity hover:opacity-90 disabled:opacity-50"
             >
-              {adding ? "Adding…" : "Add to bag"}
+              {adding ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loader size={16} />
+                  Adding…
+                </span>
+              ) : (
+                "Add to bag"
+              )}
             </button>
           </div>
 

components/navigation/navigation.tsx

@@ -29,7 +29,6 @@ export function Navigation({
   bannerTone,
 }: NavigationProps) {
   const [mobileOpen, setMobileOpen] = useState(false);
-  const [cartOpen, setCartOpen] = useState(false);
   const cart = useShopifyCart();
   const itemCount = cart?.itemCount ?? 0;
 
@@ -153,90 +152,6 @@ export function Navigation({
         </SheetContent>
       </Sheet>
 
-      {/* Cart drawer */}
-      <Sheet open={cartOpen} onOpenChange={setCartOpen}>
-        <SheetContent side="right" className="flex w-[92vw] max-w-md flex-col">
-          <SheetHeader>
-            <SheetTitle className="text-left">Cart</SheetTitle>
-          </SheetHeader>
-
-          <div className="mt-2 flex-1 overflow-y-auto px-4">
-            {cart?.items?.length ? (
-              <ul className="divide-y divide-border">
-                {cart.items.map((line: any) => (
-                  <li key={line.id} className="flex gap-4 py-4">
-                    <div className="aspect-square h-20 flex-shrink-0 overflow-hidden rounded-md bg-muted">
-                      {line.merchandise?.product?.images?.edges?.[0]?.node?.url ? (
-                        <img
-                          src={line.merchandise.product.images.edges[0].node.url}
-                          alt={line.merchandise.product.title}
-                          className="h-full w-full object-cover"
-                        />
-                      ) : null}
-                    </div>
-                    <div className="flex flex-1 flex-col">
-                      <p className="text-sm font-medium">{line.merchandise?.product?.title}</p>
-                      {line.merchandise?.title && line.merchandise.title !== "Default Title" ? (
-                        <p className="text-xs text-muted-foreground">{line.merchandise.title}</p>
-                      ) : null}
-                      <div className="mt-auto flex items-center justify-between">
-                        <div className="flex items-center gap-2 text-xs">
-                          <button
-                            onClick={() => cart.updateItemQuantity(line.id, line.quantity - 1)}
-                            className="h-6 w-6 rounded-full border border-border hover:bg-muted"
-                          >
-                            −
-                          </button>
-                          <span>{line.quantity}</span>
-                          <button
-                            onClick={() => cart.updateItemQuantity(line.id, line.quantity + 1)}
-                            className="h-6 w-6 rounded-full border border-border hover:bg-muted"
-                          >
-                            +
-                          </button>
-                        </div>
-                        <span className="text-sm">
-                          {line.merchandise?.price
-                            ? new Intl.NumberFormat("en-US", {
-                                style: "currency",
-                                currency: line.merchandise.price.currencyCode,
-                              }).format(parseFloat(line.merchandise.price.amount) * line.quantity)
-                            : null}
-                        </span>
-                      </div>
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <div className="flex h-full flex-col items-center justify-center gap-3 text-center text-sm text-muted-foreground">
-                <ShoppingBag size={28} strokeWidth={1.25} />
-                <p>Your cart is empty.</p>
-              </div>
-            )}
-          </div>
-
-          {cart?.items?.length ? (
-            <div className="border-t border-border p-4">
-              <div className="mb-4 flex items-center justify-between text-sm">
-                <span className="text-muted-foreground">Subtotal</span>
-                <span className="font-medium">
-                  {new Intl.NumberFormat("en-US", {
-                    style: "currency",
-                    currency: cart.cart?.cost?.totalAmount?.currencyCode ?? "USD",
-                  }).format(cart.totalAmount)}
-                </span>
-              </div>
-              <a
-                href={cart.checkoutUrl ?? "#"}
-                className="inline-flex w-full items-center justify-center rounded-full bg-foreground px-4 py-3 text-sm font-medium text-background transition-opacity hover:opacity-90"
-              >
-                Checkout
-              </a>
-            </div>
-          ) : null}
-        </SheetContent>
-      </Sheet>
     </>
   );
 }

contexts/shopify-context.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react';
+import { ShoppingBag } from 'lucide-react';
 import {
   createCart,
   getCart,
@@ -9,6 +10,8 @@ import {
   updateCartLines,
 } from '@/hooks/use-shopify-cart';
 import { setShopifyCredentials } from '@/services/shopify/client';
+import CartDrawer from '@/components/commerce/cart-drawer';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 
 const CART_ID_KEY = 'cartId';
 
@@ -200,6 +203,7 @@ export const ShopifyProvider: React.FC<{
       ]);
 
       setCart(updatedCart);
+      setIsOpen(true);
       return updatedCart;
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to add item to cart';
@@ -284,6 +288,7 @@ export const ShopifyProvider: React.FC<{
         refreshCart,
       }}>
         {children}
+        <CartDrawer />
       </CartContext.Provider>
     </ShopifyConfigContext.Provider>
   );

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Editor — Shopify Demo</title>
+    <title>Shopify Storefront</title>
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <link
       rel="stylesheet"