Configuring and displaying facets on the storefront
The Sitecore Experience Accelerator (SXA) includes the Aggregated Facet Filter rendering. This rendering aggregates multiple facet filters. To display and configure facets on a page, you insert individual facet filter renderings or use the Aggregated Facet Filter rendering. With the aggregated facet filter, you create and associate a rendering variant and configure the Facet Filter renderings on the rendering variant. If a rendering variant with the required facet filters already exists, you can reuse it as long as the facet filters are configured with the required search signature.
The advantage of using the Aggregated Facet Filter rendering with a rendering variant is that it is easier to configure a set of facet filters on a rendering variant once and re-use it on various pages than to configure individual facet filter renderings. A facet filter is hidden when there are no facet filter values that apply to the search result or when the properties are not defined in the catalog.
Category pages are search driven and, with the Storefront site template, the Aggregated Facet Filter rendering is configured by default on the category page to display three checklist filters for Brand, Manufacturer, and Type of Good. These properties (brand, manufacturer, and type of good) are defined for products in the catalog and must be present for the filter to be displayed dynamically on the default Commerce Category page.
To extend a catalog item template, see Add new fields to a catalog item template.
The following figure shows the default Commerce category page with the:
-
Facet Summary rendering.
-
Aggregated Facet Filter rendering (sitecore/Layout/Renderings/Feature/Experience Accelerator/Search/Aggregated Facet Filter) with the Commerce rendering variant that contains the individual facets (brand, manufacturer, type of good).
-
Sort Results rendering (sitecore/layout/Renderings/Feature/Experience Accelerator/Search/Sort Results).
-
Results Count rendering (/sitecore/layout/Renderings/Feature/Experience Accelerator/Search/Results Count).
-
Commerce Search Results rendering (sitecore/Layout/Renderings/Feature/Commerce Experience Accelerator/Commerce Catalog/Commerce Search Results). This is a very versatile rendering that can have many different uses. With the Storefront site template, this rendering is used, by default, on the category page, the related products page, the promoted products page (on the Home page), as well as on the Search Results page.
-
Load More rendering (/sitecore/Content/<tenant>/<site>/Data/Search/Load More).
The following figure shows the Commerce Aggregated Facets filter displayed on the live storefront.
Aggregated facet filters and search signatures are useful, for example, when you want to associate a specific aggregated facet filter to a specific page. For example, the Storefront site template includes, on the Home page, two search areas - one for On Sale Televisions and one for Mira Laptops. In each case, the individual renderings (Commerce Search Results and Load More) are bound together using a search signature. This means that search results are isolated to one area (either televisions or laptops) and do not overlap.