Plus Minus Shopping Quantity Button for Magento

We want to have plus and minus buttons to increment our product quantity, rather than just a boring input box

The Markup

[php]
<div>
<a class=”decrement_qty” href=”javascript:void(0)”>
<img src=”images/minus-qty.png” width=”16″ height=”16″ alt=”&amp;ndash;” />
</a>

<input name=”qty” size=”4″ value=”1″ />

<a class=”increment_qty” href=”javascript:void(0)”>
<img src=”images/plus-qty.png” width=”16″ height=”16″ alt=”&amp;plus;” />
</a>
</div>
[/php]

And to make it all work, the jQuery.

The JQuery

[php]
<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>
[/php]

Note: If you are going to use this in a loop, place the jQuery outside the HTML loop, obviously.

Hope It helps…

source: twincreations