Magento 2 JavaScript – How to Override Core JS Module price-bundle.js

javascriptmagento-2.0magento2overridesrequirejs

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.

Best Answer

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.

Related Topic