FilterBox | Yext Hitchhikers Platform

Background

The FilterBox component allows users to add multiple static filter components together, including filter options . Configuration on the top-level FilterBox component carries through to the individual filter components. Use FilterBox instead of individual filter components if:

A single apply button should impact all filters
The filters are grouped together visually
A set of static filter components should share settings

Bug Alert: There’s currently an issue with filterbox’s searchOnChange functionality. For now, setting this to false will simply hide the apply button, but a new search is needed to the filters to be applied.

Here’s a basic example:

this.addComponent("FilterBox", {
    container: ".filter-box-container",
    searchOnChange: true,
    filters: [
      {
        type: "FilterOptions",
        control: "singleoption",
        optionType: "STATIC_FILTER",
        label: "Services",
        options: [
            {
            label: "Pick Up",
            field: "pickupAndDeliveryServices",
            value: "In-Store Pickup"
            },
            {
            label: "Delivery",
            field: "pickupAndDeliveryServices",
            value: "Delivery"
            }
        ]
        },
        {
        control: "singleoption",
        type: "FilterOptions",
        optionType: "RADIUS_FILTER",
        showExpand: false,
        label: "Within",
        options: [
            {
            value: 8046.72,
            label: "5 miles"
            },
            {
            value: 16093.4,
            label: "10 miles"
            },
            {
            value: 40233.6,
            label: "25 miles"
            },
            {
            value: 80467.2,
            label: "50 miles"
            }
        ]
        } 
    ]
    });

Advanced Configuration & Example

After you’ve specified the individual filter components, you can also take advantage of several of the configuration options that will apply to all included filter components. Here, we’ve added a reset button per filter, and a reset button for the group of filters. We’ve also updated the showMoreLimit, which applies to both FilterOptions components. Finally, we’ve set expand to false for both FilterOptions components, but have overridden it for the static FilterOptions.

Property	Type	Default	Description
filters	object		REQUIRED List of filter component configurations
verticalKey	string		The `verticalKey`, required if not specified in top level `search` configuration.
title	string	Filters	Title to display above the filter components.
showCount	boolean	true	Show the number of results for each filter
searchOnChange	boolean		Execute a new search whenever a filter selection changes. If true, the Apply and Reset buttons will not display.
resetFilter	boolean		Whether to show a reset button per filter
resetFilterLabel	string	Reset	The label to use for the reset button per filter
resetFilters	boolean		Whether to show a reset button for the group of filters. Defaults to true if `searchOnChange` is true.
resetFiltersLabel	string	Reset	The label to use for the reset button for group of filters.
showMore	boolean	true	Whether to allow collapsing of excess filter options after a limit
showMoreLimit	number	5	The max number of filter options to show before collapsing extras
showMoreLabel	string	show more	If showMoreLimit is true, the label to show for displaying more filter options.
showLessLabel	string	show less	If showMoreLimit is true, the label to show for displaying fewer filter options.
showNumberApplied	boolean		Show the number of applied filter when a group is collapsed.
expand	boolean	true	Allow expanding and collapsing entire groups of filters
applyLabel	string	Apply	The label to show on the apply button. Will only display if `searchOnChange` is false.

Back

< Filter Options

Facets >

<% elem.innerText %>

FilterBox | Yext Hitchhikers Platform

Background

Advanced Configuration & Example

FilterBox API