Magento2 – How to extend jQuery widget (configurable.js)

by

The question:

I’m creating an extension that replaces the default configurable options label ‘Choose an Option…’ with the attribute name, for example ‘Choose a Color…’.

How can I extend (not override!) the jQuery widget configurable.js and only modify this line?

I know from the documentation that I can override a jQuery widget, so I did:

define([
    'jquery',
    'jquery/ui',
    'configurable' // usually widget can be found in /lib/web/mage dir
], function($){

    $.widget('silvan.configurable', $.mage.configurable, {

    });

    return $.silvan.configurable;
});

How can I initialize this file? Should I load it via requirejs-config? The map function is only for overriding right?

Is it possible to only modify this line? It’s called from this function:

_fillSelect: function (element) {}

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

Firstly, you need to make sure, that your module has Magento_ConfigurableProduct in sequence in module.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_ModuleName" setup_version="1.0.0">
        <sequence>
            <module name="Magento_ConfigurableProduct"/>
        </sequence>
    </module>
</config>

Make sure to regenerate the component list in config.php, otherwise the sequence will be ignored (http://devdocs.magento.com/guides/v2.2/extension-dev-guide/build/module-load-order.html)

Then add requirejs-config.js file in view/frontend directory with code:

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

Finally add configurable.js file in view/frontend/web/js directory with:

define([
    'jquery',
    'priceUtils',
    'jquery/ui',
    'Magento_ConfigurableProduct/js/configurable'
], function($, priceUtils){

    $.widget('silvan.configurable', $.mage.configurable, {
        //code you want to override
    });

    return $.silvan.configurable;
});

You can’t modify a single line, but you can modify a single function inside.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment