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

> Wie Sie abhängige Varianten in WEBSALE V8s als Links statt als Auswahllisten ausgeben und die versteckten Eingabefelder im Produktformular ergänzen.

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.

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

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

## Tags

| Tag | Bedeutung |
| - | - |
| [`PR-DepVariationName1…200`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten) | 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`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten) | Schleife über die Variantenwerte, gibt zugleich den Wert aus |
| [`PR-DepVariationOptionLink1…200`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten) | Link zur Auswahl dieses Variantenwerts |
| [`PR-DepVariationOptionSelected1…200`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten) | Zeigt an, ob dieser Variantenwert gewählt ist |
| `PR-PrintHiddenDepVariations` | Gibt die benötigten versteckten Eingabefelder aus |
| [`PR-DepVarQuantity`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten) | Wird gebraucht, wenn der Käufer die Menge bereits über die Varianten wählen soll |

## 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 Auswahllisten darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-auswahllisten.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 Auswahllisten darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-auswahllisten.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 anzeigen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-anzeigen.md)
- [Abhängige Varianten per AJAX nachladen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-per-ajax-nachladen.md)


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