---
title: "ウォークスルー:ストアフロントのファセットの設定と表示"
slug: "walkthrough--configuring-and-displaying-facets-on-the-storefront"
abstract: "Aggregated Facets Filterレンダリングの構築方法。"
---
# ウォークスルー:ストアフロントのファセットの設定と表示

ストアフロントでア[グリゲートされたファ](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/use-the-sxa-search-filter-components.html)セットフィルターのレンダリングを含む[ファセットを設定し表示](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/configuring-and-displaying-facets-on-the-storefront.html "Configuring and displaying facets on the storefront")でき、顧客が情報を検索し見つけやすくします。

> !注レンダリングバリアントにどれだけ多くのファセットフィルターレンダリングを挿入しても、それらは実行時にしか顧客に見えず、指定されたファセットのファセット値がリストに適用される場合に限ります。

このウォークスルーでは、集約されたファセットフィルターの構築方法を説明します。以下の方法を説明しています:

-   ファセットフィルターを作成します
-   チェックリストフィルターを追加
-   変異定義を作成する
-   レンダリングバリアントをアグリゲートされたファセットフィルターレンダリングと関連付けてください

> !重要新しいコマースファセットを作成した後は、[ファセットインデックスフィールドを定義](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/adding-a-property-field-to-an-index.html "Adding a property field to an index") し、ストアフロントサイトを再インデックスする必要があります。

## ファセットフィルターを作成します

検索結果署名を使って、複数のファセットフィルターをアグリゲートされたファセットフィルターで結合させることもできますが、必須ではありません。

ファセットフィルターを作成するには:

1.  コンテンツエディターで*sitecore/Content///Settings/Facets*へ行ってください。
    
    ![FacetsFolderContentEditor.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/FacetsFolderContentEditor.png)
    
2.  **Facets**フォルダを右クリックして「**挿入、Facetをリスト**」をクリックします。
    
3.  **メッセージ**ダイアログボックスでファセットの名前を入力し、**OK**をクリックします。
    
4.  **コンテンツ**タブの**ファセット**セクションで、名前とフィールド名を入力し、それがインデックスで使用されます。
    
5.  リボンの上で「 **保存**」をクリックします。
    

## チェックリストフィルターを追加

この手順では、ファセットにチェックリストフィルターを追加します。ただし、[任意のSXA Searchレンダリング](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/the-sxa-renderings-and-rendering-variants.html)を使用できます。

チェックリストフィルターを追加するには:

1.  コンテンツエディターで*sitecore/Content///Data/Search/Checklist Filter*へ行ってください。
    
2.  右クリック **でチェックリストフィルター** を選び、**挿入、チェックリストフィルター**をクリックしてください。
    
3.  **メッセージ**ダイアログボックスでフィルターの名前を入力し、**OK**をクリックします。
    
4.  **コンテンツ**タブの**ファセット**フィールドで、前の手順で作成したリストファセットを選択します。
    
    ![AggregatedFacetChecklistFilter.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/AggregatedFacetChecklistFilter.png)
    
5.  リボンの上で「 **保存**」をクリックします。
    

## 変異定義を作成する

各アグリゲーテッド・ファセット・フィルターにはレンダリングバリアントを関連付ける必要があります。

> !注カスタムフィールドを使用している場合、バリアント定義を作成する代わりに、既存のカテゴリページに新しいコンポーネントを挿入し、新しいファセットをストアフロントに表示するためにSearch Resultsレンダリングのバリアントを挿入してください。

変種定義を作成するために:

1.  コンテンツエディターで*sitecore/Content///Presentation/Rendering Variants/Aggregated Facet Filter*へ行ってください。
    
    *Aggregated Facet Filter*フォルダには、アグリゲートされたファセットフィルターで使えるすべてのバリアント定義が入っています。
    
2.  *Aggregated Facet Filter*フォルダを右クリックして「**挿入、バリアント定義**」をクリックします。
    
3.  **メッセージ**ダイアログボックスで、バリアント定義の名前を入力して**OK**をクリックします。
    
4.  新しく作成したバリアント定義を右クリックし、「 **挿入、コンポーネント**」をクリックします。
    
5.  **メッセージ**ダイアログボックスでコンポーネント名を入力し、**OK**をクリックします。
    
6.  **コンテンツ**タブのレンダリングアイテムフィールドで、*Renderings/Feature/Experience Accelerator/Search/Filter (Checklist)*を選択し、リボンの上で**保存****をクリックします。**
    
    ![AggregatedFacetFilterVariant.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/AggregatedFacetFilterVariant.png)
    
7.  **レンダリングパラメータ**フィールドで「**Configure**」をクリックします。
    
8.  **コントロールプロパティ**ダイアログボックスの**「データソース**」で「**ブラウズ**」をクリックし、前回の手順で作成したチェックリストフィルターを選択するダイアログボックスで「**関連コンテンツ選択**」ダイアログボックスで「**OK」**をクリックします。
    
9.  **コントロールプロパティ**ダイアログボックスの**SearchCriteria**セクション、**Search結果シグネチャ**フィールドで検索結果シグネチャ(例:*カテゴリページ*、*検索ページ*)を定義し、**OK**をクリックします。前のスクリーンショットでは、カテゴリページには3つのフィルターチェックリスト(ブランド、メーカー、商品の種類)があり、検索署名*カテゴリページ*とリンクされています。
    
10.  リンクしたいページ上のすべてのコンポーネント(レンダリング)について、例えば「結果の並べ替え」「Search結果」「もっと読み込む」など、ステップ4から9までを繰り返します。
     
11.  リボンの上で「 **保存**」をクリックします。
     

## レンダリングバリアントをアグリゲートされたファセットフィルターレンダリングと関連付けてください

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

レンダリングバリアントをアグリゲート面フィルターレンダリングと関連付けるために:

1.  コンテンツエディターで*sitecore/Content///Presentation/Partial Designs*へ行ってください。
    
2.  フォルダを展開し、「 **デフォルトの商取引カテゴリのコンテンツ** 」ページを右クリックして「 **エクスペリエンスエディター**」をクリックします。
    
3.  エクスペリエンスエディターのページで、ア **グリゲートされたファセットフィルター** のレンダリングをクリックし、バ **リアント** リストから前述の手順で作成したバリアント定義をクリックしてください。
    
    ![AggregatedFacetFilterVariantSelection.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/AggregatedFacetFilterVariantSelection.png)
    
4.  リボンの上で「 **保存**」をクリックします。
    
5.  コンテンツエディターで*sitecore/Content///Presentation/Partial Designs*に移動し、右クリックで「 **デフォルトの商取引カテゴリページ** コンテンツ」をクリックし、「 **アイテム公開**」をクリックします。
    
6.  「 **アイテム公開** 」ダイアログボックスで、公開オプションを選択し、「 **公開**」をクリックします。