18

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) {}
Improve this question

1 Answer 1

Reset to default
33
+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',
    '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.

Improve this answer
8
  • How does modifying a function work? How to call the parent? Commented 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. Commented 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/… Commented 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 :-( Commented 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/…) Commented 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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.