Workflow: Product Variant Selection

Select color, choose size based on availability, update quantity, and add to cart.

Select Color
2
Choose Size
3
Add to Cart
Classic Band Tee

Classic Band Tee

€ 29,99

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

Select Color

1// Color selection
2const [selectedColor, setSelectedColor] = useState<string>();
3 
4<ColorSelector
5  colors={availableColors}
6  selectedColor={selectedColor}
7  onColorChange={setSelectedColor}
8/>

2
Choose Size

1// Size selection based on color
2const availableSizes = variants
3  .filter(v => v.color === selectedColor)
4  .map(v => ({
5    size: v.size,
6    available: v.inventory.available
7  }));
8 
9<SizeSelector
10  sizes={availableSizes}
11  selectedSize={selectedSize}
12  onSizeChange={setSelectedSize}
13/>

3
Quantity & Add to Cart

Quantity:
1
1// Add to cart with selected variant
2const { addItem } = useCart();
3 
4const handleAddToCart = async () => {
5  await addItem({
6    productId: product.id,
7    variantId: selectedVariant.id,
8    quantity,
9  });
10  toast.success('Added to cart!');
11};