チュートリアル: SXA Storefront のカスタム モジュールとレンダリングの作成

Version: 10.2
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

カスタム ソリューションを作成する際のストアフロント開発を簡素化するために、基本的な Sitecore 機能を維持しながら、標準レンダリングをカスタマイズできます。元のレンダリングをクローンして、クローンされたインスタンスに変更を加えることをお勧めします。

このチュートリアルでは、次の方法について説明します。

  • カスタム モジュールを作成する

  • コマース レンダリングをクローンする

  • カスタム モジュールをストアフロント サイトに追加する

  • データ フォルダーを作成し、データ ソース アイテム テンプレートを設定する

カスタム モジュールを作成する

レンダリングをクローンする前に、カスタマイズしたクローン レンダリングを保存できるカスタム モジュールを作成する必要があります。これは、モジュール内のアイテムをグループ化する Helix の原理に従います。

カスタム モジュールを作成するには:

  1. コンテンツ エディターで、/sitecore/System/Settings に移動して、[Feature] を右クリックし、[挿入 > フォルダー] をクリックして、カスタム モジュールを保持するフォルダーを作成します。

  2. [メッセージ] ダイアログ ボックスで、フォルダーの名前、たとえば、My custom modules と入力して、[OK] をクリックします。

  3. コンテンツ ツリーで、/sitecore/System/Settings/Feature に移動して右クリックし、カスタム モジュールを作成します。

  4. [新しいモジュールを作成する] ダイアログ ボックスで、モジュールの名前、たとえば、My custom module と入力し、[モジュール グループに追加する] フィールドで、手順 1 で作成したフォルダー (たとえば、Custom modules) を選択します。

  5. 残りのパラメーターのデフォルト値を受け入れるには、[続行] をクリックし、[閉じる] をクリックします。

    これで、新しいテナントまたはサイトを作成するとき、[テナントを作成する] および [新しい SXA サイトを作成する] ダイアログ ボックスで My custom module が使用できます。

コマース レンダリングをクローンする

一般に、新しいレンダリングを最初から作成するよりも、既存のレンダリングを取得してクローンを作成し、カスタマイズする方が簡単です。判断の目安として、「カスタム レンダリングを作成するかどうかを決定するためのフローチャート」を参照してください。

注記

Commerce Controllers は、対応するコントローラー レンダリング アイテムのレンダリング ビュー プロパティのパスを確認しません。このため、データ ソースを指定する必要があります。

コマース レンダリングをクローンするには:

  1. コンテンツ エディターで、クローンするレンダリング、たとえば、/sitecore/Layout/Renderings/Feature/Commerce Experience Accelerator/ に移動し、レンダリングをクローンします (たとえば、Shopping Cart Lines）。

  2. [派生レンダリングを作成] ダイアログ ボックスで、新しいレンダリングの名前、たとえば、Shopping Cart Lines Clone と入力し、[モジュールに追加] フィールドで、手順 2 で作成したモジュールを選択します。

  3. 残りのパラメーターのデフォルト値を受け入れるには、[続行] をクリックし、[閉じる] をクリックします。

カスタム モジュールをストアフロント サイトに追加する

クローンされたレンダリングを含むカスタム モジュールができたので、ストアフロント サイトで使用できるようにする必要があります。

カスタム モジュールをストアフロント サイトに追加するには:

  1. コンテンツ エディターで、/sitecore/Content/<テナント>/<サイト> に移動し、カスタム モジュールをサイトに追加します。

  2. クローンされたレンダリングをエクスペリエンス エディターで確認するには、/sitecore/Content/<テナント>/<サイト> に移動し、[Home] を右クリックして、[エクスペリエンス エディター] をクリックします。

    ツールボックスに、クローンされたレンダリングを含む新しいグループが表示されます。

    ツールボックスのカスタム モジュールとレンダリング。
注記

クローンした新しいレンダリングは、ストアフロント サイトに自動的に追加されるわけではありません。手順 1 を繰り返して、手動で追加する必要があります。

データ フォルダーを作成し、データ ソース アイテム テンプレートを設定する

専用のデータ ソースで機能するクローン レンダリングは、クローン プロセスの一部として作成された独自の新しいデータソース アイテムとフォルダー テンプレートを自動的に取得します。[派生レンダリングを作成] ダイアログ ボックスの [データソース] タブで選択したオプションに応じて、クローンされたレンダリングは元のデータソースから継承するか、元のデータソースのコピーで機能します。いずれにしても、クローンされたレンダリングは自動的に設定されず、サイト データ フォルダーの下の挿入オプションとして使用可能になるわけではありません。このため、フォルダー テンプレートに基づいて新しいカスタム フォルダーを作成し、挿入オプションとして設定された新しいデータソース テンプレートを使用して、カスタム レンダリングのデータソース アイテムを保持する必要があります。

データ フォルダーを作成し、データ ソースを設定するには:

  1. コンテンツ エディターで、/sitecore/Content/<テナント>/<サイト>/Data に移動し、[Commerce] を右クリックし、[挿入]、[フォルダー] をクリックします。[メッセージ] ダイアログ ボックスで、名前、たとえば、「My custom module」と入力し、[OK] をクリックします。

  2. リボンの [設定] タブで、[挿入オプション] セクションの [割り当て] をクリックします。

  3. [挿入オプション] ダイアログ ボックスで、/Templates/Feature/<My custom modules>/<My custom module> に移動し、クローンされたレンダリング フォルダー (たとえば、Shopping Cart Lines Clone フォルダー) をダブルクリックして、[選択済み] リストに移動し、[OK] をクリックします。

  4. リボン メニューの [表示] タブで、[標準フィールド] チェック ボックスをクリックします。

  5. リボン メニューの [ホーム] タブで、[挿入] セクションにあるカスタム レンダリングのフォルダー テンプレートの名前 (たとえば、My Custom Shopping Cart Lines Folder) をクリックします。[メッセージ] ダイアログ ボックスで、新しいアイテムの名前を、たとえば、My Custom Shopping Cart Lines と入力して、[OK] をクリックします。

  6. コンテンツ エディターで、クローンされたレンダリング (/sitecore/Layout/Renderings/Feature/My custom modules/My custom module/<cloned rendering) に移動します。

  7. [コンテンツ] タブの [データ] セクションで、[データ ソース] フィールドを更新して、[データ] 下の新しいカスタム モジュール フォルダー、たとえば、query:./ancestor::*[@@templatename='Site']/Data/Commerce/My custom module を見つけて、変更を保存します。

  8. エクスペリエンス エディターを開くか更新して、カスタム レンダリングをページにドラッグします。

  9. レンダリングをクリックし、レンダリング ツールバーの [関連するコンテンツを追加または変更する] をクリックし、[関連するコンテンツを追加する] をクリックします。

  10. [関連コンテンツを選択] ダイアログ ボックスで、[データ] の横の [作成] をクリックし、[メッセージ] ダイアログ ボックスで、名前を、たとえば、My Custom Shopping Cart Lines と入力して、[OK] をクリックし、変更を保存します。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、