0

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

0

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));
};
| improve this answer | |
  • My code change is still not being reflected. I tried to remove the code that shows the "update" button, but the button still shows up. Any idea on what's going on? will the new sidebar.js file that I copied, automatically override the existing sidebar.js that is in the vendor folder? – Magento_learner Aug 18 at 21:03
  • The easiest way to modify Javascript is to copy the file over in your own theme, and make your changes there. Please check the updated answer. – Pratik Oza Aug 19 at 5:17
  • I'm not really sure why it wasn't working before but it works now. So it reloads the whole webpage, is there any way to make it just reload the shopping cart and total summary instead of the whole page? Also, self._showItemButton($(event.target)) this code is supposed to be the one that shows the "update" button right? I removed that line of code but the "update" button is still showing up. – Magento_learner Aug 19 at 14:43
  • It is working fine in default M-2.3.4 setup. As I've mentioned, update the code for both events "keyup" & "change" and after run these commands 1) php bin/magento setup:upgrade 2) php bin/magento setup:static-content:deploy -f – Pratik Oza Aug 19 at 18:00
  • Yes, it is working now for me. Thank you but my question was that does it always need to reload the page after changing the item qty? – Magento_learner Aug 19 at 18:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.