FilterBox| Hitchhikers Platform

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

description: The label to show on the apply button. Will only display if searchOnChange is false.

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.