Display dependent variants as a graphical view

In the graphical variant view, each variant combination appears as a clickable tile with a product image. This is the most vivid of the displays, but has a catch: with two dependent variants like color and size, each combination shows the same image again. A black shirt in four sizes leads to four identical images next to each other. You can consolidate this with the DesignControl tags DC-FP1 through DC-FP3, the free parameters. The principle is always the same: in the loop, you remember the last output value of a variant and compare it in the next iteration with the current one. Only if the two differ has the variant changed, and only then do you output the image. For this, you need three forms of the same tag:

Notation	Effect
`~DC-FP1_reset~`	resets the parameter, needed if it has already been used on the template
`~DC-FP1_set($value$)~`	stores a value
`{DC-FP1($value$)}`	bracket, applies when the stored value matches the given one

Starting point

All the following examples build on the same loop. It outputs each variant combination as a tile, without any consolidation.

{PR-SeparateDepVariations}

   {CAT-AdvData($DepVariations,99)}

      {@PR-Data}
         <div style="...">
            <img src="~PR-ThumbNail~"><br>
            <a href="~PR-DepVarLink~">~PR-DepVariationValue2~</a><br>
            <img src="~PR-InventoryImage~"><br>
            ~PR-Price~ ~WS-CurrencySymbol~<br>
         </div>
      {/@PR-Data}

   {/CAT-AdvData($DepVariations,99)}

{/PR-SeparateDepVariations}

This is exactly where the unwanted repetition of the product image comes from.

Example 1: consolidate the same first variant

Goal: products whose first dependent variant has the same value show their image only once. With color and size, one image per color therefore appears, and the sizes next to it. Free parameter 1 stores the value of the first variant for this. Before the loop it is reset. Within the iteration, the negated bracket checks whether the stored value differs from the current one. If that is the case, the color has changed, the image is output, and the new value is stored.

{PR-SeparateDepVariations}

   {CAT-AdvData($DepVariations,99)}

      <!-- Reset free parameter 1 in case it has already been used on this template -->
      ~DC-FP1_reset~

      {@PR-Data}
         <!-- Only output the image if the first dependent variant differs from the stored value -->
         {!DC-FP1($PR-DepVariationValue1$)}
            <div class="clear"></div>
            <div style="float: left">
               <!-- Store the most recently output value of the first dependent variant -->
               ~DC-FP1_set($PR-DepVariationValue1$)~
               <img src="~PR-ThumbNail~">
            </div>
         {/!DC-FP1($PR-DepVariationValue1$)}

         <!-- Size and availability appear on every iteration -->
         <div style="float: left; ...">
            <a href="~PR-DepVarLink~">~PR-DepVariationValue2~</a><br>
            <img src="~PR-InventoryImage~"><br>
         </div>
      {/@PR-Data}

   {/CAT-AdvData($DepVariations,99)}
{/PR-SeparateDepVariations}

This only works because the combinations are delivered sorted by the first variant. All black combinations are therefore next to each other, then all white ones. Comparing with the predecessor is therefore enough, and remembering all previous values is not necessary.

Example 2: second variant depending on the selection

Goal: at the top, the colors appear as image tiles; below them, only the sizes of the color the customer has chosen. Instead of all sixteen combinations, the customer sees four colors and four sizes. For this, the loop runs twice, each time in its own CAT-AdvData block. The first pass shows the color tiles, the second the sizes of the chosen color. The key lies in the first line. ~DC-FP2_set($PR-DepVariationValue1$)~ stands before the first CAT-AdvData, that is, outside the list. There, PR-DepVariationValue1 still refers to the product chosen by the customer. As a result, the chosen color is stored in free parameter 2, and both passes can check against it.

{PR-SeparateDepVariations}

   <!-- Before the loop: remember the customer's chosen first variant in free parameter 2 -->
   ~DC-FP2_set($PR-DepVariationValue1$)~

   <!-- First pass: the first dependent variant as tiles -->
   {CAT-AdvData($DepVariations,99)}

      ~DC-FP1_reset~

      {@PR-Data}

         <!-- Only output when the first dependent variant changes -->
         {!DC-FP1($PR-DepVariationValue1$)}

            <!-- The border color indicates whether this is the variant chosen by the customer -->
            {!DC-FP2($PR-DepVariationValue1$)}
               <div style="border-color: black;">
            {/!DC-FP2($PR-DepVariationValue1$)}
            {DC-FP2($PR-DepVariationValue1$)}
               <div style="border-color: red;">
            {/DC-FP2($PR-DepVariationValue1$)}

            ~DC-FP1_set($PR-DepVariationValue1$)~
            <a href="~PR-DepVarLink~"><img src="~PR-ThumbNail~"></a>
            </div>

         {/!DC-FP1($PR-DepVariationValue1$)}

      {/@PR-Data}

      <div class="clear"></div>

   {/CAT-AdvData($DepVariations,99)}

   <!-- Second pass: only the combinations of the chosen first variant -->
   {CAT-AdvData($DepVariations,99)}

      {@PR-Data}

         {DC-FP2($PR-DepVariationValue1$)}

            <!-- The border color indicates whether this specific combination is chosen.
                 Assumes that the product has exactly two dependent variants -->
            {PR-DepVariationSelected}<div style="border-color: red;">{/PR-DepVariationSelected}
            {!PR-DepVariationSelected}<div style="border-color: black;">{/!PR-DepVariationSelected}

            <!-- Sold-out combinations are greyed out and without a link -->
            {PR-Inventory}
               {PR-InventoryState(red)}
                  <font style="color: gray">~PR-DepVariationValue2~</font>
               {/PR-InventoryState(red)}
               {!PR-InventoryState(red)}
                  <a href="~PR-DepVarLink~">~PR-DepVariationValue2~</a>
               {/!PR-InventoryState(red)}
            {/PR-Inventory}

            </div>

         {/DC-FP2($PR-DepVariationValue1$)}

      {/@PR-Data}

      <div class="clear"></div>

   {/CAT-AdvData($DepVariations,99)}

{/PR-SeparateDepVariations}

What appears in which pass

The following table shows a customer who has chosen the combination “white, size L”. The first pass outputs one tile per color, the second pass only the white combinations.

Position	Variant combination	1st pass	2nd pass
1	Black, S	yes, not selected	no
2	Black, M	no	no
3	Black, L	no	no
4	Black, XL	no	no
5	White, S	yes, selected	yes, not selected
6	White, M	no	yes, not selected
7	White, L	no	yes, selected
8	White, XL	no	yes, not selected
9	Red, S	yes, not selected	no
10	Red, M	no	no
11	Red, L	no	no
12	Red, XL	no	no
13	Blue, S	yes, not selected	no
14	Blue, M	no	no
15	Blue, L	no	no
16	Blue, XL	no	no

At position 5, the tile is output in the first pass and at the same time highlighted as selected, because the customer has chosen a white variant. In the second pass, all four white sizes appear, and only size L is highlighted among them.

Guide

Display dependent variants as a graphical view

Starting point

Example 1: consolidate the same first variant

Example 2: second variant depending on the selection

What appears in which pass

Tags

​Starting point

​Example 1: consolidate the same first variant

​Example 2: second variant depending on the selection

​What appears in which pass

​Tags

​Related topics

Starting point

Example 1: consolidate the same first variant

Example 2: second variant depending on the selection

What appears in which pass

Tags

Related topics