Quantity Field

Add a quantity field to the product grid/list thumbnails so a user can add their desired quantity to cart without the need to click through to the product page.

Wireframe

Thumbnail Quantity Field

Preparation Checklist

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

Read through the Introduction to Maropost Commerce Cloud Document 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: Grid thumbnail template

Navigate to the file /httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/template.html and replace the highlighted line with the following code:

[%if [@extra@] eq '' AND ![@has_child@] AND [@store_quantity@] > 0%]
    <input type="text" id="qty[@rndm@][@sku@]" name="qty[@rndm@][@sku@]" value="1" placeholder="Qty" class="thumb-qty-field form-control text-center">
[%else%]
    <input type="hidden" id="qty[@rndm@][@sku@]" name="qty[@rndm@][@sku@]" value="1" placeholder="Qty" class="input-tiny">
[%/if%]

Step 2: List thumbnail template

Navigate to the file /httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/list.template.html and replace the highlighted line with the following code:

[%if [@extra@] eq '' AND ![@has_child@] AND [@store_quantity@] > 0%]
    <input type="text" id="qty[@rndm@][@sku@]" name="qty[@rndm@][@sku@]" value="1" placeholder="Qty" class="form-control mr-2">
[%else%]
    <input type="hidden" id="qty[@rndm@][@sku@]" name="qty[@rndm@][@sku@]" value="1" placeholder="Qty" class="input-tiny">
[%/if%]

Step 3: Add CSS styling

Navigate to the CSS file /httpdocs/assets/themes/[THEME-NAME]/css/style.css and paste in the following code:

/* Thumbnail quantity field */
.products-row article .thumb-qty-field {
    width: 50px;
    margin-right: 5px;
}
.products-row article .thumb-qty-field + .addtocart {
    width: calc(100% - 55px);
}

Final Result