Display dependent variants as a table

With the table display, the customer sees all variant combinations of a product at a glance instead of selecting them one after another. This is suitable for products with few combinations and lets the customer add several variants to the shopping cart at the same time. Two dependent variants “color” and “size” with ten combinations, for example, result in this table:

Product number	Color	Size	Price
1001	red	S	10.00 EUR
1002	red	M	11.00 EUR
1003	red	L	12.00 EUR
1004	red	XL	12.00 EUR
1005	blue	S	15.00 EUR
1006	blue	M	15.00 EUR
1007	blue	XXL	19.00 EUR
1008	yellow	S	5.00 EUR
1009	yellow	M	5.00 EUR
1010	yellow	L	5.00 EUR

When a table fits

Technically, WEBSALE V8s supports up to 100 variant combinations in the table. This value is an upper limit of the system, not a guideline. A table with 100 rows suffers equally in clarity, usability, page design, and load time. Products can have several hundred or even several thousand combinations. For those, only the display via select lists makes sense, because only part of the variants appears at any one time. For that reason, do not decide across the board, but on a per-product basis. In the template, you set a maximum value for variant combinations. We recommend 25:

A product with no more than 25 combinations appears as a table.
A product with more than 25 combinations appears as a select list.

Which product data belongs in the table

Any product data can be displayed. Alongside the variants themselves, that is, color and size, we recommend:

the product number
the product image, if it depends on the variants
the price, if it depends on the variants
stock or availability, if present
an input field for the quantity

One or several quantity fields

For quantity input, there are two designs, and the choice determines how much the customer can order in one go. One quantity field per row. As in the table above. This lets the customer add several variants to the shopping cart at once, for example two red ones in size M and one blue one in XXL. A single quantity field for the entire table. In that case, the customer must first select a variant, which is why the rows are linked. If, for example, the customer clicks on product number 1007, its data appears in a “Your selection” block and can be added to the shopping cart from there. To check in the template whether a product number has already been chosen, use ST-DepVar_OK.

Integration

The table is built into the single-product template.

Set the maximum value in the template

In the WS-Config section, you specify up to which number of combinations the table is used.

{WS-Config}
...
MAXSeparatedDepVariations = 25
{/WS-Config}

Reference: WS-Config

Build the table

The bracket PR-SeparateDepVariations decides on the display. In the positive branch you build the table, in the negative branch the select lists or links. Both branches belong in the template, otherwise products beyond the maximum value are left without variant selection. Inside the table, the bracket of the variant names takes on a second task: it generates the columns dynamically. If a product has only the variant “color”, only this column appears. If it has color, size, and type, three appear. The same template thus serves all products.

{PR-SeparateDepVariations}
{CAT-AdvData($DepVariations,99)}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Product number</td>
{PR-DepVariationName1}<td>~PR-DepVariationName1~</td>{/PR-DepVariationName1}
{PR-DepVariationName2}<td>~PR-DepVariationName2~</td>{/PR-DepVariationName2}
{PR-DepVariationName3}<td>~PR-DepVariationName3~</td>{/PR-DepVariationName3}
<td>Price</td>
<td>Quantity</td>
</tr>

{@PR-Data}
<tr>
<td>~PR-Number~</td>
{PR-DepVariationName1}<td>~PR-DepVariationValue1~</td>{/PR-DepVariationName1}
{PR-DepVariationName2}<td>~PR-DepVariationValue2~</td>{/PR-DepVariationName2}
{PR-DepVariationName3}<td>~PR-DepVariationValue3~</td>{/PR-DepVariationName3}
<td>~PR-Price~ ~WS-Currency~</td>
<td><input type="text" size="6" name="~PR-Quantity_Input~" value=""></td>
</tr>
{/@PR-Data}
</table>
{/CAT-AdvData($DepVariations,99)}
{/PR-SeparateDepVariations}

{!PR-SeparateDepVariations}
   ...
   The select lists are displayed here.
   ...
{/!PR-SeparateDepVariations}

Note the order of the brackets. CAT-AdvData($DepVariations,99) initializes the list of combinations, and only then does the @PR-Data loop deliver one combination per iteration.

Tag	Meaning
`PR-SeparateDepVariations`	The section appears when the variants are displayed as a table. In the negative branch, the select lists or links appear
`CAT-AdvData()`	Initializes the list of variant combinations
`PR-Data`	Loop over the combinations, outputs the product data
`PR-DepVariationName1…100`	Name of the variant, for example “color” or “size”. As a bracket, it generates the table columns dynamically
`PR-DepVariationValue1…100`	Value of the variant, for example “red” or “XXL”
`PR-DepVarLink`	Link to a single variant, used as `<a href="~PR-DepVarLink~">`
`PR-DepVariationSelected`	Indicates whether this variant has been chosen, for example via its link
`PR-Quantity_Input`	Field name for the quantity input field
`PR-SelectedDepVariations`	Outputs all variant values of the chosen variant. WEBSALE V8s automatically generates a two-column table from this
`ST-DepVar_OK`	The section appears when a variant link has been clicked

Styles

Reference: Styles for products

Guide: Display variants
Guide: Display dependent variants as select lists
Guide: Display dependent variants as links
Guide: Reload dependent variants via AJAX

​When a table fits

​Which product data belongs in the table

​One or several quantity fields

​Integration

​Set the maximum value in the template

​Build the table

​Tags

​Styles

​Related topics