Wie überschreibe ich eine HTML-Datei mit einem benutzerdefinierten Modul?


20

Ich entwickle ein benutzerdefiniertes Modul für die Zahlungsmethode in Magento 2. Derzeit verwende ich cc-form.html aus dem Anbieterverzeichnis und das Modul, das einwandfrei funktioniert. Siehe unten Pfad:

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

Gibt es eine Möglichkeit, HTML-Dateien zu überschreiben?

Hinweis: Ich möchte es mit einer benutzerdefinierten Erweiterung überschreiben. Siehe unten Pfad:

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

Jede Hilfe wäre dankbar. Vielen Dank!


wann hast du dieses formular benutzt, zeige bitte link oder map site
MrTo-Kane

Antworten:


34

Funktionierende Lösung.

Erstellen oder bearbeiten Sie einfach die Datei requirejs-config.js unter folgendem Pfad.

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

Und platzieren Sie den folgenden Code in requirejs-config.js

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

So können wir jede HTML-Datei auf diese Weise überschreiben.


funktioniert nicht für E-Mail-Vorlage HTML-Datei in Modulverkäufen?
Fudu

14

Sie können einfach Ihre cc-form.html-Datei in Ihr Themen-Zahlungsmodul einfügen.

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

Sie können entsprechend Ihren Anforderungen an der oben genannten Stelle ändern.

Entfernen Sie den var- Ordner aus dem Stammverzeichnis und entfernen Sie den pub/static/frontendOrdner.

Sie müssen den Befehl ausgeführt haben php bin/magento setup:static-content:deploy

Leeren Sie Ihren Browser-Cache und prüfen Sie.


Ich weiß, dass es gut funktionieren wird, wenn ich cc-form.html unter meinem Thema platziere. Aber ich erstelle eine Erweiterung, damit ich sie nicht unter Thema platzieren kann. ich muss diese Akte unter das Verzeichnis des Moduls setzen müssen.
Makwana Ketan

1
Vielen Dank, Rakesh. Ich fand die Lösung bei stackoverflow.com/questions/37430036/…
Makwana Ketan

9

Akzeptierte Lösung ist richtig, aber ich kopiere hier die vollständige Antwort von @AntonGuz aus dem "Stack Overflow" (sehr gut erklärt):

Ja da ist. Sie können in pub static nachsehen, wie der Pfad zum statischen Asset aufgebaut ist.

Wie es funktioniert

Auf jedes Asset kann über die Seite mit der enter code hereID "RequireJS ID" zugegriffen werden. Es ähnelt dem realen Weg, ist aber abwechslungsreich.

Zum Beispiel Datei http://magento.vg/static/adminhtml/Magento/backend/en_US/Magento_Theme/favicon.ico.

Es ist der wahre Weg /app/code/Magento/Theme/view/adminhtml/web/favicon.ico. Es ist RequireJS ID ist Magento_Theme/favicon.ico. Dies bedeutet, dass auf die Datei über einen require("text!Magento_Theme/favicon.ico")oder einen ähnlichen Befehl zugegriffen werden kann.

Sie können feststellen, dass die RequireJS-ID aus dem Modulnamen und einem nützlichen Teil des Pfads (nach dem Ordner web) besteht.

Wie kann ich eine Datei ersetzen?

Sie haben also eine Akte
vendor/magento/module-payment/view/frontend/web/template/payment/cc-form.html

Auf der Seite wurde es mit src als geladen
http://magento.vg/static/frontend/Magento/luma/en_US/Magento_Payment/template/payment/cc-form.html

So ist seine RequireJS ID
Magento_Payment/template/payment/cc-form.html

Randnotiz: Innerhalb UI-Komponenten stopft es gleich Magento_Payment/payment/cc-form. Die Wörter "template" und ".html" werden automatisch hinzugefügt.

Und jetzt können Sie diese Datei für die Anwendung über RequireJS config ersetzen

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

Dieses Code-Snippet, das Sie requirejs-config.jsin Ihrem Modul in die Datei einfügen . Das ist alles.

Vielleicht hilft es jemandem zu verstehen, wie es auftritt.


Wie beurteilen Sie die JS - Datei für diesen html hinzufügen und ändern
Jibin george

4

Ich weiß nicht, seit welcher Version von Magento2 es erforderlich ist, aber wenn Sie eine Vorlage aus dem Magento_Ui-Modul überschreiben möchten, müssen Sie den folgenden Pfad angeben:

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

Weil in dieser Datei:

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

Es gibt eine Pfadzuordnung:

/**
 * 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'
        }
    }
};
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.