Change input to select box to force user to buy quantity in bulk

On a product in Maropost Commerce Cloud, you can determine a multiplier quantity, which sets up rules that suggest that a product can only be purchased in lots of this quantity. For example, if the multiplier quantity is 10, then you can only purchase 10, 20, 30, 40, etc.

By default if a product has this and a customer purchases it, this rule is enforced on the checkout stage of the site so as you approach the checkout the cart page will give you a warning and not allow checkout until you change the quantity that meets the rule. This tweak let's you use this field to enforce the quantity box to only show options that comply with this ruleset, so the customer doesn't need the run-around that comes with adjusting quantity for a purchase after the purchase is made.


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: Open the product buying options template

The buying options template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/buying_options.template.html.

Step 2: Add the code into the template

Find the quantity input field <input type="number" min="[@min_qty@]" class="form-control qty input-lg" id="qty[@rndm@][@SKU@]"/> and replace it with the following code:

[%if ![@extra@] or ![@has_child@] or ![@editable_bundle@]%]
    [%if [@multiplier_qty@] > 0%]
        <select id="qty[@rndm@][@SKU@]" name="qty" class="form-control input-tiny theQty">
            [%if [@store_quantity@] > 0 %]
                <option selected> [@multiplier_qty@]</option>
                [%set [@data:qty-count@] = 1 /%]
                [%while [@data:qty-count@] <= 11%]
                    [%set [@data:qty-count@] = [@data:qty-count@]+1 /%]
                    <option>[%calc [@data:qty-count@]*[@multiplier_qty@] /%]</option>
                [%/while%]
            [%elseif [@store_quantity@] < 1 AND [@config:ALLOW_NOSTOCK_CHECKOUT@] %]
                <option selected> [@multiplier_qty@]</option>
                [%set [@data:qty-count@] = 1 /%]
                [%while [@data:qty-count@] <= 11%]
                    [%set [@data:qty-count@] = [@data:qty-count@]+1 /%]
                    <option>[%calc [@data:qty-count@]*[@multiplier_qty@] /%]</option>
                [%/while%]                                                        
            [%else%]
                <option selected disabled>1</option>
            [%/ if%]
        </select>
    [%else%]
        <input type="number" min="[@min_qty@]" class="form-control qty input-lg" id="qty[@rndm@][@SKU@]" name="qty" value="[%data id:'min_qty' if:'ne' value:'0' %][@min_qty@][%end data%][%data id:'min_qty' if:'eq' value:'0' %]1[%end data%]" size="2"/>
    [%/if%]
[%/if%]  

Step 3: Add to product thumbnails (Optional)

If your product thumbnails have a quantity field, take the same code above and apply it to your thumbnails. You may need to make some modifications due to the extra width required for the select box.

Note:

The code above utilises a <= 11 in the loop to set an upper limit of 10 options in your select box. However if your quantity multiplier is low, for example, lots of 2, then this means you could only buy a maximum of 20 in this system. So for these cases you may want to increase this loop to be much higher to suit your specific product requirements.

Was this article useful?

Be notified when this page is updated. Optional.