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

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

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

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

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

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

  • コマースレンダリングのクローン作成

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

  • データ フォルダーを作成し、データ ソース項目テンプレートを構成する

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

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

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

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

  2. Messageダイアログボックスで、フォルダの名前(My custom modulesなど)を入力し、「OK」をクリックします。

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

  4. Create new moduleダイアログボックスで、モジュールの名前 (My custom moduleなど) を入力し、Add to module groupフィールドで、手順1で作成したフォルダ (カスタムモジュールなど) を選択します。

  5. 残りのパラメータのデフォルト値を受け入れるには、「 Proceed 」をクリックし、「 Close」をクリックします。

    これで、新しいテナントまたはサイトを作成すると、Create a tenantとCreate a new SXA siteダイアログ ボックスで マイ カスタム モジュールを使用できるようになりました。

コマースレンダリングのクローン作成

一般に、新しいレンダリングを最初から作成するよりも、既存のレンダリングをクローンしてカスタマイズする方が簡単です。決定するには、フローチャートを参照して、カスタムレンダリングを作成するかどうかを決定します。

メモ

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

Commerceレンダリングをクローンするには:

  1. コンテンツ エディタで、クローンを作成するレンダリング ( /sitecore/Layout/Renderings/Feature/Commerce Experience Accelerator/など) に移動し、レンダリング (ショッピング カートの明細など) を クローンします。

  2. Create derivative renderingダイアログボックスで、新しいレンダリングの名前(Shopping Cart Lines Cloneなど)を入力し、Add to moduleフィールドで手順2で作成したモジュールを選択します。

  3. 残りのパラメータのデフォルト値を受け入れるには、「 Proceed 」をクリックしてCloseをクリックします。

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

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

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

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

  2. クローン レンダリングをエクスペリエンス エディターで表示するには、/sitecore/Content/<tenant>/<site>, right-click Homeに移動してExperience Editorをクリックします。

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

    Custom module and rendering in the Toolbox.
手記

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

データ フォルダーを作成し、データ ソース項目テンプレートを構成する

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

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

  1. コンテンツ エディターで /sitecore/Content/<tenant>/<site>/Dataに移動し、Commerceを右クリックしてInsert, Folderをクリックします。 Messageダイアログボックスで、名前(例:My custom module)を入力し、「 OK」をクリックします。

  2. リボン メニューのConfigureタブのInsert Optionsセクションで、Assignをクリックします。

  3. Insert Optionsダイアログボックスで、/Templates/Feature/<My custom modules>/<My custom module>に移動し、クローンレンダリングフォルダ(Shopping Cart Lines Clone Folderなど)をダブルクリックしてSelectedリストに移動し、OKをクリックします。

  4. リボン メニューのViewタブで、Standard fieldsチェック ボックスをオンにします。

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

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

  7. ContentタブのDataセクションで、Data sourceフィールドを更新して、Dataの下の新しいカスタム モジュール フォルダーを見つけます (例: query:./ancestor::*@@templatename='Site'/Data/Commerce/My custom moduleして変更を保存します)。

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

  9. レンダリングをクリックし、レンダリング ツールバーでAdd or change the associated contentをクリックしてAdd associated contentをクリックします。

  10. Select the Associated Contentダイアログボックスで、「Data」の横にある「Create」をクリックし、「Message」ダイアログボックスで名前(My Custom Shopping Cart Linesなど)を入力し、「OK」をクリックして、変更を保存します。

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

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