Add Ajax Quantity Increment and Decrement Button on mini cart in Magento 2

Question

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?

Answer 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();
    }
}

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