SHOPPINGCART COMPONENT

Full-featured shopping cart with quantity controls, item removal, and discount codes.

PROPS

PropTypeDefaultDescription
cartCart-Shopping cart data
onUpdateQuantity(itemId, qty) => void-Update item quantity callback
onRemoveItem(itemId) => void-Remove item callback
onApplyDiscount(code) => Promise<void>-Apply discount code callback
showDiscountInputbooleantrueShow discount code input

Variants

Full Cart with Multiple Items

Shopping Cart (2 items)

Classic Band Tee

Classic Band Tee

M / Black

€ 29,99

2

€ 59,98

Embroidered Dad Hat

Embroidered Dad Hat

One Size / Black

€ 24,99

1

€ 24,99

ORDER SUMMARY

Subtotal€ 84,97
ShippingFREE
Tax€ 8,50
Total€ 93,47
1import { ShoppingCart } from '@/components/fanbace/shopping-cart';
2import { useCart } from '@/lib/sdk';
3 
4export default function CartPage() {
5  const { cart, updateQuantity, removeItem, applyDiscount } = useCart();
6 
7  return (
8    <ShoppingCart
9      cart={cart}
10      onUpdateQuantity={updateQuantity}
11      onRemoveItem={removeItem}
12      onApplyDiscount={applyDiscount}
13    />
14  );
15}

Empty Cart

Your cart is empty

Add some products to get started

Cart with Single Item

Shopping Cart (1 item)

Classic Band Tee

Classic Band Tee

M / Black

€ 29,99

2

€ 59,98

With Applied Discount

WELCOME10 Applied

You saved € 0,00!

ORDER SUMMARY

Subtotal€ 84,97
ShippingFREE
Tax€ 8,50
Total€ 93,47

USAGE EXAMPLES

BASIC IMPLEMENTATION

Simple shopping cart page

1import { ShoppingCart } from '@/components/fanbace/shopping-cart';
2import { useCart } from '@/lib/sdk';
3import { useRouter } from 'next/navigation';
4 
5export default function CartPage() {
6  const router = useRouter();
7  const { cart, updateQuantity, removeItem, applyDiscount } = useCart();
8 
9  const handleCheckout = () => {
10    router.push('/checkout');
11  };
12 
13  return (
14    <div className="container mx-auto px-4 py-8">
15      <h1 className="text-3xl font-bold mb-8">Shopping Cart</h1>
16 
17      <ShoppingCart
18        cart={cart}
19        onUpdateQuantity={updateQuantity}
20        onRemoveItem={removeItem}
21        onApplyDiscount={applyDiscount}
22        onCheckout={handleCheckout}
23      />
24    </div>
25  );
26}

WITH ANALYTICS TRACKING

Track cart interactions

1import { ShoppingCart } from '@/components/fanbace/shopping-cart';
2import { useCart } from '@/lib/sdk';
3import { analytics } from '@/lib/analytics';
4 
5export default function CartPage() {
6  const { cart, updateQuantity, removeItem } = useCart();
7 
8  const handleUpdateQuantity = async (itemId: string, quantity: number) => {
9    await updateQuantity(itemId, quantity);
10    analytics.track('cart_item_updated', { itemId, quantity });
11  };
12 
13  const handleRemoveItem = async (itemId: string) => {
14    await removeItem(itemId);
15    analytics.track('cart_item_removed', { itemId });
16  };
17 
18  return (
19    <ShoppingCart
20      cart={cart}
21      onUpdateQuantity={handleUpdateQuantity}
22      onRemoveItem={handleRemoveItem}
23    />
24  );
25}