Extension / remplacement de JS dans Magento 2

34

Comme Magento2 utilise RequireJS pour charger les scripts, et qu’il n’ya plus de dossier de skin , j’ai un problème:

Comment remplacer le fichier JS du module Magento par ma version modifiée?

Par exemple, opc-checkout-method.js, qui appartient à l'extension Magento_Checkout. Pour autant que je sache, ce n'est pas défini dans le fichier requirejs-config.js.

Mon extension est chargée après Magento_Checkout , donc ses données requirejs-config.js sont ajoutées à la fin du fichier requirejs-config résultant.

Ou devrais-je le faire d'une autre manière, sans remplacer le script entier?

DmitryR
la source
1
J'imagine que vous ne devriez pas remplacer le fichier autant que les fonctions sur l'objet chargé par le fichier.
Peter O'Callaghan

Réponses:

93

Il n'y a plus de dossier de skin, mais vous pouvez toujours utiliser des thèmes.

En guise de preuve de concept, j'ai utilisé votre exemple avec op-checkout-method.jsceci.

Conditions préalables:

  • Magento2-beta11 installé
  • Thème par défaut actif (vide).
  • Aucun fichier généré dans le pub/staticdossier (supprimez le dossier pub / static / frontend)

Actes:

  • Copié le op-checkout-method.jsfichier de son emplacement de module app/code/Magento/Checkout/view/frontend/web/js/opc-checkout-method.jsdans le thème vierge pourapp/design/frontend/Magento/blank/Magento_Checkout/web/js/opc-checkout-method.js
  • édité le fichier clone et ajouté un console.log('something')ou alert('something')dans la _createfonction du mage.opcCheckoutMethodwidget.
  • effacer le cache du navigateur.

Résultat:

  • Lorsque la page de paiement est chargée, mon alerte est affichée ou le texte enregistré dans la console.

Informations connexes:

Si je lance à partir de cli php dev/tools/Magento/Tools/View/deploy.php(le script qui publie les ressources statiques), mon nouveau fichier js est placé danspub/static/frontend/Magento/blank/en_US/Magento_Checkout/js/opc-checkout-method.js

[MODIFIER]

J'ai trouvé un moyen de le faire via un module.

En [Namespace]/[Module]/view/frontend/requirejs-config.jsplus ceci:

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/opc-checkout-method':'[Namespace]_[Module]/js/opc-checkout-method'
        }
    }
};

Créez ensuite le fichier [Namespace]/[Module]/view/frontend/web/js/opc-checkout-method.jsavec votre contenu.

À des fins de test, j'ai cloné le fichier d'origine et viens d'ajouter à nouveau un console.logdans la _createfonction.

Rappelez-vous également de régénérer les ressources publiques pour l'interface.

Marius
la source
Merci Marius! Est-il possible de faire des choses similaires dans l'extension?
DmitryR
Je ne pense pas que tu puisses faire ça d'une extension. Ce n'était pas possible dans magento 1 à moins que vous n'ayez complètement changé le modèle de caisse. Mais je vais chercher un moyen de le faire.
Marius
Merci encore, Marius. J'essaie d'implémenter la validation personnalisée, qui remplace celle par défaut, et je suis coincé avec les substitutions JS.
DmitryR
1
@DmitryR. Voir ma mise à jour de la réponse.
Marius
l'emplacement de requirejs-config.js est maintenant Vendor / Module / view / frontend / requirejs-config.js
Eugen Bogdanovich le
11

Voici le document officiel sur l'extension / le remplacement des composants JS par défaut: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html

Les commentaires sont les bienvenus!

Alex
la source
3
Bienvenue sur MagentoSE. Cette réponse serait plus utile pour les futurs utilisateurs si vous ajoutiez la réponse ici, au lieu de simplement le lien. Si le lien se rompt à l'avenir, les chercheurs ne trouveront pas les informations que vous référencez.
AreDubya
2
C'est un point juste, mais nous ajoutons 301 redirections lorsque les sujets changent afin de minimiser le risque de 404.
Steve Johnson