Magento 1.9 – Increment and Decrement Quantity Button on Shopping Cart Page

cartmagento-1.9qty-increment

How to add increment(plus +) and decrements(minus -) qty button on shopping cart page?

Best Answer

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