1. レンダリング

ウォークスルー
Storefront用のカスタムモジュール作成とレンダリング

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

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

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

このウォークスルーでは、以下の方法を説明します:

  • カスタムモジュールを作成してください
  • コマースレンダリングのクローン
  • カスタムモジュールをストアフロントサイトに追加
  • データフォルダを作成し、データソースのアイテムテンプレートを設定します

カスタムモジュールを作成してください

レンダリングをクローンする前に、カスタマイズされたクローンレンダリングを格納できるカスタムモジュールを作成する必要があります。これはモジュール内のアイテムをまとめるというHelixの原則に従っています。

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

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

  2. メッセージダイアログボックスでフォルダ名を入力してください。例えば「*My custom modules」*といった場所で、OKをクリックします。

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

  4. 「 新しいモジュールを作成 」ダイアログボックスで、モジュール名(例えば 「My custom module 」)を入力し、「 Add to module group 」フィールドでステップ1で作成したフォルダ(例

    modules)を選択します。

  5. 残りのパラメータのデフォルト値を受け入れるには、「 進行 」をクリックしてから 「閉じる」をクリックしてください。

    新しいテナントやサイトを作成すると、「 テナント作成 」と「 新しいSXAサイトを作成する 」ダイアログボックスで「私のカスタムモジュール」が利用可能になります。

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

一般的には、既存のレンダリングをクローンしてカスタマイズする方が、一から新しいレンダリングを作成するよりも簡単です。判断の助けとして、カスタムレンダリングを作成するかどうかはフローチャートを参照してください。

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

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

  1. コンテンツエディターで、クローンしたいレンダリング(例えば /sitecore/Layout/Renderings/Feature/Commerce Experience Accelerator/)に移動し、ショッピングカートラインなどの レンダリングをクローンします。
  2. 「 派生レンダリングを作成する 」ダイアログボックスで、新しいレンダリングの名前(例えば「ショッピングカートラインのクローン」)を入力し、 モジュールに追加 フィールドでステップ2で作成したモジュールを選択します。
  3. 残りのパラメータのデフォルト値を受け入れるには、「 進行 」をクリックして 閉じてください。

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

クローンレンダリングを含むカスタムモジュールができたので、それをストアフロントサイトで利用可能にしなければなりません。

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

  1. コンテンツエディターで /sitecore/Content// に移動し、カスタムモジュールをサイトに追加してください。

  2. Experience Editorでクローンレンダリングを見るには、/sitecore/Content//にアクセスし、Homeを右クリックしてExperience Editorをクリックしてください。

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

    Custom module and rendering in the Toolbox.

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

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

専用のデータソースで動作するクローンレンダリングは、クローン処理の一環として自動的に新しいデータソースアイテムとフォルダテンプレートが作成されます。「派生レンダリングを作成する」ダイアログボックスのDatasourceタブで選択するオプションによって、クローンレンダリングは元のデータソースから継承するか、元のデータソースのコピーで動作します。いずれにせよ、クローンレンダリングは自動的に設定されておらず、サイトデータフォルダ内の挿入オプションとして利用されるわけではありません。このため、カスタムレンダリング用のデータソース項目を保持するためにフォルダテンプレートを基に新しいカスタムフォルダを作成し、新しいデータソーステンプレートを挿入オプションとして設定する必要があります。

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

  1. コンテンツエディターで /sitecore/Content///Dataに行き、 Commerce を右クリックして「 **Insert, Folder」**をクリックします。 メッセージ ダイアログボックスで名前を入力してください。例えば「My custom module」といった名前を「OK」と入力し、 OKをクリックします。
  2. リボンメニューの 「構成 」タブの 「オプション挿入 」セクションで「 割り当て」をクリックします。
  3. 「 オプションを挿入 」ダイアログボックスで /Templates/Feature// に行き、クローンされたレンダリングフォルダ(例
    )をダブルクリックして「 選択 済みリスト」に移動し、「 確定」をクリックします。
  4. リボンメニューの 「ビュー 」タブで「 標準フィールド 」チェックボックスをクリックしてください。
  5. リボンメニューの ホーム タブの 挿入 セクションで、カスタムレンダリング用のフォルダテンプレート名(例
    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. コンテンツタブのDataセクションで、Dataソース欄を更新して新しいカスタムモジュールフォルダを見つけてください。例えば、query:./ancestor::*@@templatename='Site'/Data/Commerce/My custom moduleして変更を保存します。
  8. エクスペリエンスエディターを開くか更新し、カスタムレンダリングをページにドラッグしてください。
  9. レンダリングをクリックし、レンダリングツールバーで 「関連コンテンツを追加」または「変更」 をクリックし、「 関連コンテンツを追加」をクリックします。
  10. 「 関連コンテンツ選択 」ダイアログボックスの「 データ」横で「 作成 」をクリックし、 メッセージ ダイアログボックスで「 My Custom Shopping Cart Lines」などの名前を入力し、「 **OK」**をクリックして変更を保存します。
この記事を改善するための提案がある場合は、 お知らせください!