Multi-Item Add

The tweak describes how you can add a quantity field to the product thumbnails on the category page, so customers can add multiple items to their cart with a single click.

Wireframe

Multi-Item Add


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.

Coding Instructions

Step 1: Duplicate the category template

Duplicate the existing category.template.html file within /httpdocs/assets/themes/[THEME-NAME]/templates/cms and rename it to category_multi_item.template.html.

Step 2: Add the code into the template

Paste the following code into the template replacing the thumb_list function.

[%thumb_list type:'products' limit:'[@config:THUMB_LIMIT@]' template:'multi_item_list'%]
    [%param *header%]
        <div class="row sort_container align-items-center">
            <div class="col-md-7 d-none d-md-block">
                <div class="btn-text">
                    <strong>[@total_results@]</strong> Product[%if [@total_results@] > 1%]s[%/if%] Found
                </div>
            </div>
            <div class="col-8 col-md-5">
                <form method="get" action="[@config:CURRENT_URL@]">
                    <input name="rf" type="hidden" value="[%FILTER_CODE%][%/FILTER_CODE%]">
                    <div class="form-row">
                        <label class="col-2 col-form-label" for="sortby">Sort</label>
                        <div class="col-10">
                            <select id="sortby" name="sortby" onChange="return this.form.submit();" class="form-control" aria-label="Sort products by">
                                <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>
        </div>
        <div class="row">
            <div class="col-12">
                <hr aria-hidden="true" />
            </div>
        </div>
        <div class="[%VIEWBY type:'products' if:'eq' value:'list' if_true:'thumb_list' if_false:'thumb'%][%/VIEWBY%]">
            <section id="multiitemadd" class="row products-row" aria-label="Products in category">
                <div class="col-12">
                    <a class="multi-add btn btn-lg btn-success mb-3" href="#" rel="nofollow"><i class="fa fa-shopping-cart"></i> Add Selected To Cart</a>
                </div>
    [%/param%]
    [%param *footer%]
                <div class="col-12">
                    <a class="multi-add btn btn-lg btn-success" href="#" rel="nofollow"><i class="fa fa-shopping-cart"></i> Add Selected To Cart</a>
                </div>
            </section>
        </div>
        [%IF [@total_results@] > [@config:thumb_limit@]%]
            <div class="row">
                <div class="col-12">
                    <hr aria-hidden="true"/>
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-center">
                            [%paging limit:'3'%]
                                [%param *previous_page%]<li class="page-item"><a class="page-link" href="[@url@]" aria-label="Go back one page"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li>[%/param%]
                                [%param *goback_pages%]<li class="page-item"><a class="page-link" href="[@url@]" aria-label="Go to page [@page@]">[@page@]</a></li>[%/param%]
                                [%param *current_page%]<li class="page-item active"><a class="page-link" href="[@url@]" aria-label="Current page">[@page@]</a></li>[%/param%]
                                [%param *gonext_pages%]<li><a href="[@url@]" class="page-link" aria-label="Go to page [@page@]">[@page@]</a></li>[%/param%]
                                [%param *next_page%]<li class="page-item"><a class="page-link" href="[@url@]" aria-label="Go forward one page"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>[%/param%]
                            [%/paging%]
                        </ul>
                    </nav>
                    <hr aria-hidden="true"/>
                </div>
            </div>
        [%/IF%]
    [%/param%]
    [%param *ifempty%]
        <div class="row">
            <div class="col-12">
                <p>This category is empty! Please try another category or use our search function to find what you are looking for. If you require further assistance please contact us.</p>
            </div>
        </div>
    [%/param%]
[%/thumb_list%]

Step 3: Create a new thumbnail template

Create a new thumbnail template within /httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product and name it multi_item_list.template.html.

Step 4: Add the code into the template

Paste the following code into the multi_item_list.template.html template:

[%cache type:'list' id:'[@inventory_id@]-multi'%]
    <article class="col-12 col-xl-6" role="article" aria-label="Product Thumbnail">
        <div class="card" itemscope itemtype="http://schema.org/Product">
            <meta itemprop="brand" content="[@brand@]"/>
            <meta itemprop="mpn" content="[@sku@]"/>
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-3 col-sm-2 col-xl-3">
                        <a href="[@URL@]" class="thumbnail-image">
                            <img src="[%asset_url type:'product' thumb:'thumb' id:'[@sku@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%/param%][%/asset_url%]" itemprop="image" class="product-image img-fluid" alt="[@model@]" rel="itmimg[@sku@]">
                        </a>
                    </div>
                    <div class="col-9 col-sm-10 col-xl-9 pl-0">
                        <div class="row">
                            <div class="col-12 col-sm-8">
                                <h4 itemprop="name"><a href="[@URL@]" title="[@model@]">[%format type:'text' maxlength:'100' rmhtml:'1'%][@model@][%/format%]</a></h4>
                                <div 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>
                                        <meta itemprop="priceValidUntil" content="[%format type:'date' format:'#Y-#M-#d'%][@promo_end@][%END format%]"/>
                                        <span class="text-success" itemprop="price" content="[@promo_price@]">[%format type:'currency'%][@promo_price@][%/format%]</span>
                                    [%else%]
                                        [%if [@has_child@]%]From [%/if%]
                                        <span itemprop="price" content="[@store_price@]">[%format type:'currency'%][@store_price@][%/format%]</span>
                                    [%/if%]
                                    [%if [@inpromo@]%]
                                        <p class="mb-1"><span class="badge badge-danger">On Sale</span></p>
                                    [%/if%]
                                    [%if [@save@] > 0 AND ![@has_child@] %]
                                        <p class="mb-1"><span class="badge badge-warning">[%format type:'percent'%][@save@][%/format%] OFF</span></p>
                                    [%/if%]
                                    [%if [@save@] > 0%]
                                        <p class="mb-1"><span class="badge badge-secondary">RRP [%format type:'currency'%][@retail@][%/format%]</span></p>
                                    [%/if%]
                                </div>
                            </div>
                            <div class="col-12 col-sm-4 col-sm-3 col-xl-4">
                                <form class="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" class="btn btn-primary btn-block btn-sm btn-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">See Options</a>
                                    [%elseif [@store_quantity@] > 0 AND [@preorder@] %]
                                        <input type="number" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" Placeholder="Qty" class="form-control">
                                        <span class="mt-2 badge badge-warning">Pre-order</span>
                                    [%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="Qty" class="form-control">
                                        <span class="mt-2 badge badge-danger">Backorder</span>
                                    [%else%]
                                        <a class="notify_popup btn btn-outline-secondary btn-block btn-sm btn-loads" href="[@url@]" 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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
[%/cache%]

Step 5: Assign the multi-item template

To use the multi-item category template, assign category_multi_item to all category pages through the "body template" field found here: Settings & Tools > All Settings & Tools > Content Types Manager > Product Category


Final Result

Multi-Item Add


Customising this section

More information on how to customise this section can be found within the Thumb List Documentation.


Was this article useful?

Be notified when this page is updated. Optional.