Variants are one of the most complicating factors in the Webnodes E-commerce. Variants are the same product with variations based on for example color or size. Each of the different variants needs to have a stock level and the possibility to have a different price.
For example jewelry, where a large percentage of the price is based on the raw materials, the price must be able to vary according to size.
Variants are solved in Webnodes by creating a node for each variant of the product. The benefit of doing that is that you automatically get stock keeping and pricing for free from the standard functionality in the system. The downside is that is can be confusing that product variants duplicate a lot of information. To make it easier to edit products with variants, and to hide the duplication, sub variants of a product get most of their properties hidden, so you can’t edit most of the duplicated properties. As default, the only properties on ProductBase sub variants that you can edit and see are:
NB! Both GetPropertiesToExcludeInVariantAutoUpdate and GetPropertiesToRenderInSubVariant include properties from GetVariantProperties, so if you override GetVariantProperties, the methods will include your variant properties as well (unless you override them as well).
The product list on the Products tab the shop module filters out sub variants by default, but there is a checkbox there that says “Show product variants” that changes the filter so that all variants of a node is included in the list:
The product listing also has a “Variants” column. It is either “Yes” or “No”. If “Yes”, you can see the number of variants for each product (in parenthesis).
Implementing templates with variants
Implementing a template for variant products is more complicated than a normal product template. The complexity means that we haven’t been able to create something that works out of the box, without limiting the possibilities a lot. So you will have to handle most of the complexity yourself.
The first you have to do is to think of how you want variants to work. The rules for how you want it to work will determine how you approach the implementation. Questions you need to answer:
Do you want customers to select the variant properties one after another (size must be selected before color is activated), or should they be able to start to filter the variants on any of the variant properties (all variant properties are active from the start, and when you select a value for one of the variant properties, the possible values on the other non-selected variant properties are updated).
For example, take shoes. Do you want users to be able to select both color and size from the start, or do you want to force customers to first choose the size, and then Show the sizes available in that color?
The easiest way is to create a dropdown list that contains all the variants of the current product. The dropdown list items can then have names like “Puma Rocker - Size:44 – Color: red”, “Puma Rocker - Size:44 – Color: blue”, “Puma Rocker - Size:43 – Color: red”, “Puma Rocker - Size:42 – Color: red”. It works, but it’s not the most user-friendly presentation. It works best of there is just one or two variant properties and less than 10-15 total variants of each product.