plus/minus (+/-) button in the product pages to enable customers to change the quantity in cart for magento

To have plus and minus buttons to increment and decrement our product quantity, rather than just a simple input box. By default, Magento provides a text box for entering quantity wherein customers can change the quantity in the text box and submit the “Add to Cart” button. That is a lot of effort for the user; we want to make this process simpler.We can do this by adding +1 and -1 links to change the quantity of each item. For this we have written a very simple JavaScript snippet which takes the current value of the textbox and adjusts it. Once this is done, we submit the form to minimize customer effort.Here I have used images for the links, but obviously you could use texts as well. Following are the HTML and Javascript code snippets which could be merged with: app/design/frontend/[theme_name]/default/template/catalog/product/view/addtocart.phtml

From:

To:

The HTML:

The HTML Code

XHTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="qty"> <label for="qty"><?php echo $this->__('Qty:') ?></label> <a class="decrement_qty" href="javascript:void(0)" > <div class="middle_icon_color pull-left"> <i class="icon-minus"></i> </div> </a>     <input id="qty" class="input-text qty" type="text" title="Qty" value="<?php echo $this->getProductDefaultQty() * 1 ?>" maxlength="12" name="qty" /> <a class="increment_qty" href="javascript:void(0)"> <div class="middle_icon_color pull-left"> <i class="icon-plus"></i> </div> </a> </div>

and now the jQuery to make it work.

jQuery:

The jQuery Code

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<script type="text/javascript"> //<![CDATA[   jQuery(document).ready(function(){     jQuery('.increment_qty').click(function() {       var oldVal = jQuery(this).parent().find("input").val();       if ( parseFloat(oldVal) >= 1 ) {         var newVal = parseFloat(oldVal) + 1;         jQuery(this).parent().find("input").val(newVal);       }     });     jQuery('.decrement_qty').click(function() {       var oldVal = jQuery(this).parent().find("input").val();       if ( parseFloat(oldVal) >= 2 ) {         var newVal = parseFloat(oldVal) - 1;         jQuery(this).parent().find("input").val(newVal);       }     });   }); //]]> </script>