JS Widget: two custom Widgets extended same parent Widget Magento 2

Question

Precondition

I have 2 custom widgets extending same parent widget.

• Parent widget: Magento_ConfigurableProduct/js/configurable
• First Custom Widget: Vendor_AModule/js/configurable
• Second Custom Widget: Vendor_BModule/js/configurable

First Custom Widget require-config.js:

var config = {
    map: {
        '*': {
            configurable: 'Vendor_AModule/js/configurable'
        }
    }
};

First Custom Widget JS:

define([
    'jquery',
    'mage/translate',
    'Magento_ConfigurableProduct/js/configurable'
], function ($) {
    $.widget('vendor.configurable_awidget', $.mage.configurable, {
        /**
         * {@inheritDoc}
         */
        _configureElement: function (element) {
            this._super(element);
            alert('Custom widget A is triggered!');
        }
    });

    return $.vendor.configurable_awidget;
});

Second Custom Widget require-config.js:

var config = {
    map: {
        '*': {
            configurable: 'Vendor_BModule/js/configurable'
        }
    }
};

Second Custom Widget JS:

define([
    'jquery',
    'mage/translate',
    'Magento_ConfigurableProduct/js/configurable'
], function ($) {
    $.widget('vendor.configurable_bwidget', $.mage.configurable, {
        /**
         * {@inheritDoc}
         */
        _configureElement: function (element) {
            this._super(element);
            alert('Custom widget B is triggered!');
        }
    });

    return $.vendor.configurable_bwidget;
});

Steps to reproduce

I open a configurable product frontend page.

Expected Result

I see both Custom widget B is triggered! and Custom widget A is triggered! alert.

Actual Result

I only see Custom widget B is triggered! alert.

Question

How should the code be to make the configurable product frontend page displays alerts of both widgets?

Answer 1

Magento 2 has a lesser known feature called a require-js mixin that's useful for extending a js module from multiple places.

Your requirejs-config.js should look like:

var config = {
    'config': {
        'mixins': {
            'Magento_ConfigurableProduct/js/configurable': {
                'Vendor_AModule/js/configurable': true
            }
        }
    }
};

The js file would then be:

define([
    'jquery',
    'mage/translate'
], function ($) {

    return function (widget) {
        $.widget('vendor.configurable_awidget', widget, {
            /**
             * {@inheritDoc}
             */
            _configureElement: function (element) {
                this._super(element);
                alert('Custom widget A is triggered!');
            }
        });
        return $.vendor.configurable_awidget;
    };
});

This js returns a function which takes the target module as an argument and returns the extended version. This way you can extend the widget in different places without undesired overriding.

Answer 2

Make sure the custom Module loaded after others

<sequence> tag to ensure that needed files from other components are already loaded when your component loads

module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_BModule" setup_version="1.0.1">
        <sequence>
            <module name="Vendor_AModule"/>
        </sequence>
    </module>
</config>

We can check in app/etc/config.php. Your custom module should be "lower level" than others.

<?php
return array (
  'modules' => 
  array (
    ......
    'Magento_ConfigurableProduct' => 1,
    ......
    'Vendor_AModule' => 1,
    ......
    'Vendor_BModule' => 1,
    ......
  ),
);

We can remove the custom module from setup_module table. And then, run setup upgrade command again to re-order the module sequence.

We need to make sure the custom js is "lower level" than others in requirejs-config.js.

pub/static/_requirejs/frontend/Magento/luma/en_US/requirejs-config.js

(function(require){

    ......

    (function() {

        var config = {
            map: {
                '*': {
                    configurable: 'Magento_ConfigurableProduct/js/configurable'
                }
            }
        };
        require.config(config);
    })();

    ......



    (function() {
        var config = {
            map: {
                '*': {
                    configurable: 'Vendor_AModule/js/configurable'
                }
            }
        };
        require.config(config);
    })();

    .....

    (function() {
        var config = {
            map: {
                '*': {
                    configurable : 'Vendor_BModule/js/configurable'
                }
            }
        };
        require.config(config);
    })();

    ......

})(require);

Declare the Module B

Because the A widget was "overridden" the default Magento widget already. So, in the Module B, we need to load the A widget and "override" it.

app/code/Vendor/BModule/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            configurable : 'Vendor_BModule/js/configurable'
        }
    }
};

app/code/Vendor/BModule/view/frontend/web/js/configurable.js

define([
    'jquery',
    'mage/translate',
    'Vendor_AModule/js/configurable' // Module A widget
], function ($) {
    $.widget('vendor.configurable_bwidget', $.vendor.configurable_awidget, {
        /**
         * {@inheritDoc}
         */
        _configureElement: function (element) {
            this._super(element);
            alert('Custom widget B is triggered!');
        }
    });

    return $.vendor.configurable_bwidget;
});

After all, we need to run static content deploy again.

We can read more here: https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/#using-_super-and-_superapply-to-access-parents