Implementing Static Filters | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• How to add static filters to the Search configuration and frontend configuration

How to implement Static Filters

In this unit, you’ll learn how to implement static filters within the Search Configuration file (i.e., the backend configuration) as well as the Frontend configuration.

Update Your Search Configuration

First, set the custom field as a static by making it a searchableField in your Search Configuration file, and adding “staticFilter”: true. Static filters (just like facets) are set at the vertical level.

For example, the c_department field is set as a static filter here:

"searchableFields": {
  "builtin.entityType": {
    "nlpFilter": true
  },
  "c_mainEventText": {
    "textSearch": true
  },
  "c_department": {
    "staticFilter": true
  }
}

Now that you have set your static filter in the backend, you will need to make sure it appears in the frontend experience.

Add Static Filters to the Frontend

Just like we did with facets, there are two main steps to add static filters to the frontend:

• Adding the component to the HBS file
• Adding any additional configuration in the JSON file

1. Make sure to add (or uncomment-out) the following lines for the static filter component script and markup – it is called filterbox:

    {{!-- {{> templates/vertical-standard/script/filterbox}} --}}
    {{!-- {{> templates/vertical-standard/markup/filterbox}} --}}

2. Add the filterbox object in the ComponentSettings in the JSON file. If this is commented out in your file, make sure to remove both the opening (/**) and closing (**/). Unlike facets, note that static filters will not work unless you’ve specified them in ComponentSettings.

   "FilterBox": {
   // List of filter component configurations
   "filters": [
   {
     "type": "FilterOptions",
     // Label to show above the filters
     "label": "Department",
     //either singleoption or multioption
     "control": "singleoption",
     "optionType": "STATIC_FILTER",
     "options": [{
       // Label to show next to the filter option
       "label": "Cooking Department",
       // The api field to filter on, configured on the Yext platform
       "field": "c_department",
       // The display value for the above field to filter by
       "value": "Cooking Department"
     }, {
       "label": "Baking Department",
       "field": "c_department",
       "value": "Baking Department"
     }, {
       "label": "Coffee Department",
       "field": "c_department",
       "value": "Coffee Department"
     }]
   }
   ]
   },

For the full and most up-to-date list of Static Filter configuration options, you can reference the Filterbox section of the library documentation .

Here’s what this would look like on the frontend:

In addition to setting static filters for custom fields, you can also set a static filter for distance. To do so, you can add optionType for RADIUS_FILTER under the FilterBox in component settings.

Distance values are denoted in meters – however, you can label them as needed by converting meters to your desired value (such as miles or kilometers).

Here’s an example of how you would set this using miles as the label.

Note: for radius filter, you won’t need to set any fields in the backend Search configuration file since you are not sorting by a Knowledge Graph field. However, don’t forget you will still need to add the filterbox component to the HBS file.

"componentSettings": {
 "FilterBox": {
  "filters": [
    {
      "type": "FilterOptions",
      "label": "DISTANCE",
      "control": "singleoption",
      "optionType": "RADIUS_FILTER",
      "options": [{
          "label": "5 miles", 
          "value": 8046.72 // value is in meters
      },
      {
          "label": "10 miles",
           "value": 16093.4  
      },
      {
            "label": "25 miles",
            "value": 40233.6  
      },
      { 
            "label": "50 miles",
            "value": 80467.2  
      },
      { 
            "label": "200 miles",
            "value": 321869
      },
      { 
            "label": "400 miles",
            "value": 643738
      }]
    },
  ],
  "searchOnChange": true
 }
}

This could render as follows:

Just as with NLP Filters and Facets, Static Filters can also appear in the Applied Filters bar as you see above. This can be configured under the VerticalResults, or UniversalResults components in your JSON file.