利用可能なレンダリングの選択

概要

Storefront サイト テンプレートで利用できるレンダリングの比較とお勧めレンダリング。

Sitecore Experience Accelerator (SXA) および SXA のコマース コンポーネントの新機能を最大限に活用するため、Storefront サイト テンプレートには更新されたレンダリングが含まれています。更新されたレンダリングの詳細に関しては次の表を参照してください。1 つ目の表には検索関連のレンダリングがリストされており、2 つ目の表にはナビゲーション レンダリングがリストされています。

重要

1 列目と 2 列目のレンダリングを同じページに存在させることはできますが、混ぜることはできません。つまり、グループ内で一緒に機能する検索ベースのレンダリングを複数のグループ使用することはできますが、1 列目のレンダリングと 2 列目のレンダリングを混ぜることはできません。たとえば、Storefront サイト テンプレートのホーム ページには、デフォルトでプロモーション商品のグループが 2 つ (1 つはテレビ用、もう 1 つ Mira ラップトップ用) が含まれています。どちらのグループも、Commerce 検索結果レンダリングを使用します。1 つのグループは 1 列目のレンダリングを基本に、もう 1 つのグループは 2 列目のレンダリングを基本にすることができます。

推奨 (1)

更新前 (2)

(2) が (1) より優れている点

集約済みファセット フィルター レンダリング

商品ファセット

集約済みファセット フィルター レンダリングは柔軟性が高く、簡単にカスタマイズできます。これは、含まれるファセットがレンダリング バリアントで設定された個々のフィルター ファセットで構成され、特定の検索結果シグネチャーに関連付けられているためです。

集約済みファセット フィルター レンダリングに関連付けられているレンダリング バリアントは、集約済みファセット フィルター ツールバーで使用するバリアントを選択することで変更できます。集約済みファセット フィルター レンダリングを使うと、ユーザーは複数のファセット値を選択でき、AJAX コールを使用して、ページの読み込み性能を向上できます。集約済みファセット フィルター レンダリングでは任意の種類のフィルターを挿入できます。

一方、商品ファセット レンダリングは、レンダリング バリアントに対応していませんが、一度にすべてのファセットのレンダリングを処理します。さらに、すべてのファセットは同じチェックリスト タイプであるため、見た目のオプションと顧客側の使いやすさのオプションは限られます。レンダリングするファセットはカテゴリーとページ アイテムで設定できます。

注記

どちらのレンダリングも、カテゴリごとに設定された異なるファセット リストを持つことができ、両方のレンダリングは、(設定されていても) 選択する値がないファセットを非表示にできます。

Commerce 検索結果

製品リスト

プロモーション商品

Commerce 検索結果レンダリングは標準の SXA 検索結果レンダリングに基づいており、検索シグネチャーを使用し、インデックスをクエリしてアイテムを取得します。カスタマイズが簡単で、柔軟性が高く、商品のブーストにも対応しており、最新のストアフロントの要件を満たすことから、ホームカテゴリー検索結果商品の詳細ページの Storefront サイト テンプレートと一緒に使用されます。

これらのレンダリングの比較に関しては、「製品リストで使用できるレンダリングの選択」を参照してください。

フィルター (チェックリスト)

フィルター (日付)

フィルター (ドロップダウン)

フィルター (管理された範囲)

フィルター (半径)

フィルター (範囲スライダー)

フィルター (スライダー)

商品ファセット

チェックリストや日付、スライダーまでフィルター タイプのレンダリングは 7 つあり、各レンダリングが提供する顧客側の使いやすさのオプションや機能は異なります。これらのフィルター レンダリングは、個別にページにドラッグするか、集約済みファセット フィルターの一部としてドラッグできます。商品ファセット レンダリングでは、すべての設定済みファセットが、同じチェックリスト タイプとしてレンダリングされており、プレゼンテーションと顧客側の使いやすさのオプションは限られています。

結果をさらに表示

(商品リスト レンダリングとプロモーション商品レンダリングの両方の一部)

どちらのレンダリング セットでも、ページングまたは無限スクロールを使用するかどうかは任意です。結果をさらに表示レンダリングを使用すると、顧客は無限スクロール設定で結果をさらに表示できます。

結果をさらに表示レンダリングを、固定のスポットで表示されるレンダリングの一部ではなく、別のレンダリングとして設定すると、ページ レイアウトの設計時に柔軟性が高まります。

ページ サイズ

ページ毎の商品リスト アイテム

ページ サイズ レンダリングを使用すると、顧客が各ページに表示する商品数を選択できます。

ページ セレクター

製品リスト ページャー

ページ セレクターは、検索結果シグネチャーを使用します。また、検索レンダリングの異なるグループがあるページで複数回使用できます。

検索結果数

製品リスト ページ情報

検索結果数は、検索結果シグネチャーを使用します。また、検索レンダリングの異なるグループがあるページで複数回使用できます。

結果バリアント セレクター

NA

結果バリアント セレクター レンダリングを使用すると、限定リスト、詳細、タイルなど、さまざまな検索結果の表示オプションから選択できます。

検索ボックス

検索バー

検索ボックスは、検索結果シグネチャーを使用します。また、検索レンダリングの異なるグループがあるページで複数回使用できます。たとえば、Storefront サイト テンプレートと一緒に使用すると、カテゴリー ページの検索結果を狭めることができます。これは、ページ上部のグローバル検索とカテゴリ内のローカル検索の両方が対象です。

検索ボックスは、先行入力と予測入力に対応しています。

結果の並び替え

商品リスト ソート

SXA 結果の並び替えレンダリングは検索結果を順序付けるために使用します。検索シグネチャーを定義し、両方のレンダリングに同じものを使用することで、結果をさらに表示ボタンなどの別のレンダリングと結果の並び替えレンダリングをリンクできます。さまた、新しい並べ替えオプションを定義することもできます。

結果の並び替えレンダリングを使用すると、関連性に基づいて結果を並べ替えたり、ランダムに結果を並べ替えたりすることができます。関連性を使用する際は、特定の商品またはページを集中的に販促するために、販売促進ルールを定義できます。

次の表は、ナビゲーション レンダリングの詳細を示しています。

推奨 (1)

更新前 (2)

(2) が (1) より優れている点

Commerce ナビゲーション

カテゴリー ナビゲーションと SXA ナビゲーション

Commerce ナビゲーション レンダリングは標準の SXA ナビゲーション レンダリングに基づいていますが、個別のレンダリング バリアント ルートおよび異なる MVC レンダリング ビューを持っています。SXA ナビゲーション レンダリングとは違い、Bootstrap を使用してレスポンシブ デザインをサポートします。インデックスは使用せずに、コンテンツ内のアイテムを対象にします。更新前のレンダリングであるカテゴリー ナビゲーション レンダリングはレンダリング バリアントでは機能せず、検索ベースです。

検索結果

ページ リスト

ページ コンテンツ

サブカテゴリー ナビゲーション

検索結果レンダリングは、Commerce 検索スコープを使用します。サブメニューにサブカテゴリを一覧表示するなど、さまざまなシナリオで使用できます。

検索結果レンダリングは別の AJAX コールを使用して、検索結果を取得します。一方、サブカテゴリー ナビゲーション レンダリングは AJAX コールを使用しませんが、より優れたパフォーマンスが得られる初期のサーバー側のレンダリングの一環としてクエリを処理します。よって Storefront サイト テンプレートはデフォルトでサブカテゴリー ナビゲーション レンダリングを使用します。

検索結果レンダリングとサブカテゴリー ナビゲーション レンダリングの両方は検索ベースですが、サブカテゴリー ナビゲーション レンダリングはレンダリング バリアントに対応していません。つまり、検索結果レンダリングと比べると簡単にカスタマイズができず、柔軟性も低くなります。

注記

カスタマイズに関しては、更新されたレンダリングの方が柔軟性がありますが、これらレンダリングがキャッシングとパフォーマンスの要件を満たすかどうかを確認する必要があります。