Use the SXA search filter components
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.
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.
Use the Aggregated Facet Filter component
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:
-
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.
-
Now you can add filters to the variant. Right-click the rendering variant, click Insert, and click Component.
-
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)
-
Save the item.
-
In the VariantDetails section, in the Rendering Parameters field, click Configure.
-
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.
-
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:
Add the Facet Summary component
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.
Add the Filter (Checklist) component
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:
-
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.
-
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.
-
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.
Add the Filter (Date) component
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:
-
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.
-
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.
-
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.
Add the Filter (Dropdown) component
The Filter (Dropdown) filter filters search results based on items that are tagged with a selected facet.
To add a Filter (Dropdown) component:
-
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.
-
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.
-
On the Filter (Dropdown) toolbar, click More, and click Edit Component Properties and specify the Sort order for the filter in the FilterCriteria section.
Add the Filter (Managed Range) component
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:
-
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.
-
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.
-
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.
-
Add the Filter (Radius) component
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:
-
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.
-
Right-click the Radius Scheme you created, click Insert, and click Radius Value.
-
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.
-
Add the Filter (Range Slider) component
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:
-
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.
-
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:
RequestResponseFruit 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.
Add the Filter (Slider) component
The Filter (Slider) component filters search results based on a specific facet within the selected range.
To add the Filter (Slider) component:
-
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.
-
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.
-
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.