# Use the SXA search filter components

Abstract

SXA comes with several filter components to allow website visitors to narrow their search results. This topic describes how to work with the different filters.

### Note

For most search filters, you can set the Search results signature. In the filter component properties, you can enter the unique signature of a specific Search Results rendering to limit the search results. This can be convenient when you want to have multiple searches on the same page.

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/<Tenant>/<Site>/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.

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.

1. In the Content Editor, navigate to sitecore/content/<Tenant>/<Site>/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.