Magento2 - Come estendere il widget jQuery (configurable.js)


16

Sto creando un'estensione che sostituisce l'etichetta delle opzioni configurabili predefinita "Scegli un'opzione ..." con il nome dell'attributo, ad esempio "Scegli un colore ...".

Come posso estendere (non sovrascrivere!) Il widget jQuery configurable.js e modificare solo questa riga?

Dalla documentazione so che posso ignorare un widget jQuery, quindi ho fatto:

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

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

    });

    return $.silvan.configurable;
});

Come posso inizializzare questo file? Devo caricarlo tramite requirejs-config? La funzione mappa è solo per l'override giusto?

È possibile modificare solo questa riga? Si chiama da questa funzione:

_fillSelect: function (element) {}

Risposte:


27

Innanzitutto, devi assicurarti che il tuo modulo abbia Magento_ConfigurableProductin sequenza 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>

Assicurati di rigenerare l'elenco dei componenti in config.php, altrimenti la sequenza verrà ignorata ( http://devdocs.magento.com/guides/v2.2/extension-dev-guide/build/module-load-order.html )

Quindi aggiungi il requirejs-config.jsfile nella view/frontenddirectory con il codice:

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

Infine aggiungi il configurable.jsfile nella view/frontend/web/jsdirectory con:

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

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

    return $.silvan.configurable;
});

Non è possibile modificare una riga singola, ma è possibile modificare una singola funzione all'interno.


Come funziona la modifica di una funzione? Come chiamare il genitore?
Alex,

Puoi chiamare funzioni diverse da una che modifichi proprio come faceva parte del tuo widget. Il tuo silvan.configurableeredita automaticamente tutto dal genitore.
Bartłomiej Szubert,

2
Funziona benissimo, grazie @Ideo! La ricompensa verrà data in 7 ore (limite di scambio di stack). @Alex puoi chiamare il genitore usando this._super (); funzione. Vedi: learn.jquery.com/jquery-ui/widget-factory/extending-widgets/…
Silvan,

c'è qualcos'altro da fare? perché il mio file personalizzato non verrà caricato ... è stato esatto come è stato descritto sopra :-(
roman204

1
Funziona benissimo! @ roman204 Ho avuto lo stesso problema: assicurati di avere il nodo "sequenza" nel tuo file module.xml. Quindi è importante ricaricare l'ordine del modulo. L'unico modo per farlo al momento è disabilitare e riattivare il modulo in cui si inserisce la "sequenza" nel file module.xml. (Ulteriori informazioni: visualizza la parte blu in questa pagina: devdocs.magento.com/guides/v2.2/extension-dev-guide/build/… )
Stijn Duynslaeger - Echron,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.