How to add increment(plus +) and decrements(minus -) qty button on shopping cart page?
2 Answers
I have completed by using this code and working perfect.
Find below code from file - template\checkout\cart\item\default.phtml
<input type="text" pattern="\d*" name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" data-cart-item-id="<?php echo $this->jsQuoteEscape($_item->getSku()) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Qty')) ?>" class="input-text qty" maxlength="12" />
Replace it with below code
<a class="decrement_qty_<?php echo $_item->getId(); ?>" href="javascript:void(0)">-</a>
<input type="text" pattern="\d*" name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" data-cart-item-id="<?php echo $this->jsQuoteEscape($_item->getSku()) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Qty')) ?>" class="input-text qty" maxlength="12" />
<a class="increment_qty_<?php echo $_item->getId(); ?>" href="javascript:void(0)">+</a>
Add below code to end of file
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
var itemId = '<?php echo $_item->getId(); ?>';
jQuery('.increment_qty_'+itemId).click(function() {
jQuery('.btn-update').css('display','block');
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_'+itemId).click(function() {
jQuery('.btn-update').css('display','block');
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>
Try like below:
jQuery function:
$j(document).ready(function() {
$j("div.quantity").append('<input type="button" value="+" id="add1" />').prepend('<input type="button" value="-" id="minus1" />');
$j(".plus").click(function(){
var currentVal = parseInt($j(this).prev(".qty").val());
if (!currentVal || currentVal == "" || currentVal == "NaN")
currentVal = 0;
$j(this).prev(".qty").val(currentVal + 1);
});
$j(".minus").click(function(){
var currentVal = parseInt($j(this).next(".qty").val());
if (currentVal == "NaN")
currentVal = 0;
if (currentVal > 0){
$j(this).next(".qty").val(currentVal - 1);
}
});
});
Refer this for better understanding.
Hope this works for you