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

Multi-Item Add

Allowing the user to add quantities to chosen products on a category page, and allow them to add those items to cart with a single click using the "Add Selected To Cart" button.

Industries

  • Wholesale

Wireframe

Multi-Item Add

Coding Instructions

Step 1. Create the unique category template file

Duplicate the cms/category.template.html file and rename to multi_item_add_category.template.html.

Step 2. Create the unique thumbnail template file

Duplicate the thumbs/product/list.template.html file and rename to multi_item_list.template.html.

Step 3. Assign the template to a category

In order to test while coding, assign the newly created template multi_item_add_category to a category in the "body template" section in the cPanel.

Step 4. Update the thumb list to use a fixed list view

In the newly created category file multi_item_add_category.template.html, go to the thumb_list code [%thumb_list type:'products' limit:'[@config:thumb_list@]'%] and ammend to the below:

[%thumb_list type:'products' limit:'[@config:thumb_list@]' template:'multi_item_list'%]

Remove the following line which sits directly below the above thumb_list code:

[%param template%][%viewby type:'products' default:'[@templatethumb@]'%][%/viewby%][%/param%]

Remove all of the below code (the immediate child of the div with class sort_container):

<div class="col-xs-4 col-sm-7 col-md-4">
    <script language="javascript" type="text/javascript">
        function viewtype(view) {
            var f=document.viewForm;
                    f['viewby'].value=view;
            f.submit();
        }
    </script>
    <form method="get" name="viewForm" action="[@config:current_url@]" class="hidden">
        <input name="rf" type="hidden" value="[%filter_code%][%/filter_code%]">
        <input name="viewby" type="hidden" value=""/>
    </form>
    <div class="viewby btn-group">
        <a href="javascript:viewtype('');" class="btn btn-default [%viewby type:'products' if:'ne' value:'list' if_true:'active' if_false:''%][%/viewby%]" rel="nofollow"><i class="fa fa-th"></i></a>
        <a href="javascript:viewtype('list');" class="btn btn-default [%viewby type:'products' if:'eq' value:'list' if_true:'active' if_false:''%][%/viewby%]" rel="nofollow"><i class="fa fa-th-list"></i></a>
    </div>
</div>

Go to <strong>[@total_results@]</strong> Products Found and change the parent grid classes to col-xs-6 col-sm-7. The entire section should be as follows:

<div class="col-xs-6 col-sm-7">
    <div class="btn-text">
        <strong>[@total_results@]</strong> Products Found
    </div>
</div>

Go to the sort options form <form method="get" class="form-horizontal" action="[@config:current_url@]">, and change the parent grid classes <div class="col-xs-6 col-sm-5"> in the same way. The entire section should be as follows:

<div class="col-xs-6 col-sm-5">
    <form method="get" class="form-horizontal" action="[@config:current_url@]">
        <input name="rf" type="hidden" value="[%filter_code%][%/filter_code%]">
        <div class="form-group">
            <label class="control-label col-xs-2">Sort</label>
            <div class="col-xs-10">
                <select name="sortby" onChange="return this.form.submit();" class="form-control">
                    <option value="popular" [%sortby type:'products' if:'eq' value:'popular'%]selected[%/sortby%]>
                        Most Popular
                    </option>
                    <option value="name" [%sortby type:'products' if:'eq' value:'name'%]selected[%/sortby%]>
                        Name
                    </option>
                    <option value="SKU" [%sortby type:'products' if:'eq' value:'SKU'%]selected[%/sortby%]>
                        SKU
                    </option>
                    <option value="lowest_price" [%sortby type:'products' if:'eq' value:'lowest_price'%]selected[%/sortby%]>
                        Lowest Price
                    </option>
                    <option value="highest_price" [%sortby type:'products' if:'eq' value:'highest_price'%]selected[%/sortby%]>
                        Highest Price
                    </option>
                </select>
            </div>
        </div>
    </form>
</div>

Step 6. Add the "multiitemadd" class to encapsulate the product thumbnails

Go to the immediate child of the div with class [%viewby type:'products' if:'eq' value:'list' if_true:'thumb_list' if_false:'thumb'%][%/viewby%], and add the id multiitemadd, as shown below:

<div class="row" id="multiitemadd">

Step 7. Add the "Add Selected Quantities To Cart" buttons

Directly below the <div class="row" id="multiitemadd"> div, add the following:

<div class="col-xs-12">
    <a class="multi-add btn btn-lg btn-primary" href="#" onclick="javascript:if ($.checkValidQty()) {$.addMultipleCartItems('multiitemadd'); return false; }" rel="nofollow"><i class="fa fa-shopping-cart"></i> Add Selected To Cart</a>
</div>

Directly below the footer param for the thumb_list tag ([%param *footer%]), add the same code:

<div class="col-xs-12">
    <a class="multi-add btn btn-lg btn-primary" href="#" onclick="javascript:if ($.checkValidQty()) {$.addMultipleCartItems('multiitemadd'); return false; }" rel="nofollow"><i class="fa fa-shopping-cart"></i> Add Selected To Cart</a>
</div>

Step 8. Change the grid for the thumbnail

In your newly created thumbnail file multi_item_list.template.html, edit the opening div to include col-sm-6, so that the code is as follows:

<div class="col-xs-12 col-sm-6">

Step 9. Reshuffle some elements

Find the div with class col-xs-6, and change to col-xs-5, so that the code is as follows:

<div class="col-xs-5">

Take the entire immediate child <p class="price_lead"> section of div <div class="col-xs-3 text-right">, and move up so that it sits directly below <p>[@short_description@]</p>. Remove the now empty <div class="col-xs-3 text-right">. This entire section should now look like this:

<div class="col-xs-5">
    <h3 itemprop="name"><a href="[@URL@]" title="[@model@]">[%format type:'text' maxlength:'50' rmhtml:'1'%][@model@][%/format%]</a></h3>
    <p>[@short_description@]</p>
    <p class="price lead" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <meta itemprop="priceCurrency" content="[@config:defaultcurrency@]">
        [%if [@inpromo@]%]
        <strong>Now [%if [@has_child@]%]from [%/if%]</strong> <span class="text-success">[%format type:'currency'%][@promo_price@][%/ format%]</span>
        [%else%]
        [%if [@has_child@]%]From&nbsp;[%/if%]
        <span itemprop="price">[%format type:'currency'%][@store_price@][%/format%]</span>
        [%/if%]
        [%if [@inpromo@]%]
        <p><span class="label label-danger">On Sale</span></p>
        [%/if%]
        [%if [@save@] > 0 AND ![@has_child@] %]
            <p><span class="label label-warning">
            [%format type:'percent'%][@save@][%/ format%] OFF</span>
            </p>
        [%/if%]
        [%if [@save@] > 0%]
            <p><span class="label label-default">RRP [%format type:'currency'%][@retail@][%/format%]</span></p>
        [%/if%]
    </p>
</div>

Step 10. Add the quantity field

Remove this entire section of code:

<div class="panel-footer text-right">
    <!--# BUYING OPTIONS #
    <form class="form-inline buying-options">
        <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@]">
        <input type="hidden" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" value="1" placeholder="Qty" class="input-tiny">
        [%if [@extra@] or [@has_child@] %]
        <a href="[@URL@]" title="Buying Options" class="btn btn-primary btn-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">See Buying Options</a>
        [%elseif [@store_quantity@] > 0 AND [@preorder@] %]
        <button type="button" title="Pre-Order Now!" class="addtocart btn btn-warning btn-loads" rel="[@rndm@][@SKU@]" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Pre-Order</button>
        [%elseif [@store_quantity@] > 0 AND ![@preorder@] %]
        <button type="button" title="Add to Cart" class="addtocart btn-primary btn btn-loads" rel="[@rndm@][@SKU@]" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Add to Cart</button>
        [%elseif [@store_quantity@] < 1 AND [@config:allow_nostock_checkout@] %]
        <button type="button" title="Add to Cart" class="addtocart btn-primary btn btn-loads" rel="[@rndm@][@SKU@]" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Backorder</button>
        [%else%]
        <a class="notify_popup btn btn-default btn-loads" href="[%URL type:'page' id:'notifyme'%][%/ URL%]?item=[@SKU@]&model=[@model@]" title="Notify Me When Back In Stock" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Out Of Stock</a>
        [%/if%]
    </form>
    <!--# / PRODUCT BUYING OPTIONS #
</div>

Add the following section of code directly below the closing div with class col-xs-5:

<div class="col-xs-4">
    <form class="form-inline buying-options">
        <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 [@extra@] or [@has_child@] %]
        <a href="[@URL@]" title="Buying Options" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">See Buying Options</a>
        [%elseif [@store_quantity@] > 0 AND [@preorder@] %]
        <input type="number" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" Placeholder="Pre-Order Qty" class="form-control">
        [%elseif [@store_quantity@] > 0 AND ![@preorder@] %]
        <input type="number" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" Placeholder="Qty" class="form-control">
        [%elseif [@store_quantity@] < 1 AND [@config:allow_nostock_checkout@] %]
        <input type="number" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" Placeholder="Backorder Qty" class="form-control">
        [%else%]
        <a class="notify_popup btn btn-default btn-loads" href="[%URL type:'page' id:'notifyme'%][%/ URL%]?item=[@SKU@]&model=[@model@]" title="Notify Me When Back In Stock" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Out Of Stock</a>
        [%/if%]
    </form>
</div>

Step 11. Shuffle elements or update styles to suit

Update the CSS to suit. For example, edit the "save" or "RRP" labels so that they sit properly within each thumbnail.

Final Result

Multi-Item Add

Download Files

Download Files


3 related articles found: