Abhängige Varianten als Links darstellen

Statt über Auswahllisten kann der Käufer die abhängigen Varianten auch über Links wählen. Alle Werte sind dann gleichzeitig sichtbar und ein Klick genügt. Voraussetzung ist eine überschaubare Menge, maximal 50 abhängige Varianten. Eingebaut wird die Anzeige auf dem Einzelprodukt-Template. Sie besteht aus zwei Teilen, die beide nötig sind: den Links selbst und den versteckten Eingabefeldern im Produktformular.

Variantenwerte als Links ausgeben

Legen Sie je abhängiger Variante eine Schleife an, die deren Werte samt Link ausgibt. Die umgebende Klammerung PR-DepVariationName1 sorgt dafür, dass der Block nur erscheint, wenn es diese Variante beim aktuellen Produkt gibt. Innerhalb der Schleife hebt PR-DepVariationOptionSelected1 den bereits gewählten Wert hervor. Ohne diese Markierung sähe der Käufer nicht, wo er gerade steht.

{PR-DepVariationName1}
   ~PR-DepVariationName1~:
      {@PR-DepVariationOption1}
         <a href="~PR-DepVariationOptionLink1~" {PR-DepVariationOptionSelected1}class="variante_gewaehlt"{/PR-DepVariationOptionSelected1}>
               ~PR-DepVariationOption1~
         </a>
      {/@PR-DepVariationOption1}
{/PR-DepVariationName1}

{PR-DepVariationName2}
   ~PR-DepVariationName2~:
      {@PR-DepVariationOption2}
         <a href="~PR-DepVariationOptionLink2~" {PR-DepVariationOptionSelected2}class="variante_gewaehlt"{/PR-DepVariationOptionSelected2}>
               ~PR-DepVariationOption2~
         </a>
      {/@PR-DepVariationOption2}
{/PR-DepVariationName2}

Für jede weitere abhängige Variante wiederholen Sie den Block mit der nächsthöheren Nummer. Möglich sind bis zu 200. Die Hervorhebung des gewählten Werts erfolgt im Beispiel über eine CSS-Klasse. Das ist einem direkt gesetzten style-Attribut vorzuziehen, weil Sie das Aussehen so an einer Stelle im Stylesheet pflegen statt in jedem Variantenblock.

Versteckte Eingabefelder im Produktformular

Platzieren Sie innerhalb des Produktformulars zusätzlich das Tag PR-PrintHiddenDepVariations.

<form action="~FORM-Product~" ...>
   ...
   ~PR-PrintHiddenDepVariations~
   ...
</form>

Dieser Schritt ist nicht optional. Bei der Auswahl über Links steht die gewählte Variante nur in der URL, nicht im Formular. Ohne die versteckten Eingabefelder wüsste der Shop beim Absenden nicht, welche Variante gemeint ist, und ein per Link gewähltes Produkt ließe sich weder in den Warenkorb noch auf die Merkliste oder in den Produktvergleich legen.

Tag	Bedeutung
`PR-DepVariationName1…200`	Name der Variante, beispielsweise “Farbe” oder “Größe”. Als Klammerung verwendet, blendet sie den Block aus, wenn es die Variante nicht gibt
`PR-DepVariationOption1…200`	Schleife über die Variantenwerte, gibt zugleich den Wert aus
`PR-DepVariationOptionLink1…200`	Link zur Auswahl dieses Variantenwerts
`PR-DepVariationOptionSelected1…200`	Zeigt an, ob dieser Variantenwert gewählt ist
`PR-PrintHiddenDepVariations`	Gibt die benötigten versteckten Eingabefelder aus
`PR-DepVarQuantity`	Wird gebraucht, wenn der Käufer die Menge bereits über die Varianten wählen soll

Wegweiser

Abhängige Varianten als Links darstellen

Variantenwerte als Links ausgeben

Versteckte Eingabefelder im Produktformular

Tags

Verwandte Themen

​Variantenwerte als Links ausgeben

​Versteckte Eingabefelder im Produktformular

​Tags

​Verwandte Themen

Variantenwerte als Links ausgeben

Versteckte Eingabefelder im Produktformular

Tags

Verwandte Themen