Magento 2 – Add Ajax Quantity Increment and Decrement Button on Mini Cart

magento-2.1.7magento2mini-cart

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?

Best Answer

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

Related Solutions

Magento 1.9 – Get Discount and Grand Total in Mini Cart

You have to load the quote first:

<?php
    $quote = Mage::getModel('checkout/session')->getQuote();
    $quoteData = $quote->getData();
    $grandTotal = $quoteData['grand_total'];
?>

Then simply replace $this->getSubtotal() with $grandTotal.

To get the actual discount amount, you can use this:

$discountTotal = 0;
foreach ($quote->getAllItems() as $item){
    $discountTotal += $item->getDiscountAmount();
}

Magento 2 – Adding Quantity Increment Button in Cart and Mini Cart

app/code/Amsi/UserManagement/view/frontend/templates/cart/item/default.phtml

I have added For both increment and decrementing quantity.

You can add the button near Quantiy using below code.

<div class="control qty">
   <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
       name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
       data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
       value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
       type="number"
       size="4"
       title="<?= $block->escapeHtml(__('Qty')) ?>"
       class="input-text qty"
       data-validate="{required:true,'validate-greater-than-zero':true}"
       data-role="cart-item-qty"/>                                                     

      /*Code to add increment and decrement button*/

   <div class="qty_control">
            <button type="button"  id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty"></button>
            <button type="button"   id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec"  class="decreaseQty"></button>
      </div>
</div>

<script type="text/javascript">
require(["jquery"],function($){
    $('#<?php echo $_item->getId();?>-upt, #<?php echo $_item->getId();?>-dec').on("click",function(){ 
        var $this = $(this);
        var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');          
        var currentQty = $("#cart-"+ctrl+"-qty").val();
        if($this.hasClass('increaseQty')){
            var newAdd = parseInt(currentQty)+parseInt(1);
             $("#cart-"+ctrl+"-qty").val(newAdd);
        }else{
             if(currentQty>1){
                var newAdd = parseInt(currentQty)-parseInt(1);
                $("#cart-"+ctrl+"-qty").val(newAdd); 
             }
        }
    });
});
</script>

Best Answer

Related Solutions

Magento 1.9 – Get Discount and Grand Total in Mini Cart

Magento 2 – Adding Quantity Increment Button in Cart and Mini Cart

Related Topic