Product Variants

Use product_variants module to insert a select of product variants.

Configuration parameters

showStockVariantOptionUnavailability

number either 1 or 0. If set to 1, and unavailable variant is selected, a proper message will be displayed.

singleChoiceBoxDisplayStyle

string either isClassicRadioButtonStyle or isModernRadioButtonStyle. Defines a display style of checkboxes. If isClassicRadioButtonStyle is set, one checkbox per line will be displayed, otherwise there will be multiple checkboxes in one line.

moduleTitleInProductVariants

string defined a title of the module. If not specified no title will be displayed.

Module source code

{% from "@macros/product_variants.twig" import product_variants %}
{% from "@macros/module_accordion_toggler.twig" import module_accordion_toggler %}

{% set product = ObjectApi.getProduct(product_id) %}

{% if product.options.count > 0 %}
    {{ product_variants(product, moduleConfig|merge({
        instanceId: moduleInstance,
        shouldShowVariantsPriceDifferenceInfo: true,
        productInstanceKey: moduleInstance,
    } )) }}
{% endif %}

Macros reference

• module_accordion_toggler
• product_variants

Used Object Api methods

• getProduct()

Module configuration schema

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox",
                "options": {
                    "type": "blank",
                    "message": "#### Related settings in the admin panel%s- settings of variant sets (e.g. variant names, range of features, price impact, etc.) in [Variants settings](%s)%s- of stock levels of variants in the [product list](%s)",
                    "placeholderValues": [
                        "\n",
                        "\/admin\/options\/list",
                        "\n",
                        "\/admin\/stock\/list"
                    ]
                }
            },
            {
                "type": "text",
                "name": "moduleTitleInProductVariants",
                "label": "Module title",
                "supportsTranslations": true,
                "isRequired": true,
                "defaultValue": "Choose product variant:"
            },
            {
                "type": "radio",
                "name": "singleChoiceBoxDisplayStyle",
                "label": "Single-choice field style:",
                "defaultValue": "isClassicRadioButtonStyle",
                "options": {
                    "radioOptions": [
                        { "key": "isClassicRadioButtonStyle", "label": "Classic - one option per line (radio button)" },
                        { "key": "isModernRadioButtonStyle", "label": "Modern - several option tiles in a row" }
                    ]
                }
            },
            {
                "type": "checkbox",
                "name": "showStockVariantOptionUnavailability",
                "label": "For non-purchasable variant options, apply graphical gray-out and description \"Out of stock\"",
                "defaultValue": 1,
                "hint": "In the case of products with a large number of variants, disabling this option may speed up page loading, because the availability status will be checked only after all required warehouse variants are selected."
            }
        ]
    }
]