I need to override/extend the file price-options.js
.
But it does not work, I always get the error
TypeError: undefined is not a constructor
on this line
$.widget('myCompany.mypriceoptions', $.mage.priceOptions, {
Here are my files:
myCompany\myModule\view\frontend\requirejs-config.js
var config = {
map: {
'*': {
priceOptions: 'myCompany_myModule/js/price-options',
}
}
};
myCompany\myModule\view\frontend\web\js\price-options.js
define([
'jquery',
'underscore',
'mage/template',
'priceUtils',
'priceBox',
'priceOptions'
], function ($, _, mageTemplate, utils) {
'use strict';
var globalOptions = {
qtyFieldSelector: 'input.qty',
};
$.widget('myCompany.mypriceoptions', $.mage.priceOptions, {
options: globalOptions,
_onOptionChanged: function onOptionChanged(event) {
console.log('TEST!');
var changes,
option = $(event.target),
handler = this.options.optionHandlers[option.data('role')];
option.data('optionContainer', option.closest(this.options.controlContainer));
if (handler && handler instanceof Function) {
changes = handler(option, this.options.optionConfig, this);
} else {
changes = defaultGetOptionValue(option, this.options.optionConfig);
}
$(this.options.priceHolderSelector).trigger('updatePrice', changes);
},
});
return $.myCompany.mypriceoptions;
});
EDIT:
I tried to use mixins:
myCompany\myModule\view\frontend\requirejs-config.js
var config = {
config: {
mixins: {
'Magento_Catalog/js/price-options': {
'myCompany_myModule/js/price-options': true
}
}
}
};
myCompany\myModule\view\frontend\web\js\price-options.js
define([
'jquery',
'underscore',
'mage/template',
'priceUtils',
'priceBox',
'priceOptions'
], function ($, _, mageTemplate, utils) {
'use strict';
return function (priceOptions) {
return $.widget('mage.priceOptions', priceOptions, {
_onOptionChanged: function onOptionChanged(event) {
console.log('TEST!');
var changes,
option = $(event.target),
handler = this.options.optionHandlers[option.data('role')];
option.data('optionContainer', option.closest(this.options.controlContainer));
if (handler && handler instanceof Function) {
changes = handler(option, this.options.optionConfig, this);
} else {
changes = defaultGetOptionValue(option, this.options.optionConfig);
}
$(this.options.priceHolderSelector).trigger('updatePrice', changes);
}
});
}
});
The Result is that the .js file appears in the browser, but still the magento function is used instead of the costume one.
Best Answer
The mixins functionality may help us to solve our issue:
In your
app/code/Namespace/Modulename/view/frontend/requirejs-config.js
Read more here: https://github.com/magento/magento2/issues/7322