cómo extender archivos .js y .html en Magento 2
-
28-09-2020 - |
Pregunta
estoy extendiendo customer address
para estos tengo que modificar/ampliar vendor/Magento/module-ui
archivos principales.
es decir
root/vendor/magento/module-ui/view/base/web/js/form/components/collection.js
y
root/vendor/magento/module-ui/view/base/web/templates/form/components/collection.html
Cuando modifiqué los archivos principales, funciona bien, pero este no es un buen procedimiento/idea para ampliar.
Así que he creado el nombre del proveedor como Magento
en root/app/code/
y he colocado los archivos anteriores modificados en la misma carpeta en local.
es decir
root/app/code/magento/module-ui/view/base/web/js/form/components/collection.js
y
root/app/code/magento/module-ui/view/base/web/templates/form/components/collection.html
Después de colocar esos archivos, borré el caché.Pero todavía no muestra mis cambios.
he corrido php bin/magento setup:static-content:deploy
Comando también pero sin suerte.
¿Podría sugerirme cómo hacer esto?
Solución 2
Finalmente lo logré.
Crear requirejs-config.js
archivo de Aprendizaje/HelloWorld/view/base y pegue el siguiente código
var config = {
map: {
'*': {
'Magento_Ui/js/form/components/collection':'Learning_HelloWorld/js/form/components/collection'
}
}
};
Crear collection.js
archivo de Aprendizaje/HelloWorld/view/base/web/js/form/components y copie, pegue el código principal y modifíquelo.
/**
* 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');
}
});
});
Crear collection.html
archivo de Aprendizaje/HelloWorld/view/base/web/template/form/components ruta y pegue el código principal y modifíquelo
<div class="ui-tabs">
<!-- My Extra html code -->
<button type="button" data-bind="click: $parent.sendAddress.bind($parent, element)">
Send this Address
</button>
</div>
Ahora ejecute los siguientes comandos.
- configuración:actualizar
- configuración: contenido estático: implementar
Ahora funcionará.
No dude en preguntar si tiene alguna pregunta.
Otros consejos
Un módulo está registrado en una ruta, es por eso que puede leer desde el proveedor, pero no desde la aplicación/código.