チュートリアル : 既存のサイトでのダイレクト ナビゲーションの構成
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ダイレクト ナビゲーションとは、Sitecoreがカタログ アイテムを直接表示することを意味します。その結果、プレゼンテーション、ページイベント、ゴール、分析プロファイル、キャンペーン、パーソナライゼーションはすべてカタログアイテムから利用できます。つまり、カタログ内の各カテゴリと製品は、プレゼンテーションと分析の点で一意である可能性があります。
既存のサイトの直接ナビゲーションを有効にするには、ページデザインにマップする上書きテンプレートが必要です。自分で作成することも、Storefrontサイトテンプレートに付属するテンプレートとページデザインを使用することもできます。
Habitatカタログを使用しない新しいサイト、またはカスタム カタログを作成してサイトに関連付ける既存のサイトの場合は、テンプレートをオーバーライド して 直接ナビゲーションを有効にするだけで済みます。
このチュートリアルでは、次の方法について説明します。
デフォルトでは、既存のサイトではダイレクト ナビゲーションはオフになっています。新しいサイトでは、デフォルトで有効になっています。 カスタムテンプレートを使用して、アイテムのダイレクトナビゲーションを有効にできます。
上書きテンプレートの作成
通常、表示は「ページタイプ」テンプレートの標準値で設定されます。サイトごとにカタログテンプレートのセットを必要とせずに、同じソリューション内の個々のストアフロントのユニークなプレゼンテーションをサポートするには、テンプレートとページのデザインマッピングを使用できます。
Helixのガイドラインに従って、次の図に示すように、さまざまな テンプレート タイプ が使用されています。オーバーライド・テンプレートを使用すると、ページ・タイプ・テンプレートは他のベース・テンプレートから継承するコンテナになり、テンプレートとページのデザイン・マッピングによってページ・デザインが決定されます。これは、ページのレンダリングに必要なデータ構造とデータ継承を定義するテンプレートです。
Storefrontサイト テンプレートでは、次のオーバーライド テンプレートが既定で提供されます。
次の手順では、カテゴリ レベルでプレゼンテーションの詳細を追加できるCommerceカテゴリ上書きテンプレートを作成します。
|
オーバーライド テンプレート |
基本テンプレート |
|---|---|
|
コマースバンドル |
|
|
コマースカテゴリ |
|
|
コマースダイナミックバンドル |
|
|
コマース製品 |
|
|
コマース製品バリアント |
|
defaultストアフロントの実装では、商品バリアントは直接のページリクエストターゲットではなく、親商品のみがターゲットになります。その結果、Commerce Product Variant override templateフィールドを空のままにしておくことができます。
カテゴリテンプレートを作成するには:
-
コンテンツ エディタで/sitecore/Templates/Project/<tenant> に移動し、<tenant> を右クリックしてInsert, New Templateをクリックします。
-
Select nameページで、カテゴリテンプレートの名前として「Commerce Category」と入力します。
-
Base Templateフィールドで、「Templates/Project/<tenant>」に移動してCatalog Navigation Pageテンプレートを選択し、「Next」をクリックします。
-
Locationページで、デフォルトの場所(Project/<tenant>)をそのまま使用し、Next、Closeの順にクリックします。
-
ContentタブのDataセクションのAllリストで、Templates/Foundation/Commerce Experience Accelerator/Commerce Pagesフォルダーに移動し、Catalog Category PageをダブルクリックしてSelectedリストに移動します。
-
Templates/Commerce/Catalogに移動し、Commerce Categoryをダブルクリックします。
-
Templates/Foundation/Experience Accelerator/Search/Computed Fieldsに移動し、_SearchableWithoutRelatedItemsをダブルクリックします。
-
リボンのSaveをクリックします。
この手順を繰り返して、前の表に示した他の各テンプレートを作成し、表示されている関連テンプレートが選択されていることを確認する必要があります。
テンプレートの割り当てを確認するには、カタログでカテゴリを選択し、Quick Infoセクションで、テンプレートが正しいカテゴリ テンプレートにリンクしていることを確認します。
パーシャルデザインの作成
各オーバーライド・テンプレートは、ページ・デザインに関連付けられます。まず、必要なページデザインを作成するために使用する2つのパーシャルページデザインを作成する必要があります。
パーシャルページデザインを作成するには:
-
コンテンツ エディターで、sitecore/Content/<tenant>/<site>/Presentationに移動します。
-
Partial Designsを右クリックし、Insert, Partial Designをクリックします。
-
Messageダイアログボックスで、名前として「Commerce Category Main」と入力し、「OK」をクリックします。
-
カテゴリページ(ショップ/*ページ)と同じデザインを適用するには、sitecore/Content/<tenant>/<site>/Home/Shop/*に移動します。
-
* を選択した状態で、リボンのPresentationタブでDetailsをクリックします。
-
Layout Detailsダイアログボックスで、「Copy To」をクリックします。
-
Target Devicesリストで、Defaultチェックボックスをオンにします。
-
Target Itemリストで、以前に作成したパーシャルデザインを選択します(Commerce Category Main)。
-
Copyをクリックし、OKをクリックします。
-
これらの手順を繰り返して、Commerce Product Mainパーシャルデザインを作成します。ステップ3と8のCommerce Product Mainを使用します。
手記商品ページを作成するときは、/sitecore/Content/Sitecore/Storefront/Home/Shop/*/* アイテムに移動する必要があります。
各オーバーライドテンプレートのページデザインの作成
前の手順で作成したパーシャルデザインを使用して、オーバーライドテンプレートごとにページデザインを作成します。
各オーバーライド・テンプレートのページ・デザインを作成するには:
-
コンテンツ エディタで、sitecore/Content/<tenant>/<site>/Presentationに移動します。
-
Page Designsを右クリックし、Insert, Page Designをクリックします。
-
Messageダイアログボックスの名前フィールドに、ページデザイン名(次の表に示すように、「コマースカテゴリページ」、「コマース製品ページ」、「コマース製品バリアントページ」、または「コマースバンドルページ」)を入力し、「OK」をクリックします。
-
新しく作成したページ デザインを選択し、ContentタブのDesigningセクションで、次の表に示すように関連するパーシャル デザインをダブルクリックしてSelectedリストに移動します。
ページデザイン名
選択した部分的なデザイン
Commerce Bundle Page
デフォルトのコマースヘッダー
デフォルトのメイン商品ページコンテンツ
デフォルトのコマースフッター
コマースメタデータ
Commerce Category Page
コマースヘッダー
カテゴリページコンテンツ
デフォルトのコマースフッター
コマースメタデータ
Commerce Product Page
デフォルトのコマースヘッダー
デフォルトのメイン商品ページコンテンツ
デフォルトのコマースフッター
コマースメタデータ
Commerce Product Variant Page
デフォルトのコマースヘッダー
コマースのメイン商品ページのコンテンツ
デフォルトのコマースフッター
コマースメタデータ
-
変更を保存するには、Saveをクリックします。
テンプレートをページデザインにマッピングする
テンプレートをページデザインにマップするには:
-
コンテンツ ツリーで、sitecore/Content/<tenant>/<site>/Presentationに移動し、Page Designsをクリックします。
-
「 Content 」タブの「 Designing 」セクションで、次の例に示すように、カテゴリ上書きテンプレートを関連するページデザインにマッピングします。
-
変更を保存するには、Saveをクリックします。
製品バリアント、静的バンドル、および動的バンドルのテンプレートに対してこの手順を繰り返す必要があります。
データ プロバイダーが使用するテンプレートをオーバーライドする
デフォルトでは、カタログ品目はグローバルコマーステンプレートに基づいているため、マルチサイト設定やテンプレートからページへのデザインマッピングでは使用できません。このため、カタログ アイテムはテナント固有のオーバーライド テンプレートに基づいている必要があります。
データプロバイダが使用するテンプレートを上書きするには:
-
コンテンツ エディターで、/sitecore/Content/<tenant>/<site>/Home/Catalogsに移動します。
-
カタログをクリックします。
-
ContentタブのTemplate Overridesセクションで、テンプレート タイプごとにフィールドをクリックし、オーバーライド テンプレートをTemplates/Project/<tenant> フォルダー内のプロジェクト テンプレートにマッピングします。
-
変更を有効にするには、リボンのCommerceタブでRefresh Commerce Cacheをクリックします。
これで、ストアフロントサイトの 直接ナビゲーションを有効に できます。