チュートリアル: ストアフロントでのファセットの設定と表示

概要

集約済みファセット フィルター レンダリングを構築する方法。

顧客が情報を容易に検索して見つけることができるように、集約済みファセット フィルター レンダリングを含め、ストアフロントでファセットを設定および表示できます。

注記

レンダリング バリアントに挿入するファセット フィルター レンダリングの数に関係なく、それらのレンダリングは、実行時に、リストされたアイテムに適用される特定のファセットの値がある場合にのみ、顧客に表示されます。

このチュートリアルでは、集約済みファセット フィルターを構築する方法について説明します。次の方法について説明します。

  • ファセット フィルターの作成

  • チェックリスト フィルターの追加

  • バリアント定義の作成

  • レンダリング バリアントを集約済みファセット フィルター レンダリングに関連付ける

重要

新しい Commerce ファセットを作成した後、ファセット インデックス フィールドを定義し、ストアフロント サイトのインデックスを再作成する必要があります。

検索結果の署名を使用して、集約済みファセット フィルター内の複数のファセット フィルターをバインドできますが、これは必須ではありません。

ファセット フィルターを作成するには、次の手順に従います。

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

    FacetsFolderContentEditor.png
  2. [Facets] フォルダーを右クリックし、[挿入]、[リスト ファセット] をクリックします。

  3. [メッセージ] ダイアログ ボックスでファセットの名前を入力し、[OK] をクリックします。

  4. [コンテンツ] タブの [ファセット] セクションに、インデックスで使用する名前とフィールド名を入力します。

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

この手順では、ファセットにチェックリスト フィルターを追加します。ただし、任意の SXA 検索レンダリングを使用できます。

チェックリスト フィルターを追加するには、次の手順に従います。

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

  2. [チェックリスト フィルター] を右クリックし、[挿入]、[チェックリスト フィルター] をクリックします。

  3. [メッセージ] ダイアログ ボックスでフィルターの名前を入力し、[OK] をクリックします。

  4. [コンテンツ] タブの [ファセット] フィールドで、前の手順で作成したリスト ファセットを選択します。

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

各集約済みファセット フィルターをレンダリング バリアントに関連付ける必要があります。

注記

カスタム フィールドを使用している場合は、バリアント定義を作成する代わりに、ストアフロントに新しいファセットを表示するために、既存のカテゴリー ページと検索結果のレンダリング バリアントに新しいコンポーネントを挿入します。

バリアント定義を作成するには:

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

    Aggregated Facet Filter フォルダーには、集約済みファセット フィルターに使用できるすべてのバリアント定義が含まれています。

  2. Aggregated Facet Filter フォルダーを右クリックして、[挿入 > バリアント定義] をクリックします。

  3. [メッセージ] ダイアログ ボックスで、バリアント定義の名前を入力し、[OK] をクリックします。

  4. 新しく作成したバリアント定義を右クリックして、[挿入 > テンプレートから挿入] をクリックします。

  5. [メッセージ] ダイアログ ボックスに、コンポーネントの名前を入力し、[OK] をクリックします。

  6. [コンテンツ] タブの [Rendering Item] フィールドで、Renderings/Feature/Experience Accelerator/Search/Filter (Checklist) を選択し、リボンの [保存] をクリックします。

    AggregatedFacetFilterVariant.png
  7. [Rendering Parameters] フィールドの [設定] をクリックします。

  8. [コントロール プロパティ] ダイアログ ボックスの [データ ソース] フィールドで、[参照] をクリックし、[関連付けられたコンテンツを選択してください] ダイアログ ボックスで、前の手順で作成したチェックリスト フィルターを選択し、[ OK] をクリックします。

  9. [コントロール プロパティ] ダイアログ ボックスの [ SearchCriteria] セクションで、[検索結果シグネチャー] フィールドで、検索結果シグネチャー (たとえば、カテゴリー ページ検索ページ) を定義して、[OK] をクリックします。前のスクリーンショットでは、カテゴリー ページに検索シグネチャー カテゴリー ページにリンクされた 3 つのフィルター チェックリスト (ブランド、メーカー、商品の種類) があります。

  10. リンクするページ上のすべてのコンポーネント (レンダリング)、たとえば、[結果の並べ替え]、[検索結果]、[結果をさらに表示] など について、手順 4 から 9 までを繰り返します。

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

注記

ファセットを既存のバリアント定義に追加する場合は、この手順を完了する必要はありません。

レンダリング バリアントを集約済みファセット フィルター レンダリングに関連付けるには:

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

  2. フォルダーを展開して、[Default Commerce Category Page Content] を右クリックし、[エクスペリエンス エディター] をクリックします。

  3. エクスペリエンス エディターのページで、[Aggregated Facet filter] レンダリングをクリックして、[バリアント] リストから、前の手順で作成したバリアント定義をクリックします。

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

  5. コンテンツ エディターで、sitecore/Content/<tenant>/<site>/Presentation/Partial Designs に移動し、[Default Commerce Category Page Content] を右クリックして、[アイテムをパブリッシュ] をクリックします。

  6. [パブリッシュ] ダイアログ ボックスで、パブリッシュ オプションを選択し、[パブリッシュ] をクリックします。