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

# Abhängige Varianten als grafische Ansicht anzeigen

> Wie Sie abhängige Varianten in WEBSALE V8s als Bildkacheln darstellen und mit den DesignControl-Tags DC-FP1 bis DC-FP3 doppelte Produktbilder vermeiden.

In der grafischen Variantenansicht erscheint jede Varianten-Kombination als anklickbare Kachel mit Produktbild. Das ist die anschaulichste der Darstellungen, hat aber einen Haken: Bei zwei abhängigen Varianten wie Farbe und Größe zeigt jede Kombination dasselbe Bild erneut. Ein schwarzes Shirt in vier Größen führt zu vier identischen Bildern nebeneinander.

Zusammenfassen lässt sich das mit den DesignControl-Tags `DC-FP1` bis `DC-FP3`, den freien Parametern. Das Prinzip ist immer dasselbe: In der Schleife merken Sie sich den zuletzt ausgegebenen Wert einer Variante und vergleichen ihn beim nächsten Durchlauf mit dem aktuellen. Nur wenn beide sich unterscheiden, hat die Variante gewechselt, und nur dann geben Sie das Bild aus.

Dafür brauchen Sie drei Formen desselben Tags:

| Schreibweise | Wirkung |
| - | - |
| `~DC-FP1_reset~` | setzt den Parameter zurück, nötig, falls er auf dem Template schon verwendet wurde |
| `~DC-FP1_set($Wert$)~` | speichert einen Wert |
| `{DC-FP1($Wert$)}` | Klammerung, trifft zu, wenn der gespeicherte Wert dem angegebenen entspricht |

## Ausgangspunkt

Alle folgenden Beispiele bauen auf derselben Schleife auf. Sie gibt jede Varianten-Kombination als Kachel aus, ohne jede Zusammenfassung.

```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}
```

Genau hier entsteht die unerwünschte Wiederholung der Produktabbildung.

![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)

## Beispiel 1: gleiche erste Variante zusammenfassen

Ziel: Produkte, deren erste abhängige Variante denselben Wert hat, zeigen ihr Bild nur einmal. Bei Farbe und Größe erscheint also je Farbe ein Bild, daneben die Größen.

Der freie Parameter 1 speichert dafür den Wert der ersten Variante. Vor der Schleife wird er zurückgesetzt. Im Durchlauf prüft die negierte Klammerung, ob der gespeicherte Wert vom aktuellen abweicht. Trifft das zu, hat die Farbe gewechselt, das Bild wird ausgegeben und der neue Wert gespeichert.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-SeparateDepVariations}

   {CAT-AdvData($DepVariations,99)}

      <!-- Freien Parameter 1 zurücksetzen, falls er auf diesem Template schon verwendet wurde -->
      ~DC-FP1_reset~

      {@PR-Data}
         <!-- Bild nur ausgeben, wenn die erste abhängige Variante vom gespeicherten Wert abweicht -->
         {!DC-FP1($PR-DepVariationValue1$)}
            <div class="clear"></div>
            <div style="float: left">
               <!-- Zuletzt ausgegebenen Wert der ersten abhängigen Variante speichern -->
               ~DC-FP1_set($PR-DepVariationValue1$)~
               <img src="~PR-ThumbNail~">
            </div>
         {/!DC-FP1($PR-DepVariationValue1$)}

         <!-- Größe und Verfügbarkeit erscheinen bei jedem Durchlauf -->
         <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}
```

Das funktioniert nur, weil die Kombinationen nach der ersten Variante sortiert geliefert werden. Alle schwarzen Kombinationen liegen also beieinander, danach alle weißen. Der Vergleich mit dem Vorgänger genügt deshalb, ein Merken aller bisherigen Werte ist nicht nötig.

## Beispiel 2: zweite Variante abhängig von der Auswahl

Ziel: Oben stehen die Farben als Bildkacheln, darunter nur die Größen der Farbe, die der Käufer gewählt hat. Statt aller sechzehn Kombinationen sieht er vier Farben und vier Größen.

Dafür läuft die Schleife zweimal, jedes Mal in einem eigenen `CAT-AdvData`-Block. Der erste Durchlauf zeigt die Farbkacheln, der zweite die Größen der gewählten Farbe.

Der Schlüssel liegt in der ersten Zeile. `~DC-FP2_set($PR-DepVariationValue1$)~` steht **vor** dem ersten `CAT-AdvData`, also außerhalb der Liste. Dort bezieht sich `PR-DepVariationValue1` noch auf das vom Käufer gewählte Produkt. Damit steht im freien Parameter 2 die gewählte Farbe, und beide Durchläufe können dagegen prüfen.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-SeparateDepVariations}

   <!-- Vor der Schleife: gewählte erste Variante des Käufers im freien Parameter 2 merken -->
   ~DC-FP2_set($PR-DepVariationValue1$)~

   <!-- Erster Durchlauf: die erste abhängige Variante als Kacheln -->
   {CAT-AdvData($DepVariations,99)}

      ~DC-FP1_reset~

      {@PR-Data}

         <!-- Nur ausgeben, wenn die erste abhängige Variante wechselt -->
         {!DC-FP1($PR-DepVariationValue1$)}

            <!-- Rahmenfarbe zeigt, ob dies die vom Käufer gewählte Variante ist -->
            {!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)}

   <!-- Zweiter Durchlauf: nur die Kombinationen der gewählten ersten Variante -->
   {CAT-AdvData($DepVariations,99)}

      {@PR-Data}

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

            <!-- Rahmenfarbe zeigt, ob genau diese Kombination gewählt ist.
                 Setzt voraus, dass das Produkt genau zwei abhängige Varianten hat -->
            {PR-DepVariationSelected}<div style="border-color: red;">{/PR-DepVariationSelected}
            {!PR-DepVariationSelected}<div style="border-color: black;">{/!PR-DepVariationSelected}

            <!-- Ausverkaufte Kombinationen ausgegraut und ohne 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}
```

### Was in welchem Durchlauf erscheint

Die folgende Tabelle zeigt einen Käufer, der die Kombination "Weiß, Größe L" gewählt hat. Der erste Durchlauf gibt je Farbe eine Kachel aus, der zweite nur die weißen Kombinationen.

| Position | Varianten-Kombination | 1. Durchlauf | 2. Durchlauf |
| - | - | - | - |
| 1 | Schwarz, S | ja, nicht ausgewählt | nein |
| 2 | Schwarz, M | nein | nein |
| 3 | Schwarz, L | nein | nein |
| 4 | Schwarz, XL | nein | nein |
| 5 | Weiß, S | ja, ausgewählt | ja, nicht ausgewählt |
| 6 | Weiß, M | nein | ja, nicht ausgewählt |
| 7 | Weiß, L | nein | ja, ausgewählt |
| 8 | Weiß, XL | nein | ja, nicht ausgewählt |
| 9 | Rot, S | ja, nicht ausgewählt | nein |
| 10 | Rot, M | nein | nein |
| 11 | Rot, L | nein | nein |
| 12 | Rot, XL | nein | nein |
| 13 | Blau, S | ja, nicht ausgewählt | nein |
| 14 | Blau, M | nein | nein |
| 15 | Blau, L | nein | nein |
| 16 | Blau, XL | nein | nein |

An Position 5 wird die Kachel im ersten Durchlauf ausgegeben und zugleich als gewählt hervorgehoben, weil der Käufer eine weiße Variante gewählt hat. Im zweiten Durchlauf erscheinen alle vier weißen Größen, hervorgehoben davon nur Größe L.

## Tags

Referenz: [DC-FPX](https://dokumentation.websale.de/v8s/referenz/tags/dc/parameter.md#die-tags-im-uberblick)

## Verwandte Themen

* Wegweiser: [Abhängige Varianten als Tabelle darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-tabelle-darstellen.md)
* Wegweiser: [Abhängige Varianten als Auswahllisten darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-auswahllisten.md)
* Wegweiser: [Abhängige Varianten als Links darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-links-darstellen.md)
* Wegweiser: [Abhängige Varianten per AJAX nachladen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-per-ajax-nachladen.md)


## Related topics

- [Abhängige Varianten anzeigen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-anzeigen.md)
- [Abhängige Varianten als Auswahllisten darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-auswahllisten.md)
- [Abhängige Varianten als Links darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-links-darstellen.md)
- [Abhängige Varianten als Tabelle darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-tabelle-darstellen.md)
- [Normale Varianten anzeigen](https://dokumentation.websale.de/v8s/produkte/normale-varianten-anzeigen.md)


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