カスタムモジュールを使用してHTMLファイルをオーバーライドする方法


20

Magento 2で支払い方法のカスタムモジュールを開発しています。現在、ベンダーディレクトリからcc-form.htmlを使用しており、モジュールは正常に動作しています。以下のパスを参照してください。

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

HTMLファイルをオーバーライドする方法はありますか?

注:カスタム拡張を使用してオーバーライドしたいと思います。以下のパスを参照してください。

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

任意の助けをいただければ幸いです。ありがとうございました!


このフォームをいつ使用したかは、リンクまたは地図サイトを示してください。
MrTo-Kane

回答:


34

実用的なソリューション。

requirejs-config.jsファイルを以下のパスから作成または編集するだけです。

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

そして、requirejs-config.jsのコードの下に配置します

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

したがって、この方法で任意のhtmlファイルをオーバーライドできます。


モジュールセールスのメールテンプレートHTMLファイルでは動作しませんか?
fudu

14

テーマ支払いモジュール内にcc-form.htmlファイルを追加するだけです。

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

上記の場所で要件に応じて変更できます。

削除するvarルートと削除からフォルダをpub/static/frontendフォルダ。

コマンドを実行する必要があります php bin/magento setup:static-content:deploy

ブラウザのキャッシュをクリアして確認します。


私は私のテーマの下にcc-form.htmlを配置する場合、それがうまく動作することを知っています。しかし、拡張機能を作成しているので、テーマの下に配置することはできません。このファイルをモジュールのディレクトリに配置する必要があります。
マクワナケタン

1
ありがとう、rakesh。stackoverflow.com/questions/37430036/で

9

受け入れられた解決策は正しいですが、ここで「スタックオーバーフロー」から@AntonGuzの完全な回答をコピーします(非常によく説明されています)。

はいあります。pub staticを調べて、静的アセットへのパスがどのように構築されたかを確認できます。

使い方

すべてのアセットは、enter code here「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は、モジュール名とパスの有用な部分(folderの後web)で構成されていることがわかります。

ファイルを置き換える方法

あなたはファイルを持っています
vendor/magento/module-payment/view/frontend/web/template/payment/cc-form.html

srcをロードしたページで
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ます。「テンプレート」と「.html」という単語が自動的に追加されます。

そして今、あなたはRequireJSの設定を介してアプリケーションのこのファイルを置き換えることができます

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

requirejs-config.jsモジュール内のファイルに配置するこのコードスニペット。以上です。

おそらく、それは誰かが発生したときにそれを理解するのに役立つでしょう。


どのようにこのHTMLのためのJSファイルを追加および変更します
jibinジョージ・

4

Magento2のどのバージョンが必要なのかわかりませんが、Magento_Uiモジュールのテンプレートをオーバーライドする場合は、次のようなパスを指定する必要があります。

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

このファイルでは:

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

パスマッピングがあります。

/**
 * 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'
        }
    }
};
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.