PRODUCTCARD COMPONENT

Display product information with image, title, price, and add to cart button.

PREVIEW

Classic Band Tee

$29.99

CODE

product-card-example.tsxtsx

1import { ProductCard } from '@/components/fanbace/product-card';
2import { useCart } from '@/lib/sdk';
3 
4export default function Example() {
5  const { addItem } = useCart();
6 
7  const handleAddToCart = async () => {
8    await addItem({
9      productId: product.id,
10      variantId: product.variants[0].id,
11      quantity: 1,
12    });
13  };
14 
15  return (
16    <ProductCard
17      product={product}
18      onAddToCart={handleAddToCart}
19    />
20  );
21}

PROPS

Prop	Type	Default	Description
product	Product	-	Product data to display
onAddToCart	() => void	-	Callback when add to cart is clicked
loading	boolean	false	Show loading skeleton
className	string	-	Additional CSS classes

VARIANTS

Loading State

Sold Out

SOLD OUT

Vintage Festival Tee - SOLD OUT

$29.99

With Badge

Limited Edition Tour Tee

$34.99

LIMITED

Compact Size

Classic Band Tee

$29.99

USAGE EXAMPLES

IN A GRID LAYOUT

Display multiple products in a responsive grid

1<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
2  {products.map(product => (
3    <ProductCard
4      key={product.id}
5      product={product}
6      onAddToCart={() => handleAddToCart(product)}
7    />
8  ))}
9</div>

WITH CUSTOM STYLING

Override default styles with className

1<ProductCard
2  product={product}
3  className="border-2 border-primary shadow-xl"
4  onAddToCart={handleAddToCart}
5/>

WITH ANALYTICS TRACKING

Track user interactions

1<ProductCard
2  product={product}
3  onAddToCart={() => {
4    analytics.track('add_to_cart', {
5      product_id: product.id,
6      product_name: product.name,
7      price: product.variants[0].price.amount,
8    });
9    handleAddToCart(product);
10  }}
11/>