Magento 2: How to override core js module price-bundle.js

Question

I am attempting to override the _onQtyFieldChanged event in the mage.priceBundle widget in the module-bundle/view/base/web/js/price-bundle.js file.

I am referencing the Magento dev docs (http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html) and this Magento StackExchange question (Magento2: How can I override core js module price-box.js), but I can't manage to get my custom _onQtyFieldChanged event method to execute. As of now I only have a console.log statement in that method.

A little background: My custom price-bundle.js file is found in Endertech/BundleExtended/view/base/web/js directory. My requirejs-config.js is in Endertech/BundleExtended/view/frontend.

requirejs-config.js:

var config = {
    map: {
        "*": {
            priceBundle: 'Endertech_BundleExtended/js/price-bundle',
            'Magento_Bundle/js/price-bundle': 'Endertech_BundleExtended/js/price-bundle'
        }
    }

};

Endertech/BundleExtended/view/base/web/js/price-bundle.js:

define([
    'jquery',
    'underscore',
    'mage/template',
    'priceUtils',
    'priceBox',
    'priceBundle',
], function ($, _, mageTemplate, utils) {
    'use strict';

    $.widget('Endertech.priceBundle', $.mage.priceBundle, {

        _onQtyFieldChanged: function onQtyFieldChanged(event) {
            console.log("Endertech Module"); 
            var field = $(event.target),
                optionInstance,
                optionConfig;

            if (field.data('optionId') && field.data('optionValueId')) {
                optionInstance = field.data('option');
                optionConfig = this.options.optionConfig
                    .options[field.data('optionId')]
                    .selections[field.data('optionValueId')];
                optionConfig.qty = field.val();

                optionInstance.trigger('change');
            }
        }
    });

    return $.Endertech.priceBundle;

});

EDIT:

So I realized that probably the issue I am coming across is the fact that the widget method I am trying to modify is a private method in module-bundle/view/base/web/js/price-bundle.js. Which is the reason why I can't override it or extend it. I am not sure if there is a way to get around this or a different approach I need to take to this issue that I don't know about.

Any help and suggestions are greatly appreciated.

Answer 1

I had the same issue like you and found a workaround, but don't know if it is helpful. I am going to share it anyway.

I resigned to override the function. Then I was trying to override the whole widget, but couldn't get it to work either. The widget wasn't overridden and the magento standard widget was loaded.

I inspected the generated pub/static/_requirejs/frontend/<Vendor>/<theme>/<location>/requirejs-config.js file. It seems to me, that the modules' requirejs configurations are inserted in a alphabetical order. Thus, the priceBundle variable of my module was overridden by the one of the magento-bundle module, because my vendor starts with a 'C'.

For testing purposes I created a new module and changed the vendor to 'XC...'. After that the overriding of the whole widget works.

But I am still interested in how to override just one function.

Answer 2

You should intrude in requrejs sequence be adding dependencies for your extension, config will be:

var config = {

             map: {
                    "*": {
                          priceBundle: 'SOURCE_TO_EXTENDED_PRICE_BUNDLE'
                         },
                         'Endertech_BundleExtended/js/price-bundle': {'priceBundle': 'SOURCE_TO_ORIGINAL_PRICE_BUNDLE'}
                         }

            };  

Answer 3

What I also found that worked was the following

In the module requirejs-config:

var config = {
    map: {
        '*': {
            'mage/SwatchRenderer': 'Magento_Swatches/js/swatch-renderer',
            'Magento_Swatches/js/swatch-renderer': 'MyVendor_MyModule/js/swatch-renderer'
        }
    }
};

And then I created a mymodule/view/frontend/web/js/swatch-renderer.js that contained:

define([
    'jquery',
    'jquery/ui',
    'mage/SwatchRenderer',
], function ($) {
    $.widget('myvendor.SwatchRenderer', $.mage.SwatchRenderer, {
        _Rewind: function (controls) {
            controls.find('div[option-id], option[option-id]').removeClass('disabled').removeAttr('disabled');
            controls.find('div[option-empty], option[option-empty]').attr('disabled', true).addClass('disabled');
            console.log('test');
        },
    });

    return $.myvendor.SwatchRenderer;
});

Answer 4

If your core js use widget then you also call that widget and return that widget variable in a mixin.

Bundle mixin you have to create requirejs-config.js in your custom module at Vendor/Extension/view/frontend/requirejs-config.js put below code in appropriate js

requirejs-config.js :

var config = {
    config: {
        mixins: {
            'Magento_Bundle/js/price-bundle': {
                'Vendor_Extension/js/price-bundle-mixin': true
            }
        }
    },
};

price-bundle-mixin :

define([
    'jquery',
    'underscore',
    'mage/template',
    'priceUtils',
    'priceBox'
], function ($, _, mageTemplate, utils) {
    'use strict';

    return function (priceBundle) {

        $.widget('mage.priceBundle', priceBundle, {
            // function which you want to overwrite
        });

        // don't forget to add a function which is used by your  
        // functions, else it will show undefined function error

        return $.mage.priceBundle;
    };
});