Ttdfjt

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:

myCompanymyModuleviewfrontendrequirejs-config.js

var config = 

 map: 
 '*': 
 priceOptions: 'myCompany_myModule/js/price-options',

 
 
;

myCompanymyModuleviewfrontendwebjsprice-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:

myCompanymyModuleviewfrontendrequirejs-config.js

var config = 

 config: 
 mixins: 
 'Magento_Catalog/js/price-options': 
 'myCompany_myModule/js/price-options': true
 
 
 

;

myCompanymyModuleviewfrontendwebjsprice-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.

The mixins functionality may help us to solve our issue:

• http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_mixins.html


• http://alanstorm.com/the-curious-case-of-magento-2-mixins/

In your app/code/Namespace/Modulename/view/frontend/requirejs-config.js

var config = 
 config: 
 mixins: 
 priceOptions: 
 'Namespace_Modulename/js/price-options': true
 
 
 
;

Read more here: https://github.com/magento/magento2/issues/7322

Can confirm - the mixin approach worked for me.

In app/code/Namespace/Modulename/view/frontend/requirejs-config.js

var config = 
 config: 
 mixins: 
 'Magento_Catalog/js/price-options': 
 'Namespace_Modulename/js/price-options-mixin': true
 
 
 
;

and my mixin file app/code/Namespace/Modulename/view/frontend/web/js/price-options-mixin.js

define(['jquery'], function ($) 

 return function (widget) 

 $.widget('mage.priceOptions', widget, 

 _onOptionChanged: function () 
 alert("This was called instead of the parent _onOptionChanged function");
 

 );
 return $.mage.priceOptions;
 
);

Then run this from the CLI:

bin/magento setup:static-content:deploy