Facets and Filters (Backend) | Yext Hitchhikers Platform
What You’ll Learn
By the end of this unit, you will be able to:
- Define static filters and facets
- Explain the logic of choosing multiple facets within the same facet set and across facet sets
- Explain best practices on when to implement facets and which type to choose
Facets and filters are both useful methods for allowing the end user to refine the search results using various attributes of your content. There are some important distinctions between them:
- Static Filters: Filters that are applied before the query is run, to limit the results that are searched on
- Facets: Filters that are generated after the query is run, to refine the results that are returned
Static filters are applied “pre-search” and are not dependent on the search query. They are defined on the client-side so whenever a user queries an experience, any enabled static filter is submitted as an additional filter with the query, restricting the results that are returned.
Good use cases for static filters are:
- Time filters for blog entity types (only show blogs that were written in the last week)
- Location filters (only show locations in a specific state)
Implementing Static Filters
Once you decide what fields you want to enable as a static filter, you need to configure both the Search backend and frontend:
- Search backend: Set the desired fields as searchable fields with the type
staticFilter(this must be done in the JSON editor, not the UI). Review the unit for a refresher or the Add Facets to a Search Vertical help article for step-by-step instructions.
- Search frontend: Add static filters to your frontend. Check out the for the Theme, or the React component reference doc.
Facets are applied “post-search”, since they’re dependent on the search query, and can be used to further refine a query. They are returned by the API (from the server) and then displayed client-side. Depending on the results that are returned, the user will see facet options with a number next to each one indicating the result count. If no results are returned in the query for a given facet option, that option will not appear.
Users can toggle a facet option checkbox on to further refine the search results. In the example below, the Restaurants vertical has facets for Restaurant Features and Restaurant Type. After searching for “restaurants near me,” the user is now presented with options to narrow down their search. Maybe they like the idea of listening to live music while eating their tacos outside, but they didn’t know this was an option until they saw it in the facets.
Facet Logical Operators
Within a single facet, if multiple options are selected (let’s call them option A and option B) the results will display any entities that contain either option A OR option B. In the above example, the Restaurant Features facet set has multiple facet options selected. The results will show all entities that have either outdoor seating or live music.
However, when there are multiple different facets, selecting an option in both facet sets will cause the results to display only entities that contain both selected options from each facet set. In the below example, both the Restaurant Features facet set and the Restaurant Type facet set has options selected. The results will show all entities that have both live music and is a food truck.
Facet Best Practices
When deciding whether to implement facets, think about the types of queries your users are searching for and how they would want to refine these searches. In most cases, facets are encouraged. You’ll want to find the balance in number of facets that matches your users’ needs: having facets are helpful, but too many facets can be overwhelming.
For example, take the query: “I need a doctor.” This is a pretty generic query that healthcare providers may get often. To help users narrow down their search, you might want to offer up facets for “Conditions Treated,” “Insurances Accepted,” or “Speciality.”
Example use cases include:
- Sizes for the Product entity type: XS, S, M, L, XL
- Menu sections for the Menu Item entity type: Appetizers, Pasta, Pizza, Salads, Sides, Dessert
- Employment Offerings for the Job entity type: Full Time, Part Time, Flexible Hours
- Services for the Location entity type: Drive-thru, ATM
Types of Facets
We distinguish between three different kinds of facets in our platform: standard facets, numerical facets, and hierarchical facets.
Standard facets are the ones you see above, where the field values are pulled in directly as facet options.
Numerical facets allow you to use static number ranges as facets, which is particularly useful for price ranges, multipack options, and more.
Hierarchical facets allow users to click through a ‘hierarchy’ of categories to filter the results. The most common use case for using Hierarchical Facets are for category fields. Hierarchical facets are only supported in Search UI React, and not the Hitchhikers Theme.
- Search backend: Set the desired fields as searchable fields with the type facet. Review the
unit for a refresher or
help article for step-by-step instructions.
- Numerical facets take a bit more setup on the backend.
- Search frontend: Add facets to your frontend. Check out the following resources based on which frontend method you’re using:
Also check out the Set up Standard Facets, Set up Numerical Facets, and Set up Hierarchical Facets guides for end-to-end instructions and the Facets and Sorting (Code Snippets) reference doc for code snippets to customize your facets.
Setting Facet Order
While most facet customizations are made in the frontend, there is one customization you can make in the backend: setting the order in which facets appear on the frontend for each vertical object. The facets at the top of the list will get the most attention. Consider placing the most general, high-level filter categories at the top of the list and the more specific ones at the bottom. If you don’t specify an order, the algorithm will determine this for you.
Setting facet order can only be done in the JSON editor. To do this, include a property called
facetOrder in your vertical and include an array of facet fields in the order you want them to appear. Any facets that appear on a given search that are not included in the
facetOrder property will be shown in an arbitrary but consistent order, chosen by the algorithm.
For example, to switch the facet order of the Restaurants example above, we would use the following JSON configuration: