Facets and Filters | Yext Hitchhikers Platform
Facets and filters are both used to refine your search results. However, there are some important distinctions between them.
Static Filters
Static Filters are viewable “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 me blogs that were written in the last week)
- location filters (only show locations in a specific state)
Implementing Static Filters
To implement a static filter using our React component library, you can do so easily like so:
<StaticFilters
title="Cities"
fieldId="address.city"
filterOptions={[
{ value: "New York" },
{ value: "Los Angeles" },
{ value: "Chicago" },
]}
/>This creates the resulting UI:
For more information about the <StaticFilter /> component, check out the reference material
here
.
Filter Search
Filter Search allows the user to search for a filter to apply to their search - such as a location, a category, or a medical specialty. You’ll find a similar UI on sites like Google Flights and Zocdoc . Notice how on these sites you must select certain filters - like the arrival and destination city - before you conduct your search.
Our <FilterSearch /> component under the hood makes use of static filters to filter down search results during a query. You can learn more about <FilterSearch />
here
.
Facets
Facets are viewable “post-search”, since they’re dependent on the search 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 (which is available since the facets are returned from the server). 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. 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, there is one facet set with multiple facet options selected. The results will show all entities that are either black or white.
However, when there are multiple different facets (lets call them facet set 1 and facet set 2), selecting an option in both facet sets 1 and 2 will cause the results to display only entities that contain both selected options from each facet set.
In the above example, there are two different facet sets and the results will only display entities that are both basketball shoes and for men.
Good use cases for facets are:
- sizes/colors for product entities (S, M, L / Red, Blue, Green)
- job types for job entities (full time, part time, etc.)
Implementing Facets
We distinguish between three different kinds of facets in our platform: Standard Facets, Numerical Facets, and Hierarchical Facets.
To make a field eligible as a facet, we need to make sure it’s set as a facet in the searchableFields attribute in the search configuration. This exposes the field in the API response and allows facets to be applied on that field. For example:
To make a field eligible as a facet, we need to make sure it’s set as a facet in the searchableFields attribute in the search configuration. This exposes the field in the API response and allows facets to be applied on that field. For example:
{
"verticals": {
"products": {
"entityTypes": ["product"],
"searchableFields": {
"c_color": {
"facet": true
},
"c_size": {
"facet": true
}
}
}
}
}We can then implement facets from the component library like so:
<StandardFacets
collapsible={true}
defaultExpanded={false}
excludedFieldIds={["c_categories"]}
/>
<NumericalFacets inputPrefix={<p>$</p>} />
<HierarchicalFacets includedFieldIds={["c_categories"]} />Checkout our in-depth reference material on Standard , Numerical , and Hierarchical facets.
For more information on facets and filters, see our Hitchhikers documentation here .