¿Cómo anular un archivo HTML usando un módulo personalizado?


20

Estoy desarrollando un módulo personalizado para el método de pago en Magento 2. Actualmente, estoy usando cc-form.html del directorio de proveedores y el módulo funciona bien. Ver abajo el camino:

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

¿Hay alguna forma de anular el archivo HTML?

Nota: Me gustaría anularlo usando una extensión personalizada. Ver abajo el camino:

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

Cualquier ayuda sería apreciada. ¡Gracias!


cuando usó este formulario, muestre el enlace o el mapa del sitio.
MrTo-Kane

Respuestas:


34

Solución de trabajo

Simplemente cree o edite el archivo requirejs-config.js desde la ruta a continuación.

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

Y coloque el siguiente código en requirejs-config.js

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

Entonces podemos anular cualquier archivo html de esta manera.


no funciona para el archivo html de plantilla de correo electrónico en ventas de módulos?
fudu

14

Simplemente puede agregar su archivo cc-form.html dentro de su módulo de pago de tema.

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

Puede cambiar según sus requisitos en el lugar anterior.

Eliminar la carpeta var de la raíz y eliminar la pub/static/frontendcarpeta.

Debes haber ejecutado el comando php bin/magento setup:static-content:deploy

Borre la memoria caché de su navegador y verifique.


Sé que funcionará bien si coloco cc-form.html debajo de mi tema. pero estoy creando una extensión, así que no puedo colocarla debajo del tema. Debo poner este archivo en el directorio del módulo.
Makwana Ketan

1
Gracias rakesh Encontré la solución en stackoverflow.com/questions/37430036/…
Makwana Ketan

9

La solución aceptada es correcta, pero copio aquí la respuesta completa de @AntonGuz del "Desbordamiento de pila" (muy bien explicado):

Sí hay. Puede mirar en pub static para ver cómo se construyó la ruta al activo estático.

Cómo funciona

Se puede acceder a todos los activos desde la página mediante su enter code here"Requiere ID de JS". Es similar al camino real, pero variado.

Por ejemplo archivo http://magento.vg/static/adminhtml/Magento/backend/en_US/Magento_Theme/favicon.ico.

Su verdadero camino es /app/code/Magento/Theme/view/adminhtml/web/favicon.ico. Es RequireJS ID es Magento_Theme/favicon.ico. Esto significa que se puede acceder al archivo a través de require("text!Magento_Theme/favicon.ico")un comando similar.

Puede encontrar que RequireJS ID consiste en el nombre del módulo y la parte útil de la ruta (después de la carpeta web).

¿Cómo puedo reemplazar un archivo?

Entonces tienes archivo
vendor/magento/module-payment/view/frontend/web/template/payment/cc-form.html

En la página se cargó con src como
http://magento.vg/static/frontend/Magento/luma/en_US/Magento_Payment/template/payment/cc-form.html

Entonces su ID de RequireJS es
Magento_Payment/template/payment/cc-form.html

Nota al margen: dentro de los componentes de la interfaz de usuario es igual Magento_Payment/payment/cc-form. Las palabras "plantilla" y ".html" se agregan automáticamente.

Y ahora puede reemplazar este archivo para la aplicación a través de la configuración RequireJS

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

Este fragmento de código lo coloca en el requirejs-config.jsarchivo de su módulo. Eso es todo.

Quizás ayude a alguien a comprender cómo ocurre.


¿Cómo agregar y modificar el archivo JS para este html?
jibin george

4

No sé desde qué versión de Magento2 se requiere, pero si desea anular la plantilla del módulo Magento_Ui, debe proporcionar una ruta como esta:

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

Porque en este archivo:

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

Hay mapeo de ruta:

/**
 * 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'
        }
    }
};
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.