loading

FilterBox

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.