0

how to add increment and decrements button on shopping cart quantity block and refresh product price on increment or decrements of price using buttons

1
  • "S H Patel", thank you, thank you!!!
    – user36819
    Feb 26, 2016 at 16:51

2 Answers 2

2

try to use this code:- insert of all we need to add the jQuery code with noConflict. ( have a look here ) Add the following to your custom js files (or create a new one if you don’t have one, aka best practice).

$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);
     }
     });
     });

This code ensures that the plus and minus buttons are only present if the user has javascript enabled providing graceful degradation for non-javascript browsers. Here also used input’s rather than paragraph tags for the plus and minus buttons which is a more semantic solution.

You now simply need to wrap the quantity input inside a div with the class “quantity”. Move the file app/design/frontend/base/default/template/catalog/product/view/addtocart.phtml

You should see the code for the input which will look something like:

 <input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>"title="<?php echo $this->__('Qty') ?>" class="input-text qty" />


    <div class="quantity">
     <input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty"/>
         </div> 
<!-- /.quantity -->

Thats it friends, and upload the files. You’ll need to style the plus and minus buttons with some CSS if you wish but the functionality will be there.

2
  • This look nice. +1 from me for the idea, but there are some issues with it. What if the product can be bought only in qty increments of 5? What if the qty allows decimals?
    – Marius
    Jun 26, 2015 at 8:47
  • i want to update update the price of product using ajax after incrementing or decrementing the quantity on the same page with increment or decrement event
    – swati
    Jun 26, 2015 at 10:03
1

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>
1
  • but how to update cart with +/- button? Dec 23, 2019 at 7:25

Your Answer

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

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