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.
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>
Best Answer