Product Variants
Product Variants are a pretty common feature amoung e-commerce stores today, especially for stores that sell physical products, like t-shirts.
How it works
For standard products, you would have a Price
field in your Product entries. However, to use variants, you need to remove the Price
field and switch it for a Product Variants
field. Make sure the handle of the field is product_variants
or Simple Commerce won't pick it up.
Note!
Don't pick the 'Product Variant' (singular) fieldtype. It's used on Orders to relate back to a particular variant.
Templating
You can loop over variants just like you would with any grid of data in Antlers.
1{{ product_variants:options }}2 {{ variant }} - {{ price }}3{{ /product_variants:options }}
Adding to cart
To add a variant option to the cart you can use the same workflow you would with normal products. Although, now - you need to also provide the 'key' of the variant option the user wants to add.
1{{ sc:cart:addItem }} 2 <input type="hidden" name="product" value="{{ id }}"> 3 4 <select name="variant"> 5 <option disabled>Variant</option> 6 {{ product_variants:options }} 7 <option value="{{ key }}">{{ variant }} {{ price }}</option> 8 {{ /product_variants:options }} 9 </select>10 11 <select name="quantity">12 <option disabled>Quantity</option>13 14 {{ loop from="1" to="5" }}15 <option value="{{ value }}">{{ value }}x</option>16 {{ /loop }}17 </select>18 19 <button type="submit">Add to cart</button>20{{ /sc:cart:addItem }}