Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

Product Variation Grid

Display a matrix of a products variations, with multi-item add to cart support.

Industries

  • Fashion
  • Wholesalers

Wireframe

Product Variation Grid

Coding Instructions

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 Admin > Customisable Fields > 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 (/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:'2d,3d'%]
        [%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;">&nbsp;</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%]
    [%/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 /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

Dimension Result


1 related articles found: