如何覆盖自定义模块中的 HTML 文件

Question

我正在为 magento 2 中的支付方式开发自定义模块。目前我正在使用供应商目录中的 cc-form.html，并且该模块工作正常.请参阅下面的路径。

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

有什么方法可以覆盖 HTML 文件吗？

Answer 1

是的，有。您可以查看 pub static 以了解如何构建静态资产的路径。

工作原理

每个资产都可以通过它enter code heres "RequireJS ID" 从页面访问。它类似于真实路径，但有所不同。

例如文件http://magento.vg/static/adminhtml/Magento/backend/en_US/Magento_Theme/favicon.ico.

它的真实路径是/app/code/Magento/Theme/view/adminhtml/web/favicon.ico。
它的 RequireJS ID 是 Magento_Theme/favicon.ico。这意味着可以通过 require("text!Magento_Theme/favicon.ico") 或类似命令访问该文件。

你可以发现 RequireJS ID 由模块名称和路径的有用部分组成（在文件夹 web 之后）。

如何替换文件

所以你有文件
vendor/magento/module-payment/view/frontend/web/template/payment/cc-form.html

在页面上它加载了 src as
http://magento.vg/static/frontend/Magento/luma/en_US/Magento_Payment/template/payment/cc-form.html

所以它的 RequireJS ID 是
Magento_Payment/template/payment/cc-form.html

旁注：在 UI 组件中，它等于 Magento_Payment/payment/cc-form。自动添加单词 "template" 和“.html”。

现在您可以通过 RequireJS 配置替换此文件进行应用

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

您将此代码片段放入模块的 requirejs-config.js 文件中。仅此而已。

如何覆盖自定义模块中的 HTML 文件

How to override an HTML file in a custom module

magento2

工作原理

如何替换文件