How to update qty minicart by ajax without clicking “Update” button

Question

I'm trying to make shopping cart get updated automatically when a customer/user changes the qty of an item in the minicart without having to click the "update" button.

I was thinking of this solution.

vendor/magento/Module_Checkout/view/frontend/web/js/sidebar.js:

/**
         * @param {jQuery.Event} event
         */
        events['change ' + this.options.item.qty] = function (event) {
            self._showItemButton($(event.target));
        };

        /**
         * @param {jQuery.Event} event
         */
        events['click ' + this.options.item.button] = function (event) {
            event.stopPropagation();
            self._updateItemQty($(event.currentTarget));
        };

Edit it to

/**
         * @param {jQuery.Event} event
         */
        events['change ' + this.options.item.qty] = function (event) {
            event.stopPropagation();
            self._updateItemQty($(event.currentTarget));
        };

Would this solution work?

Edit: I copy sidebar.js from vendor folder to app/design/frontend/Learning/default/Magento_checkout/web/js/sidebar.js and made code change to it. But my changes are not being reflected in the browser. Help or suggestions would be appreciated.

Thank you

Answer 1

Please refer this link to create a new theme: Create a new storefront theme

If frontend theme is already exists then copy your core file(sidebar.js) on the following path:

app/design/frontend/<your_vendor_name>/<your_theme_name>/Magento_Checkout/web/js/sidebar.js

After you can replace/update piece of code as per your requirement.

Update the following code:

/**
 * @param {jQuery.Event} event
 */
events['keyup ' + this.options.item.qty] = function (event) {
    event.stopPropagation();
    self._updateItemQty($(event.currentTarget));
    // self._showItemButton($(event.target));
};

/**
 * @param {jQuery.Event} event
 */
events['change ' + this.options.item.qty] = function (event) {
    event.stopPropagation();
    self._updateItemQty($(event.currentTarget));
    // self._showItemButton($(event.target));
};