Magento 2 Minicart Ajax update

Question

I need to update mini cart without the need to click on update button (just clicking on +/- button)

I can't find module or code to do that!

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

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>

Its working fine for me.