コマース ナビゲーション レンダリング
コマース ナビゲーション レンダリングの概要と、それらの設定方法。
顧客がストアフロントをすばやく簡単にナビゲートできるようにすることは、Web サイトを構築する際の重要な考慮事項です。これに実現するために、ツールボックスの [コマース カタログ] セクションに 2 つのナビゲーション レンダリングが用意されています。
注記
既定では、Sitecore 9.2 以降、既存のサイトはカテゴリ ナビゲーション レンダリングを使用し、新しいサイトはコマース ナビゲーション レンダリングを使用します。
カテゴリ ナビゲーション レンダリングは、インデックスにクエリを実行してメニュー アイテムを取得する、コマースに特化したコンポーネントです。メニュー アイテムはストアフロント サイトにレンダリングされます。このレンダリングは次の特徴があります。
ワイルドカード ページをサポートしますが、メニュー アイテムは 1 レベルのみです。
レスポンシブ デザインとモバイル デバイスをサポートします。
レンダリング バリアントをサポートしていません。
コマース ナビゲーション レンダリングは、コンテンツ内のアイテムを対象としてメニュー アイテムを取得し、ストアフロント サイトにレンダリングする SXA ナビゲーション コンポーネントのクローンです。このレンダリング コンポーネントはインデックスを使用しません。このナビゲーション レンダリングと SXA ナビゲーション レンダリングの違いは、MVC レンダリング ビュー (sitecore/Layout/Renderings/Feature/Commerce Experience Accelerator/Commerce Catalog/Commerce Navigation) と個別のレンダリング バリアント ルートです。SXA ナビゲーション レンダリングとは異なり、このビューはブートストラップを使用してレスポンシブ デザインとモバイル デバイスをサポートします。既定の Storefront ブランドのテーマは、JavaScript とスタイリングをコンポーネントに追加して、カテゴリ ナビゲーション レンダリングのようなルック アンド フィールにします。
このレンダリングには次のような特徴があります。
インデックスを使用する代わりにコンテンツ内のアイテムをターゲットとするため、直接の移動を有効にする必要があります。
複数のメニュー レベルをサポートします (ただし、Storefront ブランドのテーマにおける既定の JS とスタイルは、最初のトップ レベルのみを対象としています)。
レンダリング バリアントをサポートします。
レスポンシブ デザインとモバイル デバイスをサポートします。
次の図に示すように、モバイル デバイスでは、ストアフロント ナビゲーション メニューは既定で折りたたまれています。
次の図は、ストアフロントでのコマース ナビゲーション レンダリングの例を示しています。Storefront ブランドのテーマを使用した、対応するカテゴリ ナビゲーション レンダリングと同じルック アンド フィールを持っています。現在、Storefront ブランドのテーマは 1 つのメニュー レベルのみをサポートしていますが、カスタマイズすることでより多くのレベルをサポートできます。
設定
[コントロール プロパティ] ダイアログ ボックスでコマース ナビゲーション レンダリングを設定します。次の設定プロパティは、ダイアログ ボックスの [ナビゲーション設定] セクションにあります。
プロパティ | 用途 |
|---|---|
スタート ページ | ナビゲーションを開始する最初のレベルのカテゴリを指定します。既定では、このフィールドは Habitat カタログのカテゴリに設定されています。Habitat カタログを使用していない場合、このフィールドには GUID が表示され、使用しているカタログ内のカテゴリを指すように設定するまで、ストアフロント サイトにカテゴリ ナビゲーションは表示されません。 重要標準の URL がメタデータに確実に出力されるようにするには、カタログでカテゴリ ナビゲーションを設定する必要もあります。 |
最上部のナビゲーション レベル | ナビゲーションを開始する、(ルートから数えた) レベルを設定します。既定では、これは 1 に設定されています。 |
最下部のナビゲーション レベル | ナビゲーションを終了する、(ルートから数えた) レベルを設定します。既定では、これは 1 に設定されています。 |
ナビゲーション フィルター | ストアフロント サイトで使用されるナビゲーションのスタイル (たとえば、パンくずリスト ナビゲーション、フッター ナビゲーション、メイン ナビゲーション、サイドバー ナビゲーション、サイトマップ ナビゲーション) を設定します。 |
フラット ページ構成 | すべてのアイテムが同じレベルに表示されるかどうかを指定します。 |
ルート ページを含める | スタート ページを別のレベルとして含めるかどうかを指定します。 |
ブランドの要件を満たすために、コマース ナビゲーション レンダリングをカスタマイズすることができます。