Kdjykuj

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.

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.

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'}

                         }



            };  

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;

});

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;

    };

});