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

# Display dependent variants as links

> How to output dependent variants in WEBSALE V8s as links instead of select lists, and how to add the hidden input fields in the product form.

Instead of using select lists, the customer can also choose dependent variants via links. All values are then visible at the same time and a single click is enough. This requires a manageable quantity, up to a maximum of 50 dependent variants.

The display is built into the single-product template. It consists of two parts, both of which are required: the links themselves and the hidden input fields in the product form.

## Output variant values as links

For each dependent variant, create a loop that outputs its values along with a link. The surrounding bracket `PR-DepVariationName1` ensures the block only appears when this variant exists for the current product.

Within the loop, `PR-DepVariationOptionSelected1` highlights the value that has already been chosen. Without this marker, the customer would not see where they currently are.

```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}
```

For each additional dependent variant, repeat the block with the next higher number. Up to 200 are possible.

In the example, the highlighting of the selected value is done via a CSS class. This is preferable to a `style` attribute set directly, because you maintain the appearance in one place in the stylesheet rather than in every variant block.

## Hidden input fields in the product form

Inside the product form, additionally place the tag `PR-PrintHiddenDepVariations`.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Product~" ...>
   ...
   ~PR-PrintHiddenDepVariations~
   ...
</form>
```

This step is not optional. When selecting via links, the chosen variant is only in the URL, not in the form. Without the hidden input fields, the shop would not know which variant was meant when the form is submitted, and a product selected via a link could not be added to the shopping cart, the wish list, or the product comparison.

## Tags

| Tag | Meaning |
| - | - |
| `PR-DepVariationName1…200` | Name of the variant, for example "color" or "size". Used as a bracket, it hides the block when the variant does not exist |
| `PR-DepVariationOption1…200` | Loop over the variant values, also outputs the value |
| `PR-DepVariationOptionLink1…200` | Link for selecting this variant value |
| `PR-DepVariationOptionSelected1…200` | Indicates whether this variant value is selected |
| `PR-PrintHiddenDepVariations` | Outputs the required hidden input fields |
| `PR-DepVarQuantity` | Needed when the customer should already choose the quantity via the variants |

## Related topics

* Guide: Display variants
* Guide: Reload dependent variants via AJAX
* Guide: Display dependent variants as select lists
* Guide: Display dependent variants as a table


## Related topics

- [Display dependent variants](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-anzeigen.md)
- [Display dependent variants as a table](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-als-tabelle-darstellen.md)
- [Display dependent variants as a graphical view](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-als-grafische-ansicht-anzeigen.md)
- [Display dependent variants as select lists](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-als-auswahllisten.md)
- [Reload dependent variants via AJAX](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-per-ajax-nachladen.md)


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