¿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.