Description
The merch store displays available product sizes (such as S, M, L, XL, XXL) on each product card, but these are currently rendered as static badges rather than selectable options. Because of this, users cannot choose a size or color before adding an item to the cart.
Additionally, the cart logic identifies items using only the product ID. This means that if variant selection is introduced later, different variants of the same product (for example, Size M and Size L) would be treated as the same cart item, causing their quantities to merge instead of appearing as separate line items.
The cart UI also has no way to display which size or color was selected.
Evidence
-
**src/components/merch/ProductCard.tsx **
- Size options are rendered as plain
<span className="variant-option"> elements.
- No click handlers or form inputs are present, so users cannot select a variant.
-
src/components/merch/ProductCard.css
.variant-option has no interactive styling such as cursor: pointer, hover, focus, or selected states.
-
src/pages/merch/index.tsx
addToCart() and updateQuantity() compare items using only product.id.- Different variants of the same product would therefore collide into a single cart entry.
-
src/components/merch/ShoppingCart.tsx
- The cart does not render any variant information (size, color, etc.), making it impossible to identify which option was selected.
Suggested Fix
- Add local state in
ProductCard to track the selected size and/or color.
- Replace the static variant badges with interactive controls (buttons or radio-style selection).
- Pass the selected variant through the
onAddToCart callback.
- Extend the cart item model to store the selected variant.
- Use a composite identifier (for example,
${product.id}-${selectedSize}-${selectedColor}) instead of only product.id when comparing cart items.
- Update
ShoppingCart.tsx to display the selected size/color for each cart item.
Impact
At the moment, customers cannot choose a specific product variant before adding an item to the cart. Even if variant selection is added later, the current cart implementation would merge different variants of the same product into a single entry, resulting in incorrect cart behavior.
Contribution Request
I'd like to work on this issue under GSSoC.
This change spans the product card, cart state management, and cart UI, so I'd first like to confirm the intended UX (for example, radio-style buttons vs. dropdowns for variant selection) before implementing the fix. Once confirmed, I'd be happy to work on a complete solution.
Description
The merch store displays available product sizes (such as S, M, L, XL, XXL) on each product card, but these are currently rendered as static badges rather than selectable options. Because of this, users cannot choose a size or color before adding an item to the cart.
Additionally, the cart logic identifies items using only the product ID. This means that if variant selection is introduced later, different variants of the same product (for example, Size M and Size L) would be treated as the same cart item, causing their quantities to merge instead of appearing as separate line items.
The cart UI also has no way to display which size or color was selected.
Evidence
**
src/components/merch/ProductCard.tsx**<span className="variant-option">elements.src/components/merch/ProductCard.css.variant-optionhas no interactive styling such ascursor: pointer, hover, focus, or selected states.src/pages/merch/index.tsxaddToCart()andupdateQuantity()compare items using onlyproduct.id.src/components/merch/ShoppingCart.tsxSuggested Fix
ProductCardto track the selected size and/or color.onAddToCartcallback.${product.id}-${selectedSize}-${selectedColor}) instead of onlyproduct.idwhen comparing cart items.ShoppingCart.tsxto display the selected size/color for each cart item.Impact
At the moment, customers cannot choose a specific product variant before adding an item to the cart. Even if variant selection is added later, the current cart implementation would merge different variants of the same product into a single entry, resulting in incorrect cart behavior.
Contribution Request
I'd like to work on this issue under GSSoC.
This change spans the product card, cart state management, and cart UI, so I'd first like to confirm the intended UX (for example, radio-style buttons vs. dropdowns for variant selection) before implementing the fix. Once confirmed, I'd be happy to work on a complete solution.