frontend-shopify/react-editor-shopify
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update shopify cart

Browse Source
This commit is contained in:
Rami Bitar
2026-05-08 09:21:49 -04:00
parent 4845e48e17
commit ef941245d1
5 changed files with 21 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/commerce/cart-drawer.tsx
View File

@@ -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 {
RiCloseLine,
RiImageLine,
RiSubtractLine,
RiAddLine,
} from '@remixicon/react';
import { X, ImageIcon, Minus, Plus } from 'lucide-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>

10
components/commerce/product-details.tsx
View File

@@ -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>

85
components/navigation/navigation.tsx
View File

@@ -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>
</>
);
}