How can overwrite an event from JS file in custom theme or module without overwriting the whole file?

Question

How can overwrite an event from sidebar.js in my custom theme or custom module without effecting anything else that is located in the file? What is the best approach? I need to make the following change:

The file and event that I need to overwrite:

vendor/magento/module-checkout/view/frontend/web/js/sidebar.js

Change from:

         /**
         * @param {jQuery.Event} event
         */
        events['click ' + this.options.button.remove] =  function (event) {
            event.stopPropagation();
            confirm({
                content: self.options.confirmMessage,
                actions: {
                
                /** @inheritdoc */
                confirm: function () {
                    self._removeItem($(event.currentTarget));
                },

                /** @inheritdoc */
                always: function (e) {
                    e.stopImmediatePropagation();
                }
            }
        });
    };

To:

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

I just want to change this single element. Can you advise on the best approach here?

Answer 1

Use mixin. Mixin is a class whose methods are added to, or mixed in, with another class.

A base class includes the methods from a mixin instead of inheriting from it. This allows you to add to or augment the behavior of the base class by adding different mixins to it.

Click here for more-> https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_mixins.html

app/code/Vendorename/Modulename/view/frontend

requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/sidebar': {
                'Vendorename_ModuleName/js/sidebar': true
            }
        }
    }
};

Create sidebar.js at app/code/Vendorename/Modulename/view/frontend/web/js

I Hope This Helps You.

Answer 2

Try in this way

Create requirejs-config.js Something like this app/code/{Namespace}/{Theme}/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/sidebar.js': '{Namespace}_{Module}/js/sidebar.js'
        }
    }
};

Then download sidebar.js and upload to {Namespace}_{Module}/web/js/ and make your changes

Happy coding

Answer 3

copy file in app/desing/frontend/Vendor/Theme/web/js/sidebar.js and change in your theme