FilterBox | Yext Hitchhikers Platform
Background
The FilterBox component allows users to add multiple static filter components together, including
FilterOptions
. 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.
FilterBox API
| 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.
|