Use the SXA search filter components

Abstract

Learn more about filters such as the Checklist, Managed Range, and Aggregated Facet 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.

The toolbox search section contains the SXA search 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.

    Select the data source for the filter.

    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.

    Combine multiple filters in the Aggregated Facet Filter

    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:

    Aggregated Facet Filter 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.

    The Facet Summary filter lists all active filters

    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.

    A Facet Filter result: click x to remove a filter

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

Checklist filter example that filters 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:

    Click the cogwheel to change the checklist filter settings

    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.

    SXA-filter-date.png
  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.

Managed range filter example that filters on price

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

    Click the cogwheel to change the range slider settings
  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
    A value format string example that displays the values of the slider

    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.