Use and configure a facet for the storefront search

Abstract

How to use facets to filter and limit the search results displayed on the storefront.

You use facets to filter and limit search results displayed on a storefront. A facet is a way in which a product can be viewed or classified. For example, for an online car dealership, you could base a search on the make, model, color, year, and price of the car. When you build the search page in the Experience Editor, you add the Product Facet rendering, which is available in the Commerce Catalog section of the Toolbox.

Note

As SXA Storefront evolves, new renderings are available that provide a better developer experience than the renderings listed here. In particular, new renderings are available for Product Facets, Category Navigation, and Search Initiated.

The following facets are available for the storefront (/sitecore/Content/Sitecore/Storefront/Settings/Facets) in addition to the Sitecore facets.

Note

Facets in the System folder /sitecore/System/Settings/Buckets/Facets) are only used with earlier renderings.

Facet

Description

Brand

Groups the results according to brand.

Manufacturer

Groups the results according to manufacturer.

Type of Good

Groups the results according to the type of good.

Important

After you create new facets, you need to define a facet index field and then re-index the storefront site.

The following figure shows the Product Facets rendering as it appears in the Experience Editor,

FacetsEE.png

On the storefront site, the Product Facets rendering could look like this:

FacetsLive.png

For each category page on the storefront, the run-time search facet determines the results that are displayed.

To configure run-time search facets:

  1. In the Content Editor, navigate to sitecore/Content/<tenant>/<site>/Home/Catalogs and click the relevant catalog.

  2. On the Content tab, in the Commerce Search section, click the facets you want to use when displaying search results.

    Facets are defined in the content tree (sitecore/system/Settings/Buckets/Facets).

Facets filter information based on the property that you associate with it.

To specify fields for the facet to target:

  1. In the Content Editor, navigate to sitecore/Settings/Buckets/Facets.

  2. Click the facet that you want to specify a target for.

  3. On the Content tab, in the Facet section, specify a name for the facet and a display name.

  4. In the Facet Filter field, define the facet filter to limit the facet values that the search uses. You can enter a reference to a class that implements the ISimpleFacet interface. You must create this class yourself, and it has to return a string. You can implement logic in this class that determines the filters that the facet should search for. The intention is that this class reduces the number of filters. This is how some of the Sitecore search facets are implemented, for example, Date Range or File Size.

  5. In the Field Name field, specify the fields that you want users to be able to search on in a comma-separated list. When you specify a field name, Sitecore creates a facet based on this field. You can enter multiple field names as a comma-separated list and when you do, Sitecore creates hierarchical filters (for example, belts/black, belts/white, and so on). Specify the field name in lowercase and use the name of the field as it is in the index.

  6. Select the Enabled check box to make the facet functional.

  7. To see how the new facet filter works on your storefront, open a page in the Experience Editor and add the Search Box and the Search Results rendering to the page. In the Select the Associated Content dialog box, click the filter that you created and click OK.

  8. Save the page.

    When you view the page in Preview mode, you can now filter the search results.