チュートリアル: 既存のサイトでのダイレクト ナビゲーションの設定

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

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

ダイレクト ナビゲーションとは、Sitecore でカタログ アイテムが直接表示されることを意味します。その結果、プレゼンテーション、ページ イベント、ゴール、分析プロファイル、キャンペーン、およびパーソナライゼーションをすべてカタログ アイテムから利用できます。つまり、プレゼンテーションと分析の観点から、カタログ内の各カテゴリーと商品が一意となります。

既存のサイトのダイレクト ナビゲーションを有効にするには、ページ デザインにマッピングする上書きテンプレートが必要です。上書きテンプレートを独自に作成することも、Storefront サイト テンプレートで提供されるテンプレートとページ デザインを使用することもできます。

注記

Habitat カタログを使用しない新しいサイト、またはカスタム カタログを作成してサイトに関連付ける既存のサイトの場合は、テンプレートを上書きし、ダイレクト ナビゲーションを有効化するだけで済みます。

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

注記

既存のサイトのダイレクト ナビゲーションは、デフォルトでオフになっています。新しいサイトの場合は、デフォルトで有効になっています。カスタム テンプレートを使用して、アイテムのダイレクト ナビゲーションを有効にすることができます。

上書きテンプレートの作成

プレゼンテーションは通常、ページ タイプ テンプレートの標準値に設定されます。サイトごとにカタログ テンプレートのセットを必要とせずに、同じソリューションで個々のストアフロントの固有のプレゼンテーションをサポートするには、テンプレートとページ間のデザイン マッピングを使用します。

次の図に示すように、Helix のガイドラインに従って、いくつかの異なるテンプレート タイプが使用されています。上書きテンプレートを使用すると、ページ タイプ テンプレートは他のベース テンプレートから継承するコンテナーになり、テンプレートとページ間のデザイン マッピングによってページ デザインが決定されます。ページのレンダリングに必要なデータ構造とデータ継承は、テンプレートによって定義されます。

テンプレート タイプの概要。

Storefront サイト テンプレートでは、デフォルトで次の上書きテンプレートが提供されています。

次の手順では、カテゴリー レベルでプレゼンテーションの詳細を追加できる Commerce カテゴリー上書きテンプレートを作成します。

テンプレートの上書き

ベース テンプレート

Commerce バンドル

  • /sitecore/Templates/Project/Sitecore/Catalog Navigation Page

  • /sitecore/Templates/Foundation/Commerce Experience Accelerator/Commerce Pages/Catalog Product Page

  • /sitecore/Templates/Commerce/Catalog/Commerce Bundle

  • /sitecore/Templates/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

Commerce カテゴリー

  • /sitecore/Templates/Project/<tenant>/Catalog Navigation Page

  • /sitecore/Templates/Foundation/Commerce Experience Accelerator/Commerce Pages/Catalog Category Page

  • /sitecore/Templates/Commerce/Catalog/Commerce Category

  • /sitecore/Templates/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

Commerce 動的バンドル

  • /sitecore/Templates/Project/Sitecore/Catalog Navigation Page

  • /sitecore/Templates/Foundation/Commerce Experience Accelerator/Commerce Pages/Catalog Product Page

  • /sitecore/Templates/Commerce/Catalog/Commerce Dynamic Bundle

  • /sitecore/Templates/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

Commerce 商品

  • /sitecore/Templates/Project/<tenant>/Catalog Navigation Page

  • /sitecore/Templates/Foundation/Commerce Experience Accelerator/Commerce Pages/Catalog Product Page

  • /sitecore/Templates/Commerce/Catalog/Commerce Product

  • /sitecore/Templates/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

Commerce 商品バリアント

  • /sitecore/Templates/Project/<tenant>/Catalog Navigation Page

  • /sitecore/Templates/Foundation/Commerce Experience Accelerator/Commerce Pages/Catalog Product Page

  • /sitecore/Templates/Commerce/Catalog/Commerce Product Variant

  • /sitecore/Templates/Foundation/Experience Accelerator/Search/Computed Fields/_SearchableWithoutRelatedItems

注記

デフォルトの Storefront の実装では、商品バリアントはページ要求の直接のターゲットではなく、親商品のみがターゲットとなります。したがって、[Commerce 商品バリアント上書きテンプレート] フィールドは空のままにすることができます。

カテゴリー テンプレートを作成するには、次の手順に従います。

  1. コンテンツ エディターで /sitecore/Templates/Project/<tenant> に移動し、<tenant> を右クリックして、[挿入]、[新しいテンプレート] の順にクリックします。

  2. [名前を選択] ページで、カテゴリー テンプレートの名前として「Commerce カテゴリー」を入力します。

  3. [ベース テンプレート] フィールドで Templates/Project/<tenant> に移動し、[カタログ ナビゲーション ページ] テンプレートを選択して、[次へ] をクリックします。

  4. [場所] ページでデフォルトの場所 (Project/<tenant>) のまま [次へ] をクリックし、[閉じる] をクリックします。

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

  6. Templates/Commerce/Catalog に移動し、[Commerce カテゴリー] をダブルクリックします。

  7. Templates/Foundation/Experience Accelerator/Search/Computed Fields に移動し、[_SearchableWithoutRelatedItems] をダブルクリックします。

    カタログ ナビゲーション ページ テンプレートの [データ] セクション。

  8. リボンの [保存] をクリックします。

この手順を繰り返して、前の表に示されている他の各テンプレートを作成し、示されている関連テンプレートが選択されていることを確認する必要があります。

注記

テンプレートの割り当てを確認するには、カタログでカテゴリーを選択し、[レンダリング情報] セクションで、テンプレートが正しいカテゴリー テンプレートにリンクされていることを確認します。

パーシャル デザインの作成

各上書きテンプレートは、ページ デザインに関連付けられています。まず、必要なページ デザインの作成に使用する 2 つのパーシャル ページ デザインを作成する必要があります。

パーシャル ページ デザインを作成するには、次の手順に従います。

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

  2. [パーシャル デザイン] を右クリックし、[挿入]、[パーシャル デザイン] の順にクリックします。

  3. [メッセージ] ダイアログ ボックスで、名前として「Commerce カテゴリー メイン」を入力し、[OK] をクリックします。

  4. カテゴリー ページ (Shop/*page) と同じデザインを適用するには、sitecore/Content/<tenant>/<site>/Home/Shop/* に移動します。

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

  6. [レイアウト詳細] ダイアログ ボックスで、[指定の場所にコピー] をクリックします。

    [レイアウト詳細] ダイアログ ボックス。

  7. [ターゲット デバイス] リストで、[デフォルト] チェック ボックスをオンにします。

  8. [ターゲット アイテム] リストで、さきほど作成したパーシャル デザイン (Commerce カテゴリー メイン) を選択します。

  9. [コピー] をクリックし、[OK] をクリックします。

  10. ここまでの手順を繰り返して、Commerce 商品メイン パーシャル デザインを作成します。手順 3 と 8 では「Commerce 商品メイン」に置き換えます。

    注記

    商品ページを作成するときは、/sitecore/Content/Sitecore/Storefront/Home/Shop/*/* アイテムに移動する必要があります。

各上書きテンプレートのページ デザインの作成

前の手順で作成したパーシャル デザインを使用して、上書きテンプレートごとにページ デザインを作成します。

上書きテンプレートごとにページ デザインを作成するには、次の手順に従います。

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

  2. [ページ デザイン] を右クリックし、[挿入]、[ページ デザイン] の順にクリックします。

  3. [メッセージ] ダイアログ ボックスの名前フィールドに、ページ デザイン名 (次の表に示すように、Commerce カテゴリー ページ、Commerce 商品ページ、Commerce 商品バリアント ページ、または Commerce バンドル ページ) を入力し、[ OK] をクリックします。

  4. 新しく作成したページ デザインを選択し、[コンテンツ] タブの [デザイン変更] セクションで、次の表に示す関連するパーシャル デザインをダブルクリックして、[選択済み] リストに移動します。

    ページ デザイン名

    選択したパーシャル デザイン

    Commerce バンドル ページ

    デフォルト Commerce ヘッダー

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

    デフォルト Commerce フッター

    Commerce メタデータ

    Commerce カテゴリー ページ

    Commerce ヘッダー

    カテゴリー ページ コンテンツ

    デフォルト Commerce フッター

    Commerce メタデータ

    Commerce 商品ページ

    デフォルト Commerce ヘッダー

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

    デフォルト Commerce フッター

    Commerce メタデータ

    Commerce 商品バリアント ページ

    デフォルト Commerce ヘッダー

    Commerce メイン商品ページ コンテンツ

    デフォルト Commerce フッター

    Commerce メタデータ

  5. 変更内容を保存するには、[保存] をクリックします。

ページ デザインへのテンプレートのマッピング

ページ デザインにテンプレートをマッピングするには、次の手順に従います。

  1. コンテンツ エディターで sitecore/Content/<tenant>/<site>/Presentation に移動し、[ページ デザイン] をクリックます。

  2. 次の例に示すように、[コンテンツ] タブの [デザイン変更] セクションで、関連するページ デザインにカテゴリー上書きテンプレートをマッピングします。

  3. 変更内容を保存するには、[保存] をクリックします。

商品バリアント テンプレート、静的バンドル テンプレート、および動的バンドル テンプレートに対して、この手順を繰り返す必要があります。

データ プロバイダーが使用するテンプレートの上書き

デフォルトでは、カタログ商品はグローバル Commerce テンプレートに基づいています。つまり、マルチサイト設定や、テンプレートとページ間のデザイン マッピングでは使用できません。このため、カタログ商品はテナント固有の上書きテンプレートに基づいている必要があります。

データ プロバイダーが使用するテンプレートを上書きするには、次の手順に従います。

  1. コンテンツ エディターで、/sitecore/Content/<tenant>/<site>/Home/Catalogs に移動します。

  2. カタログをクリックします。

  3. [コンテンツ] タブの [テンプレート上書き] セクションで、テンプレート タイプごとにフィールドをクリックし、Templates/Project/<tenant> フォルダー内のプロジェクト テンプレートに上書きテンプレートをマッピングします。

  4. 変更を有効にするには、リボンの [Commerce] タブで [Commerce キャッシュを更新] をクリックします。

これで、ストアフロント サイトに対してダイレクト ナビゲーションを有効化できるようになりました。

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

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