Use and configure a facet for the storefront search

Version: 9.2

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.

The following facets are available for the storefront in addition to the Sitecore facets.

Facet

Description

Commerce Brand

Groups the results according to brand.

Commerce Color

Groups the results according to color.

Commerce Height

Groups the results according to height.

Commerce Length

Groups the results according to length.

Commerce Size

Groups the results according to size.

Commerce Tags

Groups the results according to tags that you have defined and associated with a product.

Commerce Weight

Groups the results according to weight.

Commerce Width

Groups the results according to width.

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

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

Configure a run-time search facet

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).

Specify the fields that a facet targets

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.

Do you have some feedback for us?

If you have suggestions for improving this article,