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.

1

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

  • 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 '17 at 8:30
  • You should update the question with what you tried. I will test on my local machine. – Khoa TruongDinh Jan 3 '17 at 8:33
  • I did update the question – TrytoFly Jan 3 '17 at 13:59
  • @TrytoFly remember static files need to be cleared – Stevie G Jan 16 '17 at 9:31
  • @KhoaTruongDinh Can I call this js file in cms page only in my custom module? – Rohan Hapani Oct 4 '18 at 11:09
4

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

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.