Come sovrascrivere un file HTML usando un modulo personalizzato?


20

Sto sviluppando un modulo personalizzato per il metodo di pagamento in Magento 2. Attualmente sto usando cc-form.html dalla directory del fornitore e il modulo funziona bene. Vedi sotto il percorso:

vendor / Magento / modulo di pagamento / view / frontend / web / template / pagamento / cc-form.html

C'è un modo per sovrascrivere il file HTML?

Nota: vorrei sostituirlo utilizzando un'estensione personalizzata. Vedi sotto il percorso:

app / code / Namespace / modulo / view / frontend / web / template / pagamento / cc-form.html

Qualsiasi aiuto sarebbe apprezzato. Grazie!


quando hai usato questo modulo, ti preghiamo di mostrare link o mappa del sito.
MrTo-Kane,

Risposte:


34

Soluzione di lavoro.

Basta creare o modificare il file requestjs-config.js dal percorso seguente.

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

E posiziona sotto il codice in requestjs-config.js

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

Quindi possiamo sovrascrivere qualsiasi file html in questo modo.


non funziona per il file html del modello e-mail nelle vendite dei moduli?
fudu,

14

Puoi semplicemente aggiungere il tuo file cc-form.html all'interno del modulo di pagamento del tema.

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

È possibile modificare in base alle proprie esigenze in alto.

Rimuovere la cartella var dalla radice e rimuovere la pub/static/frontendcartella.

Devi avere eseguito il comando php bin/magento setup:static-content:deploy

Svuota la cache del browser e controlla.


So che funzionerà bene se inserisco cc-form.html nel mio tema. ma sto creando l'estensione, quindi non posso inserirla nel tema. devo inserire questo file nella directory del modulo.
Makwana Ketan,

1
Grazie Rakesh. ho trovato la soluzione su stackoverflow.com/questions/37430036/…
Makwana Ketan,

9

La soluzione accettata è corretta, ma copio qui la risposta completa di @AntonGuz dallo "Stack Overflow" (molto ben spiegato):

Si C'è. Puoi guardare in pub static per vedere come viene costruito il percorso dell'asset statico.

Come funziona

Ogni risorsa è accessibile dalla pagina dal suo enter code here"RequireJS ID". È simile al percorso reale, ma vario.

Ad esempio il file http://magento.vg/static/adminhtml/Magento/backend/en_US/Magento_Theme/favicon.ico.

È il vero percorso /app/code/Magento/Theme/view/adminhtml/web/favicon.ico. È l'ID RequireJS Magento_Theme/favicon.ico. Ciò significa che il file potrebbe essere accessibile tramite require("text!Magento_Theme/favicon.ico")un comando simile.

È possibile scoprire che l'ID RequireJS è costituito dal nome del modulo e dalla parte utile del percorso (dopo la cartella web).

Come posso sostituire un file

Quindi hai un file
vendor/magento/module-payment/view/frontend/web/template/payment/cc-form.html

Nella pagina è stato caricato con src come
http://magento.vg/static/frontend/Magento/luma/en_US/Magento_Payment/template/payment/cc-form.html

Quindi è il suo ID RequireJS
Magento_Payment/template/payment/cc-form.html

Nota a margine: roba all'interno dei componenti dell'interfaccia utente è uguale a Magento_Payment/payment/cc-form. Le parole "template" e ".html" vengono aggiunte automaticamente.

E ora puoi sostituire questo file per l'applicazione tramite la configurazione di RequireJS

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

Questo frammento di codice inserito nel requirejs-config.jsfile nel modulo. Questo è tutto.

Forse aiuterà qualcuno a capire come si presenta.


Come si aggiunge e si modifica il file JS per questo html
jibin george il

4

Non so da quale versione di Magento2 è richiesto ma se si desidera sovrascrivere il modello dal modulo Magento_Ui, è necessario fornire un percorso come questo:

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

Perché in questo file:

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

C'è una mappatura del percorso:

/**
 * 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'
        }
    }
};
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.