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

Overview

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

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 Searchable and Display Fields 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 Facets and Filters unit for the Theme, or the StaticFilters React component reference doc.
    • You can also use static filters for filter search, in which users select static filters to conduct their search. Learn more in the FilterSearch React component reference doc.

Facets

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.

facets or logic

book
Note
Remember that facets only show in vertical search in the full screen Test Search found on the Home screen.

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.

facets and logic

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.

Implementing Facets

Once you decide what fields you want to enable as facets (check out the Searchable Fields Best Practices reference doc for more tips on choosing fields), you need to configure both the Search backend and frontend:

  • Search backend: Set the desired fields as searchable fields with the type facet. Review the Searchable and Display Fields unit for a refresher or Add Facets to a Search Vertical 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:

  "verticals": {
    "restaurants": {
      "facetOrder": [
        "c_restaurantType",
        "c_restaurantFeatures"
      ],
      "searchableFields": {
        "builtin.entityType": {
          "nlpFilter": true
        },
        "builtin.location": {
          "nlpFilter": true
        },
        "c_restaurantFeatures": {
          "facet": true,
          "nlpFilter": true
        },
        "c_restaurantType": {
          "facet": true
        },
        "name": {
          "textSearch": true
        }
      }
    }
  },
unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 4

    What is the main difference between static filters and facets?

    Error Success Question 2 of 4

    Why are facets useful? (select all that apply)

    Error Success Question 3 of 4

    On a Products vertical, you select facets for Black and Blue under Color and Shirts under Category. What result set will show?

    Error Success Question 4 of 4

    Which fields would make good options for facets? (select all that apply)

    You're out of this world! 🌎

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Feedback