Use the SXA search filter components

The Aggregated Facet Filter component lets you combine several filters. For example, if you want visitors of a media service provider to be able to filter on type (TV series, documentary, film, and so on) and genre (science fiction, horror, comedy, and so on).

To configure and add the Aggregated Facet Filter component:

1. In the Content Editor, navigate to sitecore/Content///Presentation/Rendering Variants/Aggregated Facet Filter, and add a rendering variant. For example, add a variant and name it Aggregated filter variant.

2. Now you can add filters to the variant. Right-click the rendering variant, click Insert, and click Component.

3. In the VariantDetails section, in the Rendering Item field, select the filter. For example, add the drown-down filter: Renderings/Feature/Experience Accelerator/Search/Filter (Dropdown)

4. Save the item.

5. In the VariantDetails section, in the Rendering Parameters field, click Configure.

6. In the General section, in the Data Source field, click Browse to select the data source.

   For example, select Fruit Size.

   

   You can add other filters using the same procedure.

7. If you now add both the Search results component and your Aggregated Facet Filter variant to the page in the Experience Editor, visitors can use multiple filters at the same time to search your site.

   

   For example, if you use an Aggregated Facet Filter component with a Checklist filter on fruit size, and a Dropdown filter on fruit taste, then selecting medium size and sour taste, delivers the following search results:

   

Use the Facet Summary component, display the active filters on the page and allow visitors to remove them one by one or in bulk.

To add the Facet Summary component:

• From the Toolbox, drag the Facet Summary component to the page. By default, the Facet Summary component contains the Filter title: Selected Filters and the Remove Filter text: Clear all facets. Click the cogwheel in the Facet Summary toolbar to edit these labels.

  

  For example, if your page contains filters on the size, taste, and color of fruit, and you add the Facet Summary component, visitors can remove filters separately by clicking the relevant x, or remove all filters by clicking Clear all facets.

  

The Filter (Checklist) component filters search results based on selected values in a checklist. For example, to search products on size:

To add the Filter (Checklist) component:

1. From the Toolbox, drag the filter to the page, and in the Filter (Checklist) toolbar, click the cogwheel to set the facet that you want to filter on.

2. You can edit the following fields:

   

   Field	Description
   Facet	Select the facet that you want to filter on.
   Filter title	Enter the text to display as the title for the filter.
   Threshold show more expander text	Enter the text for the label to display more facets.
   Threshold show less expander text	Enter the text for the label to display fewer facets.
   Threshold section separator text Other	Enter the text for the Other label for use in a specific component configuration.
   Button label	Enter the text for the label of the button to trigger the filter.
   Empty value text	Enter the text that displays for facets with no name.
   Remove filter text	Enter the text for the label of the button to remove the filter.

3. On the Filter (Checklist) toolbar, click More, and click Edit Component Properties to specify details for the filter in the FilterCriteria section:

   Field	Description
   Sort order	Determines how facets are sorted. For example, sort on name or count.
   Highlight threshold	Determines the results that are highlighted.
   Other section upper bound	If specified, the values in the filter are narrowed down to this value and a Show More button is displayed. For example, if your filter displays (all) 15 colors and you set this parameter to 2, then only the first 2 colors are displayed and to see more you must click Show More.
   Collapse on selection	If selected, the facets that are not selected do not display.
   Multiple Selection	If selected, you can select multiple facets for your search.

The Filter (Date) component lets you filter the search results on a selected date. For example, for a blog page you can provide time-based filters to allow visitors to filter on recent posts, or only see posts from a certain period.

To add the Filter (Date) component:

1. From the Toolbox, drag the filter to the page, and in the Filter (Date) toolbar, click the cogwheel to set the facet that you want to filter on.

   

2. You can edit the following fields:

   Field	Description
   Facet	Select the facet that you want to filter on.
   Filter title	Enter the text to display as the title for the filter.
   From date label	Enter the text to display as the title of the From date.
   To date label	Enter the text to display as the title of the To date.
   Remove filter text	Enter the text for the label of the button to remove the filter.

3. On the Filter (Date) toolbar, click More, and click Edit Component Properties and then specify details for the filter in the FilterCriteria section:

   Field	Description
   From date default offset	Determines how many days in the past the visitor can select.
   From date display format	Select the date format.
   Show "From" date months	Select to display the From date calendar control drop-down menu with months and years.
   Allow past days [shared]	Select to allow the visitor to select days in the past.
   Show "From" date control [shared]	Select to allow the visitor to select a range for the start date.
   To date default offset	Determines how many days in the future the visitor can select.
   To date display format	Determines the date format in the To date control.
   Show "To" date months	Select to display the To date calendar control drop-down menu with months and years.
   Allow future days	Select to allow the visitor to select days in the future.
   Show "To" date control	Select to allow the visitor to select a range for the end date.

The Filter (Dropdown) filter filters search results based on items that are tagged with a selected facet.

To add a Filter (Dropdown) component:

1. From the Toolbox, drag the filter to the page, and in the Filter (Dropdown) toolbar, click the cogwheel to set the facet that you want to filter on.

2. You can edit the following fields:

   Field	Description
   Facet	Select the facet that you want to filter on.
   Filter title	Enter the text to display as the title for the filter.
   Empty value text	Enter text to display for facets with no name.
   Unselected text	Enter text to display in the first (empty) drop-down option or you can leave this blank.
   Remove filter text	Enter the text for the label of the button to remove the filter.

3. On the Filter (Dropdown) toolbar, click More, and click Edit Component Properties and specify the Sort order for the filter in the FilterCriteria section.

The Filter (Managed Range) component specifies the result with a minimum and maximum, for example, if you want people to filter products based on a price range.

To add the Filter (Managed Range) component:

1. From the Toolbox, drag the filter to the page, and in the Filter (Managed Range) toolbar, click the cogwheel to set the facet that you want to filter on.

2. You can edit the following fields:

   Field	Description
   Facet	Select the facet that you want to filter on.
   Filter title	Enter the text to display as the title for the filter.
   Button label	Enter text for the label of the button that triggers the filter.
   From label	Enter the text to display as the title of the From date.
   To label	Enter the text to display as the title of the To date.
   Remove filter text	Enter the text for the label of the button to remove the filter.

3. On the Filter (managed Range) toolbar, click More, and click Edit Component Properties to specify the Sort order for the filter in the FilterCriteria section.

   Field	Description
   Selected min value	Determines the minimum value of the range.
   Selected max value	Determines the maximum value of the range.
   Ranges	Select one of the following ranges: Show manual and managed range - displays both predefined, named, and manual range text boxes. Show manual range - displays two text boxes in which the visitor can enter the range manually. Show managed range - displays predefined ranges with radio buttons or check boxes.
   Managed range mode	Select to enable multiple selection of managed ranges.

The Filter (Radius) component filters the search results based on the distance from the current user location or the location provided in the Location Filter rendering.

To add the Filter (Radius) component:

1. In the Content Editor, navigate to sitecore/content///Data/Search, right-click Radius, click Insert, and click Radius Scheme enter a name and click Ok.
2. Right-click the Radius Scheme you created, click Insert, and click Radius Value.
3. Click the new radius value and, in the General section, add values for the following fields:
   • Title - enter a title. This field must not be empty (if empty, it is not displayed).
   • Value - enter a number. If you leave this field empty, the search is not narrowed.

The Filter (Range Slider) component filters the search results based on a facet that is less, more, or equal to the value selected by a visitor.

To add the Filter (Range Slider) component:

1. From the Toolbox, drag the filter to the page, and in the Filter (Range Slider) toolbar, click the cogwheel to set the facet that you want to filter on.

   

2. You can edit the following fields:

   • Field: Description
   • Facet: Select the facet that you want to filter on.
   • Selected value format string: Enter the value format string. For example:

   Fruit with {from}-{to} calories

   • Filter title:: Enter the text to display as the title for the filter.
   • Change step: Specify how granular the steps of the slider are.
   • Selected maximal value: Specify the maximal value of the range.
   • Selected minimal value: Specify the minimal value of the range.
   • Max range value: Specify the maximum value available for selection.
   • Min range value: Specify the minimum value available for selection.
   • Remove filter text: Enter the text for the label of the button to remove the filter.

The Filter (Slider) component filters search results based on a specific facet within the selected range.

To add the Filter (Slider) component:

1. From the Toolbox, drag the filter to the page, and in the Filter (Slider) toolbar, click the cogwheel to set the facet that you want to filter on.

2. You can edit the following fields:

   Field	Description
   Facet	Select the facet that you want to filter on.
   Selected value format string	Enter the value format string.
   Filter title	Enter the text to display as the title for the filter.
   Min value	Specify the minimum value.
   Max value	Specify the maximum value.
   Selected value	Specify the value the slider is positioned on at start.
   Change step	Specify how granular the steps of the slider are.
   Remove filter text	Enter the text for the label of the button to remove the filter.

3. On the Filter (Slider) toolbar, click More, and click Edit Component Properties to specify the range and the relation in the FilterCriteria section.

   Field	Description
   Show range indicators	Select to display start and end values.
   Relation	Specify an option to indicate how the slider works. Options are: Exactly, Less than, Less than or equal, More than, or More than or equal. For example, if you want the filter to find all fruit that is cheaper than 2 euros.