Display dependent variants as select lists

20171215 Abhaengige Varianten Ohne Preise

On the product detail view, you output dependent variants via the tags PR-DepVariationList1 through PR-DepVariationList200 and PR-DepVariationName1 through PR-DepVariationName200. This display has no quantity limit and is therefore also suitable for products with many variants. All tags must be placed inside a <form> element. The reason lies in the workflow: when the customer selects a value, that value is submitted so that WEBSALE V8s can determine the next dependent variant from it. Without a surrounding form, the selection would never reach the shop. There are two ways to build the lists themselves.

Way	Tag	Useful when
ready-made select list	`PR-DepVariationList`	the styling via the styles for products is sufficient
custom-built select list	`PR-DepVariationOption`	you need custom markup or want to display additional product data

Use the ready-made select list

The shortest route. For each variant, you output the name and the ready-made select list, wrapped in the bracket of the same name. This ensures that only the variants actually available for this product appear.

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

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

You then determine the appearance via the styles for products. Reference: Styles for products

Build the select list yourself

If the ready-made list is not enough, you build the select element yourself and fill it with PR-DepVariationOption1 through PR-DepVariationOption200. This gives you full control over markup and 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>

Three components carry the structure. The loop @PR-DepVariationOption1 iterates over all values of this variant. The bracket PR-DepVariationOptionSelected1 sets the selected attribute exactly on the value the customer previously chose so that the list does not jump back after submission. The field name comes from PR-DepVariationOptionInput1, which the shop uses to assign the submitted value to the correct variant. The onchange triggers the submission as soon as the customer selects something. This way, the customer does not need to press an additional button.

Display product data in the select list

If the select list should already show the price of the respective variant, you need the custom-built approach. The tag PR-LoadDepVariationOptionProduct loads the product data for the respective entry, as if the customer had already chosen this option. Within the bracket, any product data fields are then available to you.

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

In the example, the price appears after each variant value. In the same way, product numbers, stock information, or custom product data fields can be shown.

References

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

Guide: Display variants
Guide: Reload dependent variants via AJAX
Guide: Display dependent variants as links
Guide: Display dependent variants as a table

​Use the ready-made select list

​Build the select list yourself

​Display product data in the select list

​References

​Related topics

Use the ready-made select list

Build the select list yourself

Display product data in the select list

References

Related topics