Como substituir um arquivo HTML usando um módulo personalizado?

20

Estou desenvolvendo um módulo personalizado para método de pagamento no Magento 2. Atualmente, estou usando o cc-form.html do diretório de fornecedores e do módulo funcionando bem. Veja abaixo o caminho:

fornecedor / magento / module-payment / view / frontend / web / template / payment / cc-form.html

Existe alguma maneira de substituir o arquivo HTML?

Nota: gostaria de substituí-lo usando uma extensão personalizada. Veja abaixo o caminho:

app / code / Namespace / Module / view / frontend / web / template / payment / cc-form.html

Qualquer ajuda seria apreciada. Obrigado!

Makwana Ketan
fonte
Quando você usou este formulário, mostre o link ou o mapa do site.
MrTo-Kane

Respostas:

34

Solução de trabalho.

Basta criar ou editar o arquivo requirejs-config.js no caminho abaixo.

/app/code/Namespace/Module/view/frontend/requirejs-config.js

E coloque o código abaixo em requirejs-config.js

var config = {
    map: {
        '*': {
          'Magento_Payment/template/payment/cc-form.html': 
              'Namespace_Module/template/payment/cc-form.html'
        }
  }
};

Assim, podemos substituir qualquer arquivo html dessa maneira.

Makwana Ketan
fonte
não funciona para o arquivo html do modelo de email nas vendas de módulos?
Fudu
14

Você pode adicionar seu arquivo cc-form.html ao módulo de pagamento de temas.

<mage_dir>/app/design/frontend/{Package}/{themename}/Magento_Payment/web/template/payment/cc-form.html

Você pode alterar de acordo com seus requisitos no local acima.

Remova a pasta var da raiz e remova a pub/static/frontendpasta.

Você deve ter o comando run php bin/magento setup:static-content:deploy

Limpe o cache do navegador e verifique.

Rakesh Jesadiya
fonte
Eu sei que funcionará bem se eu colocar o cc-form.html no meu tema. mas estou criando a extensão, então não posso colocá-la no tema. Eu devo ter que colocar este arquivo no diretório do módulo.
Makwana Ketan
1
Obrigado, rakesh. Eu encontrei a solução no stackoverflow.com/questions/37430036/...
Makwana Ketan
9

A solução aceita está correta, mas copio aqui a resposta completa do @AntonGuz do "Stack Overflow" (muito bem explicado):

Sim existe. Você pode procurar no pub static para ver como o caminho para o ativo estático é construído.

Como funciona

Todo ativo é acessível a partir da página por meio de enter code here"RequireJS ID". É semelhante ao caminho real, mas variado.

Por exemplo arquivo http://magento.vg/static/adminhtml/Magento/backend/en_US/Magento_Theme/favicon.ico.

É o verdadeiro caminho /app/code/Magento/Theme/view/adminhtml/web/favicon.ico. É RequireJS ID é Magento_Theme/favicon.ico. Isso significa que o arquivo pode ser acessado via require("text!Magento_Theme/favicon.ico")ou comando semelhante.

Você pode descobrir que o RequireJS ID consiste no nome do módulo e parte útil do caminho (após a pasta web).

Como posso substituir um arquivo

Então você tem arquivo
vendor/magento/module-payment/view/frontend/web/template/payment/cc-form.html

Na página carregou com src como
http://magento.vg/static/frontend/Magento/luma/en_US/Magento_Payment/template/payment/cc-form.html

Portanto, seu RequireJS ID é
Magento_Payment/template/payment/cc-form.html

Nota lateral: componentes internos da interface do usuário equivalem a Magento_Payment/payment/cc-form. As palavras "modelo" e ".html" são adicionadas automaticamente.

E agora você pode substituir esse arquivo para aplicação via RequireJS config

var config = {
  "map": {
    "*": {
      "Magento_Payment/template/payment/cc-form.html": 
          "<OwnBrand>_<OwnModule>/template/payment/cc-form.html"
    }
  }
};

Este trecho de código que você coloca no requirejs-config.jsarquivo em seu módulo. Isso é tudo.

Talvez ajude alguém a entender como ocorre.

Siarhey Uchukhlebau
fonte
Como você adiciona e modifica o arquivo JS para este html
jibin george
4

Não sei desde qual versão do Magento2 é necessária, mas se você deseja substituir o modelo do módulo Magento_Ui, é necessário fornecer um caminho como este:

var config = {
    map: {
        "*": {
            'ui/template/form/element/select.html':'Vendor_Module/templates/form/element/select.html'
        }
    }
};

Porque neste arquivo:

fornecedor / magento / module-ui / view / base / requirejs-config.js

Há mapeamento de caminho:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    paths: {
        'ui/template': 'Magento_Ui/templates'
    },
    map: {
        '*': {
            uiElement:      'Magento_Ui/js/lib/core/element/element',
            uiCollection:   'Magento_Ui/js/lib/core/collection',
            uiComponent:    'Magento_Ui/js/lib/core/collection',
            uiClass:        'Magento_Ui/js/lib/core/class',
            uiEvents:       'Magento_Ui/js/lib/core/events',
            uiRegistry:     'Magento_Ui/js/lib/registry/registry',
            consoleLogger:  'Magento_Ui/js/lib/logger/console-logger',
            uiLayout:       'Magento_Ui/js/core/renderer/layout',
            buttonAdapter:  'Magento_Ui/js/form/button-adapter'
        }
    }
};
embed0
fonte