Magento 2.1.9 – Updating Quantity in Minicart

javascriptmagento-2.1.9mini-cart

I want to add Quantity increment / decrement buttons in header minicart.

For that I have added divs as follows

                  <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"
                           maxlength="12"/>
                    <div class="less">-</div>

in file Magento_Checkout/web/template/minicart/item/default.html in my custom theme.

I have created the javascript

jQuery('.more, .less').on("click",function(){
                var obj = jQuery(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);
                    jQuery('#update-cart-item-'+iid).click();
                }else{
                   var newAdd = parseInt(currentQty)-parseInt(1);
                    obj.siblings('.cart-item-qty').val(newAdd); 
                    obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
                    jQuery('#update-cart-item-'+iid).click();
                }
            });

But I am not sure where to add this script and how to call it. The script is working fine when I am executing it from browser console.

I have tried adding the script in default.html, minicart.phtml but it is not working.
My query here is how and where I can add this script to make it work?

Best Answer

In minicart.phtml file at last insert below script,

<script>
jQuery('body').on("click",".more, .less",function(){
    var obj = jQuery(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);
        jQuery('#update-cart-item-'+iid).click();
    }else{
       var newAdd = parseInt(currentQty)-parseInt(1);
        obj.siblings('.cart-item-qty').val(newAdd); 
        obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
        jQuery('#update-cart-item-'+iid).click();
    }
});
</script>
Related Topic