WISHLIST COMPONENT

Save favorite products for later with add to cart and sharing options.

My Wishlist (4)

Classic Band Tee

100% cotton vintage-style band tee with premium screen printing. Pre-shrunk for the perfect fit.

€ 29,99

Limited Edition Tour Tee

Exclusive tour merchandise. Heavy cotton with vintage wash. Only 500 made.

€ 34,99

Premium Logo Hoodie

Ultra-soft fleece hoodie with embroidered logo. 80% cotton, 20% polyester blend.

€ 59,99

Embroidered Dad Hat

Classic dad hat with embroidered logo. Adjustable strap, one size fits most.

€ 24,99

EMPTY STATE

Your Wishlist is Empty

Save items you love to your wishlist

CODE EXAMPLE

wishlist-example.tsxtsx

1import { Wishlist } from '@/components/fanbace/wishlist';
2import { useWishlist, useCart } from '@/lib/sdk';
3 
4export default function WishlistPage() {
5  const { items, removeItem } = useWishlist();
6  const { addItem } = useCart();
7 
8  return (
9    <Wishlist
10      items={items}
11      onRemove={(productId) => removeItem(productId)}
12      onAddToCart={(productId, variantId) => {
13        addItem({ productId, variantId, quantity: 1 });
14      }}
15      onShare={(product) => {
16        navigator.share({
17          title: product.name,
18          url: `/products/${product.id}`
19        });
20      }}
21    />
22  );
23}

PROPS

Prop	Type	Description
items	Product[]	Array of wishlist products
onRemove	(id) => void	Remove item from wishlist
onAddToCart	(id, variantId) => void	Add wishlist item to cart
onShare	(product) => void	Share product callback