comment étendre les fichiers .js et .html dans Magento 2
-
28-09-2020 - |
Question
je prolonge customer address
pour ceux-là, je dois modifier/étendre vendor/Magento/module-ui
fichiers de base.
c'est à dire
root/vendor/magento/module-ui/view/base/web/js/form/components/collection.js
et
root/vendor/magento/module-ui/view/base/web/templates/form/components/collection.html
Lorsque j'ai modifié les fichiers principaux, cela fonctionne bien, mais ce n'est pas une bonne procédure/idée à étendre.
J'ai donc créé le nom du fournisseur comme Magento
dans root/app/code/
et j'ai placé les fichiers modifiés ci-dessus dans le même dossier en local.
c'est à dire
root/app/code/magento/module-ui/view/base/web/js/form/components/collection.js
et
root/app/code/magento/module-ui/view/base/web/templates/form/components/collection.html
Après avoir placé ces fichiers, j'ai vidé le cache.Mais mes modifications ne sont toujours pas affichées.
j'ai couru php bin/magento setup:static-content:deploy
commande aussi mais pas de chance.
Pourriez-vous s'il vous plaît me suggérer comment procéder ?
La solution 2
J'ai enfin réussi moi-même.
Créer requirejs-config.js
fichier de Apprentissage/HelloWorld/view/base et collez le code ci-dessous
var config = {
map: {
'*': {
'Magento_Ui/js/form/components/collection':'Learning_HelloWorld/js/form/components/collection'
}
}
};
Créer collection.js
fichier de Apprentissage/HelloWorld/view/base/web/js/form/components et copiez-collez le code principal et modifiez-le.
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'underscore',
'mageUtils',
'uiRegistry',
'uiComponent',
'uiLayout',
'Magento_Ui/js/modal/confirm'
], function (_, utils, registry, Component, layout, confirm) {
'use strict';
var childTemplate = {
parent: '${ $.$data.name }',
name: '${ $.$data.childIndex }',
dataScope: '${ $.name }',
nodeTemplate: '${ $.$data.name }.${ $.$data.itemTemplate }'
};
return Component.extend({
defaults: {
lastIndex: 0,
template: 'Learning_HelloWorld/form/components/collection'
},
/* my custom methods */
sendAddress: function (elem) {
var self = this;
self._sendAddress(elem);
},
/* my custom methods */
_sendAddress: function (elem) {
this.bubble('update');
}
});
});
Créer collection.html
fichier de Apprentissage/HelloWorld/view/base/web/template/form/components chemin et collez le code principal et modifiez-le
<div class="ui-tabs">
<!-- My Extra html code -->
<button type="button" data-bind="click: $parent.sendAddress.bind($parent, element)">
Send this Address
</button>
</div>
Exécutez maintenant les commandes ci-dessous.
- configuration:mise à niveau
- configuration: contenu statique: déploiement
Maintenant, ça va marcher.
N'hésitez pas à demander si vous avez des questions.
Autres conseils
Un module est enregistré sous un seul chemin, c'est pourquoi il peut lire à partir du fournisseur, mais pas à partir de l'application/du code.