Tapan's World

Tapan Kumer Das

Darus Sallam, Mirpur, Dhaka, Bangladesh
Tapan Kumer Das

Magento : Add to cart quantity increment/decrement with jQuery

April 16, 2013, by tapan, category Magento, Magento 1.7.0.2

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).

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:

Simply wrap this line inside a div like so;

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 😀

So, what do you think ?

%d bloggers like this: