Abhängige Varianten als grafische Ansicht anzeigen

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.

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

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.

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

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

Wegweiser

Abhängige Varianten als grafische Ansicht anzeigen

Ausgangspunkt

Beispiel 1: gleiche erste Variante zusammenfassen

Beispiel 2: zweite Variante abhängig von der Auswahl

Was in welchem Durchlauf erscheint

Tags

Verwandte Themen

​Ausgangspunkt

​Beispiel 1: gleiche erste Variante zusammenfassen

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

​Was in welchem Durchlauf erscheint

​Tags

​Verwandte Themen

Ausgangspunkt

Beispiel 1: gleiche erste Variante zusammenfassen

Beispiel 2: zweite Variante abhängig von der Auswahl

Was in welchem Durchlauf erscheint

Tags

Verwandte Themen