How to implement homepage minicart qty increment and decrement option?

[Aveeva]

I want to implement the qty increment and decrement option in the mini cart on the homepage. 

[syedhasan]

Hi @Aveeva 

You can try this solution

 Step 1: app/design/frontend/Module/theme/Magento_Checkout/web/template/minicart/item/default.html

<div class="product-item-pricing">
                <!-- ko if: canApplyMsrp -->
                
                <div class="details-map">
                    <span class="label" data-bind="i18n: 'Price'"></span>
                    <span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
                </div>
                <!-- /ko -->
                <!-- ko ifnot: canApplyMsrp -->
                <!-- ko foreach: $parent.getRegion('priceSidebar') -->
                <!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
                
                <div class="details-qty qty">
                    <label class="label" data-bind="i18n: 'Qty', attr: {
                    for: 'cart-item-'+item_id+'-qty'}"></label>
                    <div class="more">+</div>
                        <input data-bind="attr: {
                        id: 'cart-item-'+item_id+'-qty',
                        'data-cart-item': item_id,
                        'data-item-qty': qty,
                        'data-cart-item-id': product_sku
                        }, value: qty"
                        type="number"
                        size="4"
                        class="item-qty cart-item-qty">
                    
                    <div class="less">-</div>
                    <button data-bind="attr: {
                    id: 'update-cart-item-'+item_id,
                    'data-cart-item': item_id,
                    title: $t('Update')
                    }"
                    class="update-cart-item"
                    style="display: none">
                        <span data-bind="i18n: 'Update'"></span>
                    </button>
                </div>
            </div>

Step2:
app/design/frontend/Module/theme/Magento_Checkout/templates/cart/minicart.phtml

<script type="text/javascript">
require(["jquery"],function($){
$('body').on("click",".more, .less",function(){
    var obj = $(this);
    var currentQty = obj.siblings('.cart-item-qty').val();
    var iid = obj.siblings('.update-cart-item').attr('data-cart-item');

    if(obj.hasClass('more')){
        var newAdd = parseInt(currentQty)+parseInt(1);
        obj.siblings('.cart-item-qty').val(newAdd);
        obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
        //$('#update-cart-item-'+iid).click();
        $('.update-cart-item').show();
    } else {
        if(parseInt(currentQty) > 1){
            var newAdd = parseInt(currentQty)-parseInt(1);
            obj.siblings('.cart-item-qty').val(newAdd); 
            obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
            //$('#update-cart-item-'+iid).click();
            $('.update-cart-item').show();
        }
    }
});
});
</script>

------------------------------------------------
If you've found one of my answers useful, please give "Kudos" or "Accept as Solution"

[syedhasan]

Hi @Aveeva 

you can also use this extension https://github.com/kirtinariya1/MinicartAjaxQtyIncrementDecrement 

------------------------------------------------
If you've found one of my answers useful, please give"Kudos" or "Accept as Solution"

[Aveeva]

@syedhasan  Partially working,

Screenshot: https://snipboard.io/fQXsnU.jpg

product name removed.

[Aveeva]

@syedhasan  I am installed github module, but the increment and decrement button not working.

[syedhasan]

Hi @Aveeva 
Sorry for late response 
Can you please try this code https://github.com/php-cuong/magento2-qty 

------------------------------------------------
If you've found one of my answers useful, please give "Kudos" or "Accept as Solution"