SXA Search with Multiple Checklist Filters

One of the key requirements for our Sitecore site is to enhance the search functionality. Previously, the search feature was linear, allowing users to select only one filter value from a dropdown. However, in the new mockup that I got to honor to design for and eventually got approved, users will now be able to search using multiple checklist filters.

Imagine we’re building a tech-focused website that includes a search feature where users can input keywords and apply multiple filters, such as Content Type, Topic, and Threats, to refine the results. The interface would display filtered results, along with a “Load more” button, a results count, and filter pills allowing users to easily deselect specific filters. Visually, it would look something like this:

Search Architecture

To implement this mockup and functionality, we will leverage the out-of-the-box (OOTB) components provided by SXA. The SXA framework excels at organizing components, datasources, and settings, making the development of complex features like this much more straightforward. Below is a diagram I created to illustrate how the elements of the search feature are interconnected:

How It Works:

1. Site Search Components

To build this Site Search, the five SXA OOTB components (those with uppercased titles) are:

• Search Box
• Filter (Checklist)
• Results Count
• Search Results
• Load More

Add all these components to the page, ensuring they are linked by a single unique identifier called a signature. Make sure that each component’s properties are set with the same signature to maintain coherence.

2. Search Box

Sitecore provides more information on how to configure a Search Box here. Under Search Box component properties > datasource, you can set the text values related to display. Auto-suggest is enabled by default which means that when the user types in 5 characters, a Search Results dropdown would pop-up, adding to a better user experience.

Sitecore offers detailed guidance on configuring a Search Box here. In the Search Box component properties under “datasource,” you can customize the display text values. Auto-suggest is enabled by default, so once a user types in 5 characters, a dropdown with search results will appear, enhancing the overall user experience.

3. Search Scope

Both the Search Box and Search Results components require a Scope to be configured in their properties. These scopes can be found under /sitecore/content/<Tenant>/<Site>/Settings/Scopes/, where you can create one to define the limits on the site. For instance, you can specify an item path where Sitecore should begin searching and/or define which types of items, based on templates, are allowed to appear in the Search Results.

4. Search Results

The datasource for this component is primarily used to display UI labels, but other properties like Page Size, Default Sort Order, and Rendering Variants are also important. To create a 4-column layout for the search results, you can define a Rendering Variant under /sitecore/content/<Tenant>/<Site>/Presentation/Rendering Variants/Search Results to manage the styling.

5. Page Template

The items displayed in the Search Results are determined by the templates selected in the Build Query within the defined Search Scope. In our case, these templates include Blog Post, Resource Document, Site Page, Announcement, and others that we want visitors to be able to search. The key strategy is to ensure all these templates contain fields for tagging. This is done by creating a partial template called Taxonomy, representing a classification system, which is inherited by the relevant templates. The following fields should be set with Tag Treelist as their field type:

• ContentTypes
• Topics
• Threats

6. Tags

All these fields should reference a Tags list datasource located under /sitecore/content/<Tenant>/<Site>/Data/Tags. The relevant pages on the site must have values selected for the Taxonomy fields. Using PowerShell scripting is an effective way to automate the population of these pages.

7. Filter (Checklist)

To configure the Filter Checklist, first enable the “Multiple Selection” property in the component settings to allow users to select multiple checkboxes in each checklist. Additionally, it’s crucial to set up the Datasource correctly, which can be found or created under /sitecore/content/<Tenant>/<Site>/Data/Search/Checklist Filter. The Datasource for the Checklist Filter should be linked to the Facet for Content Type.

8. Facets

A facet is a feature used in search and filtering systems that allows users to refine search results based on specific attributes or categories. Facets represent distinct dimensions or filters that can be applied to the search results, such as categories, tags, or types. For example, in an e-commerce site, facets might include options like product category, brand, price range, and color, allowing users to narrow down their search results according to their preferences. In SXA, facets are managed under /sitecore/content/<Tenant>/<Site>/Settings/Facets. Create separate facets for Content Type, Topics, and Threats. The key field to configure is the Field Name.

The value for this field should be the field name from the Taxonomy partial template, written in lowercase. Following this step is crucial because it will be used as the basis for defining the field in the Solr Index configuration.

9. Solr Index Configuration

The SXA Solr Search config file called Sitecore.XA.Foundation.Search.Solr.config is found under App_Config/Modules/SXA/z.Foundation.Overrides. Add index fields for the contenttypes, topics and threats and set its returnType to stringCollection.

<indexConfigurations>
	<defaultSolrIndexConfiguration type="Sitecore.ContentSearch.SolrProvider.SolrIndexConfiguration, Sitecore.ContentSearch.SolrProvider" >
		<fieldMap type="Sitecore.ContentSearch.SolrProvider.SolrFieldMap, Sitecore.ContentSearch.SolrProvider">
			<fieldTypes hint="raw:AddFieldByFieldTypeName">
				<fieldType fieldTypeName="tag treelist" returnType="stringCollection"/>
				<fieldType fieldTypeName="multiroot treelist" returnType="stringCollection"/>
			</fieldTypes>
			<fieldNames hint="raw:AddFieldByFieldName">
				<field fieldName="tags" returnType="stringCollection" />
				<field fieldName="contact.tags" returnType="stringCollection" />
				<field fieldName="contenttypes" returnType="stringCollection" />
				<field fieldName="topics" returnType="stringCollection" />
				<field fieldName="threats" returnType="stringCollection" />
			</fieldNames>
		</fieldMap>
		<fieldReaders type="Sitecore.ContentSearch.FieldReaders.FieldReaderMap, Sitecore.ContentSearch">
			<mapFieldByTypeName hint="raw:AddFieldReaderByFieldTypeName">
				<fieldReader fieldTypeName="tag treelist" fieldReaderType="Sitecore.XA.Foundation.Search.FieldReaders.NameLookupListFieldReader, Sitecore.XA.Foundation.Search"/>
				<fieldReader fieldTypeName="multiroot treelist" fieldNameFormat="{0}" fieldReaderType="Sitecore.ContentSearch.FieldReaders.MultiListFieldReader, Sitecore.ContentSearch" />
			</mapFieldByTypeName>
		</fieldReaders>
	</defaultSolrIndexConfiguration>
</indexConfigurations>

After deploying a patch for this in your project, the Sitecore CM instance will restart. When the CMS is ready, open the Control Panel and Populate the Solr Managed Schema. Once that’s done, rebuild indexes via Index Manager.

After rebuilding the Indexes, follow the steps below to verify if the documents were populated with the newly added index fields:

1. Access your Solr Admin Panel via url (usually https://localhost:8983/solr)
2. In the Core Selector, select either the <name>_master_index or <name>_sxa_master_index
3. Click the Schema. In the field dropdown, search for the index field that has been defined.
4. Once verified, go to Query and search for the any Page under a specific item path that has contenttypes values.

Solr Query:

_fullpath:{starting item path}/* 
AND _templatename:Page
AND contenttypes_sm:[* TO *]

10. Filter Pills

Since Filter Pills aren’t built into SXA by default, we’ll develop them on the frontend. Here’s the approach:

• All interactions with the Search Box, Search Results, or Filter (Checklist) are managed through URL query strings, allowing us complete control over the behavior of SXA Search.

• The default elements of these SXA out-of-the-box components, such as the “Search” button on the Search Box and the “Filter” button on the Search Filter, will be hidden to prevent their default submit behavior.
• Each checkbox selected in the Filter Checklist will be silently recorded using a JavaScript object, which will then be assembled for submission.
• Once the user has entered the search term and selected the checkboxes in the checklists, they will click the custom “Search” button to initiate the search. This action will trigger the assembly of the URL and query string based on the JavaScript object.
• The page will load with the search results. Since we know the URL structure, we can parse the selected checkboxes and dynamically generate the filter pills. Subsequent interactions will be managed by the frontend.

There you have it! SXA is fantastic. Happy Searching!