0

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

2 Answers 2

5

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.