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?


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.


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!


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
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.