current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 5 down vote favorite
6

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) {}
share|improve this question
up vote 5 down vote accepted
+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>

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.

share|improve this answer
    
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. – Ideo Aug 18 '16 at 6:02
1  
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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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