How can overwrite an event from JS file in custom theme or module without overwriting the whole file?
-
15-04-2021 - |
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?
Solution
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.
OTHER TIPS
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
copy file in app/desing/frontend/Vendor/Theme/web/js/sidebar.js and change in your theme