quntity-switcher

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

The Markup

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

And to make it all work, the jQuery.

The JQuery

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

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

Hope It helps…

source: twincreations

Leave a Reply