Abhängige Varianten als Auswahllisten darstellen

20171215 Abhaengige Varianten Ohne Preise

Auf der Produkteinzelansicht geben Sie abhängige Varianten über die Tags PR-DepVariationList1 bis PR-DepVariationList200 und PR-DepVariationName1 bis PR-DepVariationName200 aus. Diese Darstellung kennt keine Mengenbegrenzung und eignet sich damit auch für Produkte mit vielen Varianten. Alle Tags müssen innerhalb eines <form>-Elements stehen. Der Grund liegt im Ablauf: Wählt der Kunde einen Wert, wird dieser abgeschickt, damit WEBSALE V8s daraus die nächste abhängige Variante bestimmt. Ohne umgebendes Formular käme die Auswahl nie beim Shop an. Für den Aufbau der Listen selbst gibt es zwei Wege.

Weg	Tag	Sinnvoll, wenn
fertige Auswahlliste	`PR-DepVariationList`	die Gestaltung über die Styles für Produkte ausreicht
selbst aufgebaute Auswahlliste	`PR-DepVariationOption`	Sie eigenes Markup brauchen oder zusätzliche Produktdaten anzeigen möchten

Fertige Auswahlliste verwenden

Der kürzeste Weg. Je Variante geben Sie den Namen und die fertige Auswahlliste aus, umschlossen von der gleichnamigen Klammerung. Diese sorgt dafür, dass nur die Varianten erscheinen, die es bei diesem Produkt tatsächlich gibt.

<form action="~FORM-Product~" method="post">
  {PR-DepVariationName1}
    ~PR-DepVariationName1~
    ~PR-DepVariationList1~
  {/PR-DepVariationName1}

  {PR-DepVariationName2}
    ~PR-DepVariationName2~
    ~PR-DepVariationList2~
  {/PR-DepVariationName2}
  ...
</form>

Das Aussehen bestimmen Sie anschließend über die Styles für Produkte. Referenz: Styles für Produkte

Auswahlliste selbst aufbauen

Reicht die fertige Liste nicht, bauen Sie das select-Element selbst und füllen es mit PR-DepVariationOption1 bis PR-DepVariationOption200. Damit haben Sie die volle Kontrolle über Markup und CSS.

<form action="~FORM-Product~" method="post">
  {PR-DepVariationName1}
    <select class="select_dep_variations" onchange="SubmitSelection();" size="1" name="~PR-DepVariationOptionInput1~">
      {@PR-DepVariationOption1}
        <option value="~PR-DepVariationOption1~" {PR-DepVariationOptionSelected1}selected{/PR-DepVariationOptionSelected1}>~PR-DepVariationOption1~</option>
      {/@PR-DepVariationOption1}
    </select>
  {/PR-DepVariationName1}
</form>

Drei Bestandteile tragen den Aufbau. Die Schleife @PR-DepVariationOption1 läuft über alle Werte dieser Variante. Die Klammerung PR-DepVariationOptionSelected1 setzt das Attribut selected an genau dem Wert, den der Kunde zuvor gewählt hat, damit die Liste nach dem Absenden nicht zurückspringt. Der Feldname stammt aus PR-DepVariationOptionInput1, darüber ordnet der Shop den abgeschickten Wert der richtigen Variante zu. Das onchange löst das Absenden aus, sobald der Kunde etwas auswählt. Der Kunde braucht so keinen zusätzlichen Knopf zu drücken.

Produktdaten in der Auswahlliste anzeigen

Soll in der Auswahlliste schon der Preis der jeweiligen Variante stehen, brauchen Sie den selbst gebauten Weg. Das Tag PR-LoadDepVariationOptionProduct lädt dafür die Produktdaten des jeweiligen Eintrags, so als hätte der Kunde diese Option bereits gewählt. Innerhalb der Klammerung stehen Ihnen damit beliebige Produktdatenfelder zur Verfügung.

{PR-DepVariationName1}
    <select class="select_dep_variations" onchange="SubmitSelection();" size="1" name="~PR-DepVariationOptionInput1~">
      {@PR-DepVariationOption1}
        <option value="~PR-DepVariationOption1~" {PR-DepVariationOptionSelected1}selected{/PR-DepVariationOptionSelected1}>~PR-DepVariationOption1~
        {PR-LoadDepVariationOptionProduct} ~PR-Price~{/PR-LoadDepVariationOptionProduct}</option>
      {/@PR-DepVariationOption1}
    </select>
{/PR-DepVariationName1}

Im Beispiel steht hinter jedem Variantenwert dessen Preis. Genauso lassen sich Produktnummer, Lagerinformationen oder eigene Produktdatenfelder einblenden.

Referenzen

Referenz: PR-DepVariationList1…200
Referenz: PR-DepVariationName1…200
Referenz: PR-DepVariationOption1…200
Referenz: PR-LoadDepVariationOptionProduct
Referenz: BT-DepVariation_OK
Referenz: ST-DepVar_OK
Referenz: PR-DepVarQuantity

Wegweiser

Abhängige Varianten als Auswahllisten darstellen

Fertige Auswahlliste verwenden

Auswahlliste selbst aufbauen

Produktdaten in der Auswahlliste anzeigen

Referenzen

Verwandte Themen

​Fertige Auswahlliste verwenden

​Auswahlliste selbst aufbauen

​Produktdaten in der Auswahlliste anzeigen

​Referenzen

​Verwandte Themen

Fertige Auswahlliste verwenden

Auswahlliste selbst aufbauen

Produktdaten in der Auswahlliste anzeigen

Referenzen

Verwandte Themen