2

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.

2 Answers 2

2

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

14
  • I tried the exact same example from github. It does not work, the js does show up in the browser, but the custom reloadPrice function doesn´t get fired.
    – TrytoFly
    Jan 3, 2017 at 8:30
  • You should update the question with what you tried. I will test on my local machine. Jan 3, 2017 at 8:33
  • I did update the question
    – TrytoFly
    Jan 3, 2017 at 13:59
  • @TrytoFly remember static files need to be cleared
    – tread
    Jan 16, 2017 at 9:31
  • @KhoaTruongDinh Can I call this js file in cms page only in my custom module? Oct 4, 2018 at 11:09
5

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
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.