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:

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

1 Answer 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">
            <module name="Magento_ConfigurableProduct"/>

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:

], 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.

  • How does modifying a function work? How to call the parent?
    – Alex
    Aug 17, 2016 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. Aug 18, 2016 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, 2016 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, 2017 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/…) Dec 21, 2017 at 1:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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