Magento : Add to cart quantity increment/decrement with jQuery

Hi friends,

This days I am frequently writing blogs. This is because this days I am learning something new to me. 🙂 Learning is real refreshment 😀

Well cut to the short, today one of my friend/partner of our site (www.stylebdonline.com) demanded a default value 1 rather zero and having two button for increment and decrement the quantity of the product.

For changing default zero to one there is a admin panel option, go to System>Configuration and from left Catalog menu select Inventory. Open Product Stock Options tab, there you find Minimum Qty Allowed in Shopping Cart, click Add Minimum Qty button and give 1 in Minimum Qty field. Save Config and the first problem to show 1 insted of zero in add to cart field is ok.

Now the increment and decrement issues. For this I searched and find some useful extensions but I want to keep extensions to a minimum. After a lot I found a way to make this happen. Here is what I am doing,

First of all we need to add the jQuery code with noConflict. ( have a look here ) Add the following to your custom js files (or create a new one if you don’t have one, aka best practice).

 $j(document).ready(function() {
 $j("div.quantity").append('<input type="button" value="+" id="add1" />').prepend('<input type="button" value="-" id="minus1" />');
 $j(".plus").click(function(){
 var currentVal = parseInt($j(this).prev(".qty").val());
 if (!currentVal || currentVal == "" || currentVal == "NaN")
 currentVal = 0;
 $j(this).prev(".qty").val(currentVal + 1);
 });
 
 $j(".minus").click(function(){
 var currentVal = parseInt($j(this).next(".qty").val());
 if (currentVal == "NaN")
 currentVal = 0;
 if (currentVal > 0){
 $j(this).next(".qty").val(currentVal - 1);
 }
 });
 });

This code ensures that the plus and minus buttons are only present if the user has javascript enabled providing graceful degradation for non-javascript browsers. Here also used input’s rather than paragraph tags for the plus and minus buttons which is a more semantic solution.

You now simply need to wrap the quantity input inside a div with the class “quantity”. Move the file app/design/frontend/base/default/template/catalog/product/view/addtocart.phtml into your theme directory if you haven’t already, open it up and look for line 34. You should see the code for the input which will look something like:

 <input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>"title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
 

Simply wrap this line inside a div like so;

 <div class="quantity">
 <input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty"/>
 </div> <!-- /.quantity -->
 

Thats it friends, and upload the files. You’ll need to style the plus and minus buttons with some CSS if you wish but the functionality will be there.
Have a nice Shopping 😀