Product Variation Grid

Display a table of a products variations with the option to add multi-items to cart on the product page.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
• The code snippet in this tweak doc uses Bootstrap 3, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

Please note: This tweak assumes that you have the PRESELECT_VARIATION advanced config disabled. If you plan on showing other variation products on your site using the default dropdown interface, you will also need to follow this tweak.

Step 1: Data Requirements

This tweak has some product data requirements and requires some advanced configurations to be adjusted.

Due to the nature of this tweak, a new custom product field will need to be set up to toggle this UI, otherwise it will break the layout of products which do not fit the data requirements and need to use the standard UI.

To do this, go to Setup & Tools > All settings & Tools > Custom Product Fields.

This new field will be used to toggle whether the new grid layout shows on a product page. Call it Show Grid. Ensure all of the settings are the same as the example below:

In addition to the new misc field, the products will need to be configured. There are a few requirements for this.

Firstly, all of the products which will be using this interface need the new misc field Show Grid set to true.

Second, the product must have Product Variations set up, with exactly two specifics each (colour and size, for example).

Step 2. Install the new Grid template

The code for the grid will be called from a new include within the products folder. This helps seclude it from the rest of the product page code and reduce the risk of breaking the standard functionality.

Copy the code below into a new product include called grid.template.html (/httpdocs/assets/themes/[THEME-NAME]/products/includes/grid.template.html).

<div class="row">
    <div class="col-xs-12">
        <hr>
    </div>
</div>
<div id="multiitemadd">
    [%list_item_variations id:'[@sku@]' grid_style:'1d,2d'%]
        [%param grid_header%]
            <table class="table table-bordered">
        [%/param%]
        [%param grid_row_header%]
            <tr class="grid-row">
        [%/param%]
        [%param grid_corner_cell%]
            <td style="width: 120px;"> </td>
        [%/param%]
        [%param *grid_key_cell%]
            <td class="text-center">
                <span>[@value_name@]</span>
            </td>
        [%/param%]
        [%param *grid_value_cell%]
            <td class="qty-col text-center">
                [%if [@sku@] eq [@^sku@]%]
                    <input type="text" value="" placeholder="0" class="form-control disabled" disabled>
                [%else%]
                    <input type="text" id="qty[@rndm@][@SKU@]" data-prod="[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" value="" placeholder="0" class="form-control">
                    <input type="hidden" id="sku[@rndm@][@SKU@]" name="sku[@rndm@][@SKU@]" value="[@SKU@]">
                    <input type="hidden" id="model[@rndm@][@SKU@]" name="model[@rndm@][@SKU@]" value="[@model@]">
                    <input type="hidden" id="thumb[@rndm@][@SKU@]" name="thumb[@rndm@][@SKU@]" value="[@thumb@]">
                [%/if%]
            </td>
        [%/param%]
        [%param grid_row_footer%]
            </tr>
        [%/param%]
        [%param grid_footer%]
            </table>
        [%/param%]
        [%param header%]
            <input type="hidden" id="_itmspec_sku" value="[%nohtml%][@SKU@][%/nohtml%]">
            <hr>
            <div class="row">
        [%/param%]
        [%param *variation_header%]
            <div class="_itmspec_listopt col-xs-12 col-md-6" ref="[@specific_id@]">
                <div class="variation-name">
                    <strong>[@specific_name@]</strong>
                </div>
                <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_name@]%]
                        [@value_name@]
                    [%else%]
                        [@value_description@]
                    [%/if%]
                </a>
            </div>
        [%/param%]
        [%param *variation_footer%]
                </div>
            </div>
        [%/param%]
        [%param footer%]
            </div>
        [%/param%]
    [%/list_item_variations%]
    <div class="row">
        <div class="col-xs-12">
            <a onclick="javascript:$.addMultipleCartItems('multiitemadd'); return false;" href="#" class="btn btn-lg btn-block btn-primary">Add to Cart</a>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <hr>
        </div>
    </div>
</div>

The code above is a standard multi-item add button and wrapper, with the list_item_variations function generating the grid layout.

Step 3. Summon the new include when needed

Instead of showing the standard variation and buying options layout for products with the new misc field set to true, to show the grid layout, some simple if logic in B@SE can be used.

In /httpdocs/assets/themes/[THEME-NAME]/products/template.html, immediately under the header.template.html include, add the following logic, along side the new grid.template.html include.

<div class="col-sm-7">
    [%load_ajax_template id:'_header' type:'item' template:'header' preload:'1' tmpl_sku:'[@current_sku@]' tmpl_preview:'y'/%]
    [%if [@misc2@]%]
        [%load_ajax_template id:'_grid' type:'item' template:'grid' preload:'1' tmpl_sku:'[@current_sku@]' tmpl_preview:'y'/%]
    [%else%]
...

Note: The website will likely have a different tag for the misc field. Ensure to include the else statement so the product page will show the standard layout for standard products.

Immediately after the buying options include, close the [%if%] logic from above.

...
    </form>
    [%if [@has_variation@] || ![@has_child@] AND ![@has_components@]%]
        [%load_ajax_template id:'_buying_options' type:'item' template:'buying_options' preload:'1' tmpl_sku:'[@current_sku@]' tmpl_preview:'y'/%]
    [%/if%]
[%/if%] <!-- closing tag -->
[%if [@has_components@]%]
    <hr>
...

Final Result