list_item_variations

Generates a list of product variations related to designated SKU

Example

[%list_item_variations id:'[@current_sku@]'%]
    [%param header%]
        <input type="hidden" id="_itmspec_sku" value="[%nohtml%][@sku@][%/nohtml%]">
    [%/param%]
    [%param *variation_header%]
        <div ref="[@specific_id@]">
            <h4>[@specific_name@]</h4>
            <div class="specific">
                <input type="hidden" class="_itmspec_val" ref="[@specific_id@]" value="[@selected_id@]">
    [%/param%]
    [%PARAM *variation_body%]
        <div class="_itmspec_listitm" ref="[@specific_id@]_[@value_id@]">
            <a class="_itmspec_lnk [%if [@selected@]%]_itmspec_selected[%/if%]" href="javascript:void(0);" ref="[@specific_id@]_[@value_id@]">
            [%if [@value_image@]%]
                <img src="[@value_image@]" alt="[@value_name@]" />
            [%/if%]
            [%if [@value_description@]%]
                [@value_name@]
            [%else%]
                [@value_description@]
            [%/if%]
            </a>
        </div>
    [%/param%]
    [%param *variation_body_radio%]
        <label class="_itmspec_listitm" ref="[@specific_id@]_[@value_id@]">
            <input class="_itmspec_radio" type="radio" name="_itmspec_radio[@specific_id@]" value="[@value_id@]" ref="[@specific_id@]_[@value_id@]" [%if [@selected@]%]checked[%/if%]>
            [@value_name@]
        </label>
    [%/param%]
    [%param *variation_body_image%]
        <div class="_itmspec_listitm" ref="[@specific_id@]_[@value_id@]">
            <a class="_itmspec_lnk [%if [@selected@]%]_itmspec_selected[%/if%]" href="javascript:void(0);" ref="[@specific_id@]_[@value_id@]">
                [%if [@value_image@]%]
                    <img src="[@value_image@]" alt="[@value_name@]">
                [%else%]
                    [@value_name@]
                [%/if%]
            </a>
        </div>
    [%/param%]
    [%param *variation_footer%]
        </div>
        </div>
    [%/param%]
    [%param *variation_header_select%]
        <div class="_itmspec_listopt" ref="[@specific_id@]">
            <h4>[@specific_name@]</h4>
            <div class="specific">
                <input type="hidden" class="_itmspec_val" ref="[@specific_id@]" value="[@selected_id@]">
                <div class="_itmspec_optpl" ref="[@specific_id@]">
                <select class="_itmspec_opt" ref="[@specific_id@]">
    [%/param%]
    [%param *variation_body_select%]
        <option value="[@value_id@]" [%if [@selected@]%]selected[%/if%]>[@value_name@]</option>
    [%/param%]
    [%param *variation_footer_select%]
        </select>
        </div>
        </div>
        </div>
    [%/param%]
    [%param footer%]
    [%/param%]
[%/list_item_variations%]

Usage

The list_items_variations function is used on the product page when you have a product with multiple options. For example, a t-shirt that has multiple sizes and/or colours.

In the context of the list_item_variations function the "specific" refers to the general type of option, for examples size or colour. The "value" refers to the option specified, for example "Small" or "Red".

Display Options

There are five ways to display the product variations:

The variations available will be generated on the specifics assigned to the variation products configured in Maropost Commerce Cloud and displayed based on the formatting in the function. Typically, we recommend using all the potential options so whoever is configuring the products in Maropost Commerce Cloud can easily adjust the product options available without extra HTML needing to be installed to cover new options.

Order of Specifics

The order of each option will be sorted based on the Specific sort order set within the Product Specifics section of your control panel.

These variations are sorted based on the sort order (which can be specified on the control panel under Products > Product Specifics and click on the name of the specific you want to edit. The Sort Order option at the top of the page is for selecting the order of the specific variations group in relation to other variation groups. For example, Colour before Size.

Order of Products (with Specifics)

To sort the variations within a specific (for example Red before Blue), follow the instructions above to edit the specific.

The Sort Order column in the Specific Values section is where you can sort the values within the specific group. For example, if you have a Colour specific, you can set the order to have Red before Blue.

For more information on editing Product Specifics, check out the article Change Product Specifics and Variations Display Order.

First Selected Option

The first selected option is based on Product sort order set based on the highest sort order on the individual child products. The exception is when some of the variations are out of stock and stock tracking is turned on the the product settings.

By default, Maropost Commerce Cloud will avoid automatically selecting variations that are out of stock. The exception is when all the variations are out of stock.

Parameters

Data Tags (variation_footer_select, variation_header, variation_header_select)

Data Tags (variation_body, variation_body_image, variation_body_radio, variation_body_select)