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:

Display Style Parameters required Used for
Drop Down `*variation_header_select`
`*variation_body_select`
`*variation_footer_select`
Drop down list of the available variations
Text Only `*variation_header`
`*variation_body`
`*variation_footer`
Text variation links
Image Only `*variation_header`
`*variation_body_image`
`*variation_footer`
Image link showing the colour or pattern on each variation
Image with Text `*variation_header`
`*variation_body`
`*variation_footer`
Image and text link showing the colour or pattern on each variation
Radio Button `*variation_header`
`*variation_body_radio`
`*variation_footer`
Radio button and text for each variation

The variations available will be generated on the specifics assigned to the variation products configured in Neto and displayed based on the formatting in the function. Typically, we recommend using all the potential options so whoever is configuring the products in Neto 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, Neto will avoid automatically selecting variations that are out of stock. The exception is when all the variations are out of stock.

Parameters

Name Options Description
`id:''` String The SKU you want to query for the available variations
`*variation_header` HTML & b@se tags Header for each variation with the exception for the select type which used `*variation_header_select`
`*variation_body` HTML & b@se tags Loads the variation option for each specific that uses the display style **Text only** & **Image with text**
`*variation_body_image` HTML & b@se tags Loads the variation option for each specific that uses the display style **Image only**
`*variation_body_radio` HTML & b@se tags Loads the variation option for each specific that uses the display style **Radio button**
`*variation_footer` HTML & b@se tags Footer for each variation with the exception for the select type which used `*variation_header_select`
`*variation_header_select` HTML & b@se tags Header for each variation with the select type
`*variation_body_select` HTML & b@se tags Loads the variation option for each specific that uses the display style **Drop Down**
`*variation_footer_select` HTML & b@se tags Footer for each specific with the display style "Select box"
`*header` HTML & b@se tags Renders a single usable space above the variation options
`*footer` HTML & b@se tags Renders a single usable space below the variation options
Name Item Specific Fields Example Description
`[@specific_autohide@]` Hide on Website 0 Flag that can be used to hide or show a specific on the website
`[@specific_count@]` 1 Number of Specifics / Filters assigned to each child product
`[@specific_id@]` ID 51 ID number of the `Item Specific / Filter`
`[@specific_name@]` Name Flavour Name of the `Item Specific / Filter`
`[@specific_sortorder@]` Sort Order 0 Sort order for the `Item Specific / Filter`
`[@specific_type@]` Display Style select How the variation is displayed in the template:
`image` - Image Only
`radio` - Radio Button
`select` - Drop Down
`text` - Text Only
`textimage` - Image with Text
`[@variation_inventory_id@]` 22343 Inventory ID number of the first variation product
`[@variation_sku@]` cake_choc SKU of the first variation product

Data Tags (variation_body, variation_body_image, variation_body_radio, variation_body_select)

Name Item Specific Fields Example Description
`[@count@]` 1 Incrementing count for each variation value starting at `1`
`[@specific_autohide@]` Hide on Website 0 Flag that can be used to hide or show a specific on the website
`[@specific_count@]` 1 Incrementing count for each variation starting at `1`. Each specific value will display the same `[@specific_count@]` number
`[@specific_id@]` ID 51 ID number of the **Item Specific / Filter**
`[@specific_name@]` Name Flavour Name of the **Item Specific / Filter**
`[@specific_sortorder@]` Sort Order 0 Specific sort order (i.e. Colour). Descending (highest first)
`[@specific_type@]` Display Style select How the variation is displayed in the template:
`image` - Image Only
`radio` - Radio Button
`select` - Drop Down
`text` - Text Only
`textimage` - Image with Text
`[@value_count@]` 1 Incrementing count for a specific variation (i.e. Colour)
`[@value_description@]` Internal Description Limited stocks The `Internal Description` from the `Item Specific / Filter` for this specific value
`[@value_id@]` 940 ID number of the specific value
`[@value_image@]` Image /assets/itmspecific/940.png Path to the image for this variation
`[@value_name@]` Value Chocolate The name of the specific value
`[@value_sortorder@]` Sort Order 100 Specific value sort order (i.e. Blue). Descending (highest first)
`[@value_swatch@]` Swatch Hex Code #efe2fe Six digit hex code (red/green/blue) for the colour of the specific
`[@variation_inventory_id@]` 22343 Inventory ID number of the product
`[@variation_qty@]`, `[@variation_store_quantity@]` Qty On Hand 989 The stock in the warehouse plus the `Preorder Qty` minus the committed quantity
`[@variation_sku@]` SKU cake_choc SKU of the product variation

Was this article useful?

Be notified when this page is updated. Optional.