Answers Headless React and the new Answers React Components now support a range filter for numbers and hierarchical facets, commonly found in e-commerce experiences. If a user selects a value that falls under another category, the parent categories will automatically be applied as filters. For example, when “Hats & Caps” are selected as a filter, “Accessories” as the parent category will also be applied.
Range Filter for Number Facets
To use a range filter, you will need to follow the setup instructions for number facets. When you add your NumericFacet, place the range filter conditionally below any fields where you’d like it to appear:
export function NumericFacets() {
return (
<Filters.Facets searchOnChange={true}>
{facets => {
return (
<>
{
facets.map((f, i) => {
return (
<Filters.FilterGroup key={f.fieldId} defaultFieldId={f.fieldId}>
<Filters.CollapsibleLabel label={f.displayName} />
<Filters.CollapsibleSection>
{f.options.map(o =>
<Filters.CheckboxOption
key={o.displayName}
value={o.value}
matcher={o.matcher}
label={o.displayName}
fieldId={f.fieldId}
/>
)}
{(f.fieldId === 'price.value') && <Filters.RangeInput getFilterDisplayName={getFilterDisplayName} inputPrefix={<>$</>} />}
</Filters.CollapsibleSection>
{(i < facets.length - 1) && <Divider />}
</Filters.FilterGroup>
)
})
}
</>
)
}}
</Filters.Facets>
)
}
This will display a range input for that facet:
Turn on the Spring '22: Numerical Facet Updates (early access) account feature to use this feature during the Early Access period. This feature will automatically be turned on for all accounts at General Availability for the Spring '22 Release.
Hierarchical Facets
To use hierarchical facets, you will need to:
- Set up the Knowledge Graph field with a specific structure.
- Set the field as a facet in the backend Answers config as you normally would.
- Configure the facet in the Answers frontend.
Knowledge Graph Field Structure
- Use a multi-option select list field with a consistent delimiter (“|”, “>”, etc.) to indicate the hierarchy. See an example below:
- Select the correct categories for an entity. If an entity’s category is a lower level in the hierarchy, make sure to select all parent categories as well. For example, if an entity’s category is “Appliances > Small Appliances > Refrigeration”, both “Appliances” and “Appliances > Small Appliances” must be selected as well:
Answers Frontend
The Answers React Component Library’s Filters component includes HierarchicalFacets; you’ll need to add it conditionally for any field that has the Hierarchical knowledge graph structure:
<Filters.Facets searchOnChange={true} className='mr-8 text-left min-w-[12rem]'>
{facets => facets.map((f, i) => {
if (f.options.length === 0) {
return null;
}
if (f.fieldId == "c_category") {
return (
<Fragment key={f.fieldId}>
<Filters.HierarchicalFacet facet={f} /> <div className="w-full h-px bg-gray-200 my-4"></div>
{(i < facets.length - 1)}
</Fragment>
)
}
return ( //normal facet
);
})}
</Filters.Facets>