como estender arquivos .js e .html no Magento 2
-
28-09-2020 - |
Pergunta
estou estendendo customer address
para estes eu tenho que modificar/estender vendor/Magento/module-ui
arquivos principais.
ou seja
root/vendor/magento/module-ui/view/base/web/js/form/components/collection.js
e
root/vendor/magento/module-ui/view/base/web/templates/form/components/collection.html
Quando modifiquei os arquivos principais, ele está funcionando bem, mas esse não é um bom procedimento/ideia para estender.
Então, criei o nome do fornecedor como Magento
em root/app/code/
e coloquei os arquivos modificados acima na mesma pasta local.
ou seja
root/app/code/magento/module-ui/view/base/web/js/form/components/collection.js
e
root/app/code/magento/module-ui/view/base/web/templates/form/components/collection.html
Depois de colocar esses arquivos, limpei o cache.Mas ainda não está mostrando minhas alterações.
eu corri php bin/magento setup:static-content:deploy
comando também, mas sem sorte.
Você poderia me sugerir como fazer isso?
Solução 2
Finalmente consegui a mim mesmo.
Criar requirejs-config.js
arquivo de Aprendizado/HelloWorld/visualização/base e cole o código abaixo
var config = {
map: {
'*': {
'Magento_Ui/js/form/components/collection':'Learning_HelloWorld/js/form/components/collection'
}
}
};
Criar collection.js
arquivo de Learning/HelloWorld/view/base/web/js/form/components e copie, cole o código principal e modifique-o.
/**
* 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');
}
});
});
Criar collection.html
arquivo de Learning/HelloWorld/view/base/web/template/formulário/componentes caminho e cole o código principal e modifique-o
<div class="ui-tabs">
<!-- My Extra html code -->
<button type="button" data-bind="click: $parent.sendAddress.bind($parent, element)">
Send this Address
</button>
</div>
Agora execute os comandos abaixo.
- configuração: atualização
- configuração: conteúdo estático: implantar
Agora vai funcionar.
Sinta-se à vontade para perguntar se tiver alguma dúvida.
Outras dicas
Um módulo é registrado em um caminho, por isso ele pode ler do fornecedor, mas não do aplicativo/código.