--- title: "ウォークスルー:既存サイトでの直接ナビゲーションの設定" slug: "walkthrough--configuring-direct-navigation-on-an-existing-site" abstract: "既存のサイトで直接ナビゲーションを設定し、カテゴリや商品がプレゼンテーションや分析の面で独自性を持つようにする方法。" --- # ウォークスルー:既存サイトでの直接ナビゲーションの設定 ダイレクトナビゲーションとは、Sitecoreがカタログのアイテムを直接表示することを意味します。その結果、プレゼンテーション、ページイベント、目標、分析プロファイル、キャンペーン、パーソナライズ機能など、すべてカタログアイテムから利用可能です。つまり、カタログ内の各カテゴリや商品は、プレゼンテーションや分析の面で独自性を持つことができます。 既存サイトで直接ナビゲーションを可能にするには、ページデザインにマッピングするオーバーライドテンプレートが必要です。自分で作成することも、ストアフロントサイトテンプレートに付属しているテンプレートやページデザインを使うこともできます。 > !注Habitatカタログを使わない新しいサイトや、カスタムカタログを作成しサイトに関連付ける既存のサイトでは、[テンプレートを上書き](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--configuring-direct-navigation-on-an-existing-site.html#UUID-2bbf86e0-f83b-81c0-82b8-f179477b4111_section-5c588b3c9025f-idm44903073874624 "Override the templates used by the data provider") して [直接ナビゲーションを有効にする](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/enable-direct-navigation.html "Enable direct navigation")だけで済みます。 このウォークスルーでは、以下の方法を説明します: - [オーバーライドテンプレートを作成し](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--configuring-direct-navigation-on-an-existing-site.html#UUID-2bbf86e0-f83b-81c0-82b8-f179477b4111_section-5c5887d78518d-idm46506078793360 "Create override templates")ましょう。 - [部分的なデザインを作成し](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--configuring-direct-navigation-on-an-existing-site.html#UUID-2bbf86e0-f83b-81c0-82b8-f179477b4111_section-5c6fe1b165b1f-idm46092396756928 "Create a page design for each override template")ましょう。 - [各オーバーライドテンプレートにマッピングするページデザインを作成し](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--configuring-direct-navigation-on-an-existing-site.html#UUID-2bbf86e0-f83b-81c0-82b8-f179477b4111_section-5c6fe1b165b1f-idm46092396756928 "Create a page design for each override template")ましょう。 - [テンプレートをページデザインにマッピング](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--configuring-direct-navigation-on-an-existing-site.html#UUID-2bbf86e0-f83b-81c0-82b8-f179477b4111_section-5c18e8e099d40-idm46481590101520 "Map a template to a page design")します。 - [データプロバイダーがカタログ項目を公開するために使用するテンプレートを上書き](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--configuring-direct-navigation-on-an-existing-site.html#UUID-2bbf86e0-f83b-81c0-82b8-f179477b4111_section-5c588b3c9025f-idm44903073874624 "Override the templates used by the data provider")します。 > !注既存サイトではデフォルトでダイレクトナビゲーションはオフになっています。新しいサイトではデフォルトで有効化されています。 [カスタムテンプレートを使ったアイテムのダイレクトナビゲーションを有効にする](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--enabling-direct-navigation-for-customized-commerce-entities.html "Walkthrough: Enabling direct navigation for customized Commerce entities")こともできます。 ## オーバーライドテンプレートの作成 プレゼンテーションは通常、ページタイプテンプレートの標準値に基づいて設定されます。同じソリューション内で各店舗ごとにユニークなプレゼンテーションをサポートし、各サイトごとにカタログテンプレートを用意しなくても、[テンプレートからページへのデザインマッピング](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/create-and-assign-a-page-design-in-the-content-editor.html)を利用できます。 Helixのガイドラインに従い、以下の図に示すように、さまざまなテンプレートタイプが使用されています。オーバーライドテンプレートを使用すると、ページタイプテンプレートは他の基本テンプレートから継承するコンテナとなり、テンプレート間のデザインマッピングがページデザインを決定します。これはページをレンダリングするために必要なデータ構造とデータ継承を定義するテンプレートです。 ![Overview of template types.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/TemplateStructure.png) ストアフロントサイトテンプレートでは、以下のオーバーライドテンプレートがデフォルトで提供されます。 以下の手順で、カテゴリレベルでプレゼンテーションの詳細を追加できる商取引カテゴリオーバーライドテンプレートが作成されます。 オーバーライドテンプレート ベーステンプレート コマースバンドル - */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**。 ![Data section of the Catalog Navigation Page template.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/CommerceCategoryData.png) 8. リボンの上で「 **保存**」をクリックします。 この手順を繰り返して、前の表に示された他のテンプレートを作成し、関連するテンプレートが選択されているか確認してください。 > !注テンプレート割り当ては、カタログ内のカテゴリを選択し、クイックインフォのセクションで正しいカテゴリテンプレートにリンクされているか確認できます。 ## 部分的なデザインを作成する 各オーバーライドテンプレートはページデザインに関連付けられています。まず、必要なページデザインを作成するために使う2つの部分的なページデザインを作成しなければなりません。 部分的なページデザインを作成するには: 1. コンテンツエディターで*sitecore/Content///Presentation*に移動します。 2. 「 **部分設計」** を右クリックして「 **挿入、部分設計**」をクリックしてください。 3. **メッセージ**ダイアログボックスで名前を*Commerce Category Main*を入力し、**OK**をクリックします。 4. カテゴリページ(Shop/\*page)と同じデザインを適用するには、*sitecore/Content///Home/Shop/\**へ移動してください。 5. \*を選択し、リボンの **プレゼンテーション** タブで **詳細**をクリックします。 6. レイアウト **詳細** ダイアログボックスで「 **コピー先**」をクリックします。 ![Layout Details dialog box.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/LayoutDetailsPageDesigns.png) 7. **ターゲットデバイス**リストで「**デフォルト**」チェックボックスを選択します。 8. **ターゲットアイテム**リストで、以前作成した部分的なデザインを選択します(*Commerce Category Main*)。 ![CopyToUpgrade.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/CopyToUpgrade.png) 9. **コピー**をクリックしてから**OK**をクリックします。 10. これらの手順を繰り返して*Commerce Product Main*部分的なデザインを作成します。ステップ3と8の*Commerce Product Main*を活用してください。 > !注商品ページを作成する際は、*/sitecore/Content/Sitecore/Storefront/Home/Shop/\*/\** 項目に移動する必要があります。 ## 各オーバーライドテンプレートごとにページデザインを作成します 前回の手順で作成した部分的なデザインを使い、各 [オーバーライドテンプレート](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/create-and-assign-a-page-design-in-the-content-editor.html)ごとにページデザインを作成します。 各オーバーライドテンプレートのページデザインを作成するには: 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* デフォルトのコマースヘッダー コマース メイン商品ページ コンテンツ デフォルトコマースフッター コマースメタデータ ![PageDesignsUpgrade.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/PageDesignsUpgrade.png) 5. 変更を保存するには、「 **保存**」をクリックしてください。 ## テンプレートをページデザインにマッピングする テンプレートをページデザインにマッピングするには: 1. コンテンツツリーで*sitecore/Content///Presentation*に行き、「 **ページデザイン」**をクリックします。 2. **「Content**」タブの**デザイン**セクションで、カテゴリオーバーライドテンプレートを以下の例で示すような関連するページデザインにマッピングします。 ![CategoryTemplateMapping94.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/CategoryTemplateMapping94.png) 3. 変更を保存するには、「 **保存**」をクリックしてください。 プロダクトバリアント、静的バンドル、動的バンドルのテンプレートについても同じ手順を繰り返します。 ## データ提供者が使用するテンプレートを上書きします デフォルトでは、カタログアイテムはグローバルコマーステンプレートに基づいているため、マルチサイト構成やテンプレートからページへのデザインマッピングでは使用できません。このため、カタログアイテムはテナント固有のオーバーライドテンプレートを基にする必要があります。 データ提供者が使用するテンプレートを上書きするには: 1. コンテンツエディターで */sitecore/Content///Home/Catalogs*に移動します。 2. カタログをクリックしてください。 3. **コンテンツ**タブの**テンプレートオーバーライド**セクションで、各テンプレートタイプごとにフィールドをクリックし、*Templates/Project/*フォルダ内のプロジェクトテンプレートにオーバーライドテンプレートをマッピングします。 4. 変更を有効にするには、リボンの **「Commerce** 」タブで「 **Commerce Cache**」をクリックします。 今ではストアフロントの [サイトで直接ナビゲーションを有効に](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/enable-direct-navigation.html "Enable direct navigation") できます。