15

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) {}
24
+100

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',
    'jquery/ui',
    'Magento_ConfigurableProduct/js/configurable'
], function($){

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

    return $.silvan.configurable;
});

You can't modyfy single line, but you can modify single function inside.

  • How does modifying a function work? How to call the parent? – Alex Aug 17 '16 at 19:54
  • You can call functions other than one you modify just like it was part of your widget. Your silvan.configurable automatically inherits all from parent. – Bartłomiej Szubert Aug 18 '16 at 6:02
  • 2
    This works great, thank you @Ideo! Bounty will be given in 7 hours (limit of stackexchange). @Alex you can call the parent by using the this._super(); function. See: learn.jquery.com/jquery-ui/widget-factory/extending-widgets/… – Silvan Aug 18 '16 at 7:52
  • is there anything else todo ? cause my custom file wont get loaded... did it exact as it is described above :-( – roman204 Oct 28 '17 at 11:12
  • 1
    This works great! @roman204 I got the same issue: make sure you have the "sequence" node in your module.xml file. Then it's important to reload the module order. The only way to do it at the moment is to disable and re-enable the module where you put the "sequence" in the module.xml file. (More info: view the blue part on this page: devdocs.magento.com/guides/v2.2/extension-dev-guide/build/…) – Stijn Duynslaeger - Echron Dec 21 '17 at 1:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.