When running a promotion you might want to set a maximum number of products that can be purchased. You might also want to implement a minimum number of products to be purchased when trying to sell more inventory. Without a modification the product page allows clients to choose quantities outside of the minimum and maximum range defined for your product which makes it harder for your clients to checkout.
The values inside the drop down, can be edited to reflect the min/max range modifying the template files, the issue however, is that it will apply those changes for all the products which you do not want. In this situation, we need it to be different based on the settings from each product.
First, create a product, and set the min and max purchase quantity. Like this:
These settings can be applied under Products->View Products->Edit or Add a product->Other Details tab.
Current Functionality
After that, if you check the product on the store front, you will see that the system allows the customers to select a minimum quantity smaller than 4, like in this example:
When adding one 1 item to cart, this error will show up:
It will also allow the customers to select a quantity higher than 10:
When trying to add so many products to the cart, an error will appear:
The system will not add them to the cart, but it will still allow those values to show inside the drop down. Inside Bigcommerce, the quantity will always have values available between 1 and 30. The products which will be created, can have different min and max purchase quantity setup. This means, the system will need different functionality for those.
The Solution
Here is the code that needs to be added to the product page to update the drop down based on the min / max values in your store:
<script type="text/javascript">
$(document).ready( function() {
var a=0+"%%GLOBAL_MinQty%%";
var b=0+"%%GLOBAL_MaxQty%%";
function minMax(a,b){
$("#qty_").html("");
var minMaxQuantity="<select id='#qty_'>";
for (i=a; i <= b; i++){
minMaxQuantity+='<option value="'+parseInt(i)+'">'+parseInt(i)+'</option>';
}
minMaxQuantity+='</select>';
return minMaxQuantity;
}
var mMQty = '';
if (a==0) a=1;
if (b==0) b=30;
mMQty=minMax(a,b);
$("#qty_").html(mMQty);
});
</script>
If you have a product without minim or maxim purchase quantity, that code will still allow the original drop down values to appear:
When both min and max are available, the drop down changes:
In case there is just min setup, then it will change as required, while the max will remain at 30:
And the same will happen when max is setup on a specific value, it will stop there, while min will start from 1:
The code above needs to be added inside product.html, and this template is available under Design->Edit HTML/CSS. Adding it there, will allow the modification to get the minimum and maximum values from the page itself, without the need to add multiple templates and specific codes to each custom template.
The order process is now much smoother for your customers which should increase your sales!