> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Display dependent variants as a graphical view

> How to display dependent variants in WEBSALE V8s as image tiles and avoid duplicate product images with the DesignControl tags DC-FP1 through DC-FP3.

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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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.

![Dcfpx 1 1](https://mintcdn.com/websaleag-44ee7ea6/Dgb_SNFMeC9HkKBV/images/dcfpx_1_1.jpg?fit=max\&auto=format\&n=Dgb_SNFMeC9HkKBV\&q=85\&s=3345e541ace607cfb5427b41c38b4812)

## 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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.

## Tags

Reference: DC-FPX&#x20;

## Related topics

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


## Related topics

- [Display dependent variants](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-anzeigen.md)
- [Display dependent variants as a table](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-als-tabelle-darstellen.md)
- [Display dependent variants as links](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-als-links-darstellen.md)
- [Display dependent variants as select lists](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-als-auswahllisten.md)
- [Display a product with a specific variant combination](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/produkt-mit-bestimmter-variantenkombination-anzeigen.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.