Update shopify cart
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user