ウォークスルー

オーバーライドテンプレートの作成

プレゼンテーションは通常、ページタイプテンプレートの標準値に基づいて設定されます。同じソリューション内で各店舗ごとにユニークなプレゼンテーションをサポートし、各サイトごとにカタログテンプレートを用意しなくても、テンプレートからページへのデザインマッピングを利用できます。

Helixのガイドラインに従い、以下の図に示すように、さまざまなテンプレートタイプが使用されています。オーバーライドテンプレートを使用すると、ページタイプテンプレートは他の基本テンプレートから継承するコンテナとなり、テンプレート間のデザインマッピングがページデザインを決定します。これはページをレンダリングするために必要なデータ構造とデータ継承を定義するテンプレートです。

ストアフロントサイトテンプレートでは、以下のオーバーライドテンプレートがデフォルトで提供されます。

以下の手順で、カテゴリレベルでプレゼンテーションの詳細を追加できる商取引カテゴリオーバーライドテンプレートが作成されます。

オーバーライドテンプレート

ベーステンプレート

コマースバンドル

• /sitecore/Templates/Project/Sitecore/Catalog Navigation Page
• /sitecore/テンプレート/Foundation/Commerce Experience Accelerator/Commerce ページ/カタログ製品ページ
• /sitecore/Templates/Commerce/Catalog/Commerce Bundle
• /sitecore/テンプレート/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

商業カテゴリー

• /sitecore/Templates/Project//Catalog Navigation Page
• /sitecore/テンプレート/Foundation/Commerce Experience Accelerator/Commerce Pages/カタログカテゴリページ
• /sitecore/Templates/Commerce/Catalog/Commerce Category
• /sitecore/テンプレート/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

Commerce Dynamic Bundle

• /sitecore/Templates/Project/Sitecore/Catalog Navigation Page
• /sitecore/テンプレート/Foundation/Commerce Experience Accelerator/Commerce ページ/カタログ製品ページ
• /sitecore/Templates/Commerce/Catalog/Commerce Dynamic Bundle
• /sitecore/テンプレート/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

商業製品

• /sitecore/Templates/Project//Catalog Navigation Page
• /sitecore/テンプレート/Foundation/Commerce Experience Accelerator/Commerce ページ/カタログ製品ページ
• /sitecore/Templates/Commerce/Catalog/Commerce Product
• /sitecore/テンプレート/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

コマース製品バリアント

• /sitecore/Templates/Project//Catalog Navigation Page
• /sitecore/テンプレート/Foundation/Commerce Experience Accelerator/Commerce ページ/カタログ製品ページ
• /sitecore/Templates/Commerce/Catalog/Commerce Product Variant
• /sitecore/テンプレート/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

!注 デフォルトの ストアフロント実装では、製品バリアントは直接のページリクエストターゲットではなく、親製品のみが対象となります。そのため、Commerceの製品バリアントオーバーライドテンプレートフィールドを空にしても構いません。

カテゴリテンプレートを作成するには:

1. コンテンツエディターで */sitecore/Templates/Project/*に行き、右クリック してから 「挿入、新しいテンプレート」をクリックします。

2. 「選択名」ページで、カテゴリテンプレートの名前としてCommerce Categoryを入力してください。

3. Base Templateフィールドで*Templates/Project/*に移動し、カタログナビゲーションページのテンプレートを選択し、「Next」をクリックします。

4. ロケーションページでデフォルトの場所(Project/)を受け入れ、次へをクリックしてから閉じるボタンをクリックします。

5. コンテンツタブの**「データ**」セクションの**「すべて**」リストで、Templates/Foundation/Commerce Experience Accelerator/Commerce Pagesフォルダに移動してカタログカテゴリページをダブルクリックすると「選択リスト」に移動します。

6. Templates/Commerce/Catalogに移動し、Commerce Categoryをダブルクリックしてください。

7. Templates/Foundation/Experience Accelerator/Search/Computed Fieldsに移動してダブルクリック_SearchableWithoutRelatedItems。

   

8. リボンの上で「 保存」をクリックします。

この手順を繰り返して、前の表に示された他のテンプレートを作成し、関連するテンプレートが選択されているか確認してください。

!注テンプレート割り当ては、カタログ内のカテゴリを選択し、クイックインフォのセクションで正しいカテゴリテンプレートにリンクされているか確認できます。

部分的なデザインを作成する

各オーバーライドテンプレートはページデザインに関連付けられています。まず、必要なページデザインを作成するために使う2つの部分的なページデザインを作成しなければなりません。

部分的なページデザインを作成するには:

1. コンテンツエディターでsitecore/Content///Presentationに移動します。

2. 「 部分設計」 を右クリックして「 挿入、部分設計」をクリックしてください。

3. メッセージダイアログボックスで名前をCommerce Category Mainを入力し、OKをクリックします。

4. カテゴリページ(Shop/*page)と同じデザインを適用するには、sitecore/Content///Home/Shop/*へ移動してください。

5. *を選択し、リボンの プレゼンテーション タブで 詳細をクリックします。

6. レイアウト 詳細 ダイアログボックスで「 コピー先」をクリックします。

   

7. ターゲットデバイスリストで「デフォルト」チェックボックスを選択します。

8. ターゲットアイテムリストで、以前作成した部分的なデザインを選択します(Commerce Category Main)。

   

9. コピーをクリックしてからOKをクリックします。

10. これらの手順を繰り返してCommerce Product Main部分的なデザインを作成します。ステップ3と8のCommerce Product Mainを活用してください。

    !注商品ページを作成する際は、/sitecore/Content/Sitecore/Storefront/Home/Shop/*/* 項目に移動する必要があります。

各オーバーライドテンプレートごとにページデザインを作成します

前回の手順で作成した部分的なデザインを使い、各 オーバーライドテンプレートごとにページデザインを作成します。

各オーバーライドテンプレートのページデザインを作成するには:

1. コンテンツエディターでsitecore/Content///Presentationへ行ってください。

2. 右クリックで 「ページデザイン」 をクリックし、「 挿入」→「ページデザイン」をクリックします。

3. メッセージダイアログボックスの名称欄にページデザイン名(Commerceカテゴリページ、Commerce Product Page、Commerce Product Variant Page、またはCommerce Bundle Page)を入力し、OKをクリックします。

4. 新たに作成されたページデザインを選択し、Designingセクションの**「Content**」タブで、以下の表に示されているように関連する部分デザインをダブルクリックして「Selected」リストに移動させます。

   ページデザイン名

   選択された部分設計

   Commerce Bundle Page

   デフォルトのコマースヘッダー

   デフォルトのメイン商品ページのコンテンツ

   デフォルトコマースフッター

   コマースメタデータ

   Commerce Category Page

   コマースヘッダー

   カテゴリページの内容

   デフォルトコマースフッター

   コマースメタデータ

   Commerce Product Page

   デフォルトのコマースヘッダー

   デフォルトのメイン商品ページのコンテンツ

   デフォルトコマースフッター

   コマースメタデータ

   Commerce Product Variant Page

   デフォルトのコマースヘッダー

   コマース メイン商品ページ コンテンツ

   デフォルトコマースフッター

   コマースメタデータ

   

5. 変更を保存するには、「 保存」をクリックしてください。

テンプレートをページデザインにマッピングする

テンプレートをページデザインにマッピングするには:

1. コンテンツツリーでsitecore/Content///Presentationに行き、「 **ページデザイン」**をクリックします。

2. 「Content」タブのデザインセクションで、カテゴリオーバーライドテンプレートを以下の例で示すような関連するページデザインにマッピングします。

   

3. 変更を保存するには、「 保存」をクリックしてください。

プロダクトバリアント、静的バンドル、動的バンドルのテンプレートについても同じ手順を繰り返します。

データ提供者が使用するテンプレートを上書きします

デフォルトでは、カタログアイテムはグローバルコマーステンプレートに基づいているため、マルチサイト構成やテンプレートからページへのデザインマッピングでは使用できません。このため、カタログアイテムはテナント固有のオーバーライドテンプレートを基にする必要があります。

データ提供者が使用するテンプレートを上書きするには:

1. コンテンツエディターで /sitecore/Content///Home/Catalogsに移動します。
2. カタログをクリックしてください。
3. コンテンツタブのテンプレートオーバーライドセクションで、各テンプレートタイプごとにフィールドをクリックし、*Templates/Project/*フォルダ内のプロジェクトテンプレートにオーバーライドテンプレートをマッピングします。
4. 変更を有効にするには、リボンの 「Commerce 」タブで「 Commerce Cache」をクリックします。

今ではストアフロントの サイトで直接ナビゲーションを有効に できます。