2

I want to implement Ajax Quantity Increment and Decrement Button functionality on cart items on Minicart. I didn't find any article or any module to achieve this. as qty increment(+) and decrement(-) inside the mini cart product price and the total must change without clicking on update.Could anyone help me with it?

5
1

We can make it easier by adding +1 and -1 links to change the quantity of each item. We will do this with some very simple JavaScript which takes the current value and adjusts it. Once this has been done, we submit the form through JavaScript to reduce customer effort.

<?php
  <input name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" title="<?php echo $this->__('Qty') ?>" class="input-text qty" maxlength="12" id="cart[<?php echo $_item->getId() ?>][qty]"/>
?>

app/design/frontend/[interface_name]/[theme_name]/template/checkout/cart/item/default.phtml

Increase by one:

<?php
  <a onclick="changeItemQuantity( <?php echo $_item->getId() ?>, 1 ); return false;" href="#"><img alt="add-arw" src="<?php echo $this->getSkinUrl('images/add-arw.png') ?>"></a>
?>

Decrease by one:

<?php
  <a onclick="changeItemQuantity( <?php echo $_item->getId() ?>, -1 ); return false;" href="#"><img alt="add-arw" src="<?php echo $this->getSkinUrl('images/add-arw.png') ?>"></a>
?>

Now the JavaScript function. We do not want it duplicated for every item so you can either put it in your theme’s JavaScript file or just below the table in the parent template -

app/design/frontend/[interface_name]/[theme_name]/template/checkout/cart.phtml

function changeItemQuantity( id , num ) {
    var qty_id = "cart[" + id + "][qty]";
    var currentVal = parseInt( $(qty_id).value );
    if ( currentVal != NaN )
    {
        $(qty_id).value = currentVal + num;
        $("products-table-basket").submit();
    }
}

enter image description here

References

  1. https://tomrobertshaw.net/2010/08/add-increase-and-decrease-quantity-buttons-to-items-in-magento-cart/
  2. https://www.magearray.com/enhanced-mini-cart.html
  3. https://community.magento.com/t5/Magento-2-x-Programming/Update-Cart-automatically-Using-Increment-and-decrement-Button/td-p/104958
7
  • Thanks for comment Aditya Shah but code does not works for me. Oct 22 '18 at 5:53
  • This is reference you need to enhance it Oct 22 '18 at 5:58
  • Aditya Shah can you please elaborate how can I get it Oct 22 '18 at 6:00
  • Okay,just a min Oct 22 '18 at 6:25
  • You can consult a way to ajax re-load block totals in cart. Oct 22 '18 at 6:26
2

You can download the extension and installed it for minicart Ajax Quantity Increment and Decrement Button.

https://github.com/kirtinariya1/MinicartAjaxQtyIncrementDecrement

4
  • Does this support 2.4.1 commerce edition? @Kirti Nariya
    – zus
    Apr 6 at 8:21
  • @zus It is working fine in 2.2 Please check in 2.4.1 Apr 6 at 10:51
  • FYI If click + (increment) or - (decrement ) first time not updating, if i click again then only it will reflect, how to solve this issue
    – zus
    Apr 7 at 2:32
  • Any help for ajax not working on first click. magento.stackexchange.com/q/335615/57334
    – zus
    Apr 14 at 15:32

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.