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

  • "S H Patel", thank you, thank you!!! – user36819 Feb 26 '16 at 16:51
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.

| improve this answer | |
  • 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 '15 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 '15 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>
| improve this answer | |
  • but how to update cart with +/- button? – Sagar Parikh SGR Dec 23 '19 at 7:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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