Magento2 - Comment étendre le widget jQuery (configurable.js)


17

Je crée une extension qui remplace le libellé des options configurables par défaut «Choisir une option ...» par le nom de l'attribut, par exemple «Choisir une couleur ...».

Comment puis-je étendre (pas remplacer!) Le widget jQuery configurable.js et modifier uniquement cette ligne?

Je sais d'après la documentation que je peux remplacer un widget jQuery, alors j'ai fait:

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

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

    });

    return $.silvan.configurable;
});

Comment puis-je initialiser ce fichier? Dois-je le charger via requirejs-config? La fonction de carte sert uniquement à remplacer le droit?

Est-il possible de modifier uniquement cette ligne? Cela s'appelle de cette fonction:

_fillSelect: function (element) {}

Réponses:


28

Tout d'abord, vous devez vous assurer que votre module a Magento_ConfigurableProducten séquence dans 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>

Assurez-vous de régénérer la liste des composants dans config.php, sinon la séquence sera ignorée ( http://devdocs.magento.com/guides/v2.2/extension-dev-guide/build/module-load-order.html )

Ajoutez ensuite le requirejs-config.jsfichier dans le view/frontendrépertoire avec le code:

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

Enfin, ajoutez le configurable.jsfichier dans le view/frontend/web/jsrépertoire avec:

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

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

    return $.silvan.configurable;
});

Vous ne pouvez pas modifier une seule ligne, mais vous pouvez modifier une seule fonction à l'intérieur.


Comment fonctionne la modification d'une fonction? Comment appeler le parent?
Alex

Vous pouvez appeler des fonctions autres que celles que vous modifiez comme si elles faisaient partie de votre widget. Votre silvan.configurablehérite automatiquement de tout parent.
Bartłomiej Szubert

2
Cela fonctionne très bien, merci @Ideo! La prime sera donnée en 7 heures (limite d'échange de pile). @Alex, vous pouvez appeler le parent en utilisant this._super (); une fonction. Voir: learn.jquery.com/jquery-ui/widget-factory/extending-widgets/…
Silvan

y a-t-il autre chose à faire? parce que mon fichier personnalisé ne sera pas chargé ... est-ce exactement comme il est décrit ci-dessus :-(
roman204

1
Cela fonctionne très bien! @ roman204 J'ai le même problème: assurez-vous d'avoir le nœud "séquence" dans votre fichier module.xml. Ensuite, il est important de recharger l'ordre des modules. La seule façon de le faire pour le moment est de désactiver et de réactiver le module où vous placez la "séquence" dans le fichier module.xml. (Plus d'infos: voir la partie bleue sur cette page: devdocs.magento.com/guides/v2.2/extension-dev-guide/build/… )
Stijn Duynslaeger - Echron
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.