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:
and now the jQuery to make it work.
jQuery:
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> |