Magento2 – Fix Overriding/Extending price-options.js Not Working

javascriptmagento2price

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

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

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

Related Topic