Walkthrough: Configuring and displaying facets on the storefront

Current version: 10.3

You can configure and display facet including the Aggregated Facet Filter rendering on the storefront to make it easier for customers to search for and find information.

Note

Regardless of how many facet filter renderings you insert on the rendering variant, they are only visible to customers at runtime and only if there are facet values for the given facet that applies to the items listed.

This walkthrough describes how to build an aggregated facet filter. It describes how to:

  • Create the facet filters

  • Add a checklist filter

  • Create a variant definition

  • Associate the rendering variant with the Aggregated Facet Filter rendering

Important

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

Create the facet filters

You can use a search results signature to bind the multiple facet filters in an Aggregated Facet Filter together but it is not a requirement.

To create a facet filter:

  1. In the Content Editor, go to sitecore/Content/<tenant>/<site>/Settings/Facets.

  2. Right-click the Facets folder and click Insert, List Facet.

  3. In the Message dialog box, enter a name for the facet, and click OK.

  4. On the Content tab, in the Facet section, enter a name and field name, which is used in the index.

  5. On the ribbon, click Save.

Add a checklist filter

In this procedure, you add a checklist filter to the facet. You can, however, use any of the SXA Search renderings.

To add a checklist filter:

  1. In the Content Editor, go to sitecore/Content/<tenant>/<site>/Data/Search/Checklist Filter.

  2. Right-click Checklist Filter and click Insert, Checklist Filter.

  3. In the Message dialog box, enter a name for the filter and click OK.

  4. On the Content tab, in the Facet field, select the list facet you created in the previous procedure.

  5. On the ribbon, click Save.

Create a variant definition

You must associate each Aggregated Facet Filter with a rendering variant.

Note

If you are using a custom field, instead of creating a variant definition, insert new components into the existing Category Page and Search Results rendering variants in order to display the new facet on the storefront.

To create a variant definition:

  1. In the Content Editor, go to sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants/Aggregated Facet Filter.

    The Aggregated Facet Filter folder contains all the variant definitions that you can use for the Aggregated Facet Filter.

  2. Right-click the Aggregated Facet Filter folder and click Insert, Variant Definition.

  3. In the Message dialog box, enter a name for the variant definition and click OK.

  4. Right-click the newly created variant definition and click Insert, Component.

  5. In the Message dialog box, enter a name for the component and click OK.

  6. On the Content tab, in the Rendering Item field, click and select Renderings/Feature/Experience Accelerator/Search/Filter (Checklist) and, on the ribbon, click Save.

  7. In the Rendering Parameters field, click Configure.

  8. In the Control Properties dialog box, under Data Source, click Browse, and, in the Select the Associated Content dialog box, select the checklist filter you created in the previous procedure, click OK.

  9. In the Control Properties dialog box, in the SearchCriteria section, in the Search results signature field, define a search result signature (for example, category-page, search-page) and click OK. In the previous screenshot, the Category Page has three filter checklists (brand, manufacturer, type of good) linked with the search signature category-page.

  10. Repeat steps 4 to 9 for all the components (renderings) on the page that you want to link, for example, Sort results , the Search results, and Load more.

  11. On the ribbon, click Save.

Associate the rendering variant with the Aggregated Facet Filter rendering

Note

If you are appending your facet to the existing variant definition, you do not need to complete this procedure.

To associate the rendering variant with the Aggregated Facet Filter rendering:

  1. In the Content Editor, go to sitecore/Content/<tenant>/<site>/Presentation/Partial Designs.

  2. Expand the folder, right-click the Default Commerce Category Page Content and click Experience Editor.

  3. In the Experience Editor, on the page, click the Aggregated Facet filter rendering and, from the Variant list, click the variant definition you created in the previous procedure.

  4. On the ribbon, click Save.

  5. In the Content Editor, go to sitecore/Content/<tenant>/<site>/Presentation/Partial Designs, right-click Default Commerce Category Page Content and click Publish Item.

  6. In the Publish Item dialog box, select the publishing options, and click Publish.

Do you have some feedback for us?

If you have suggestions for improving this article,