Magento – shopping cart page increment and decrement button

qty-incrementquantityshopping-cart

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

Best Answer

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.

Related Topic