how to add increment and decrements button on shopping cart quantity block and refresh product price on increment or decrements of price using buttons
2 Answers
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.
-
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– swatiJun 26, 2015 at 10:03
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>