> ## 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 Auswahllisten darstellen

> Wie Sie abhängige Varianten in WEBSALE V8s als Drop-down-Listen ausgeben, entweder fertig über PR-DepVariationList oder selbst aufgebaut über PR-DepVariationOption.

![20171215 Abhaengige Varianten Ohne Preise](https://mintcdn.com/websaleag-44ee7ea6/Dgb_SNFMeC9HkKBV/images/20171215_abhaengige-varianten-ohne-preise.png?fit=max\&auto=format\&n=Dgb_SNFMeC9HkKBV\&q=85\&s=399f6a8a6fa75d78a3dffe693c552adf)

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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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](https://dokumentation.websale.de/v8s/referenz/styles/katalog-und-produkte.md)

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

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

![20171211 Abh Varianten Preis](https://mintcdn.com/websaleag-44ee7ea6/Dgb_SNFMeC9HkKBV/images/20171211_abh-varianten-preis.png?fit=max\&auto=format\&n=Dgb_SNFMeC9HkKBV\&q=85\&s=8c30c3e75c234366b056760c7075574b)

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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md)
* Referenz: [PR-DepVariationName1…200](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md)
* Referenz: [PR-DepVariationOption1…200](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md)
* Referenz: [PR-LoadDepVariationOptionProduct](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md)
* Referenz: [BT-DepVariation\_OK](https://dokumentation.websale.de/v8s/referenz/tags/bt/produkt-und-warenkorb.md#bt-depvariationok)
* Referenz: [ST-DepVar\_OK](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md)
* Referenz: [PR-DepVarQuantity](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md)

## Verwandte Themen

* Wegweiser: [Varianten anzeigen](https://dokumentation.websale.de/v8s/referenz/tags/offer-kundenspezifische-angebote.md#varianten-anzeigen)
* Wegweiser: [Abhängige Varianten per AJAX nachladen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-per-ajax-nachladen.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 als Tabelle anzeigen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-tabelle-darstellen.md)


## Related topics

- [Abhängige Varianten als Tabelle darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-tabelle-darstellen.md)
- [Abhängige Varianten als Links darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-links-darstellen.md)
- [Abhängige Varianten als grafische Ansicht anzeigen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-grafische-ansicht-anzeigen.md)
- [Abhängige Varianten per AJAX nachladen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-per-ajax-nachladen.md)
- [Abhängige Varianten anzeigen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-anzeigen.md)


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