Update quantity in minicart

Question

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?

Answer 1

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>

Answer 2

In following file Magento_Checkout\web\template\minicart\item to change in template default.html.

Write below code

Setp1:-

<div class="details-qty qty">
                <label class="label" data-bind="i18n: 'Qty', attr: {
                       for: 'cart-item-'+item_id+'-qty'}"></label>
                <a href="#" data-bind="attr: {'data-cart-item': item_id}"
                   class="action decrease-qty">
                    <span>-</span>
                </a>

                <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"/>
                <a href="#" data-bind="attr: {'data-cart-item': item_id}"
                   class="action increase-qty">
                    <span>+</span>
                </a>

                <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>

Magento_Checkout\web\js\view to add new button event define in minicart.js.

'button': {
            'checkout': '#top-cart-btn-checkout',
            'remove': '#mini-cart a.action.delete',
            'increacseqty':'#mini-cart a.action.increase-qty',
            'decreaseqty':'#mini-cart a.action.decrease-qty',
            'close': '#btn-minicart-close'
        },

step3:- Magento_Checkout\web\js to add new function _increaseItemQty() and _decreaseItemQty in sidebar.js file.

events['click ' + this.options.button.increacseqty] = function (event) {
            self._increaseItemQty($(event.currentTarget));
        };
events['click ' + this.options.button.decreaseqty] = function (event) {
            self._decreaseItemQty($(event.currentTarget));
        };

_increaseItemQty: function (elem) {
        var itemId = elem.data('cart-item');
        var obj = $('#cart-item-' + itemId + '-qty');
        var currentQty = obj.val();
        var newAdd = parseInt(currentQty) + parseInt(1);
        obj.val(newAdd);
        obj.attr('data-item-qty', newAdd);           
    },
    _decreaseItemQty: function (elem) {
        var itemId = elem.data('cart-item');
        var obj = $('#cart-item-' + itemId + '-qty');
        var currentQty = obj.val();
        if (currentQty > 1) {
            var newAdd = parseInt(currentQty) - parseInt(1);
            obj.val(newAdd);
            obj.attr('data-item-qty', newAdd);
        }
    },