Display dependent variants as links - WEBSALE Dokumentation

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.

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

<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

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

​Output variant values as links

​Hidden input fields in the product form

​Tags

​Related topics

Output variant values as links

Hidden input fields in the product form

Tags

Related topics