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
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 4, 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
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
Customising this section
More information on how to customise this section can be found within the Thumb List Documentation.