Facet

One facet, as the part its type calls for: options and categories as checkboxes, a toggle as a switch, a range as a slider. The changes come back per kind, ready for a listing's facet navigation.

import { Facet } from "@evolve-storefront/feature-product/facet";

Renders inside ProductListingProvider.

Preview

OptionsOpen in Storybook ↗

Usage

Options as checkboxes with their counts, the first five until the shopper asks for more. An option that matches nothing is left out.

const { facets, change, isPending, isSearchable } = useFacetNavigation({ … });

{facets.map((facet) => (
  <Facet
    key={facet.key}
    facet={facet}
    isPending={isPending}
    searchable={isSearchable(facet)}
    rangeUnit={facet.key === "price" ? currencyRangeUnit(currency) : undefined}
    onOptionChange={(key, value, selected) => change({ type: "option", key, value, selected })}
    onRangeChange={(key, min, max) => change({ type: "range", key, min, max })}
    onToggleChange={(key, value) => change({ type: "toggle", key, value })}
  />
))}

Props

Prop	Type	Description
facet	FacetData
onOptionChange	(facetKey: string, value: string, selected: boolean) => void	A value of an options or category facet picked or unpicked.
onRangeChange	(facetKey: string, min: number, max: number) => void	A range's bounds, in the backend's units.
onToggleChange	(facetKey: string, value: boolean | undefined) => void	A toggle on, or cleared.
isPending?	boolean
searchable?	boolean	Whether this facet offers a search box over its options.
rangeUnit?	RangeUnit	A range facet's unit; plain when absent.
showLimit?	number

Change the layout

Pass children to Facet to arrange its parts yourself. Every part is exported from @evolve-storefront/feature-product/facet.

FacetOptionsA facet's values as checkboxes with their counts, the first showLimit until the shopper asks for more, searchable with the matches marked.

Prop	Type	Description
facet	ListFacet
onOptionChange	(value: string, selected: boolean) => void	A value picked or unpicked.
isPending?	boolean	Holds every option still while a change loads.
showLimit?	number	How many options show before "Show more"; by default the facet's own setting, else 5.
searchable?	boolean	Offer a search box over the options; by default as the facet's setting says, else when there are more than six.

Any other props go to the root element, like on a plain HTML element.

FacetRangeA range facet as a two-thumb slider in whole units — euros for a price — with a field per bound to type one, handing the backend's units back once the shopper lets go or leaves the field.

Prop	Type	Description
facet	RangeFacetData
onRangeChange	(min: number, max: number) => void	Both bounds in the backend's units, once a drag, a key press or a typed bound ends.
unit?	RangeUnit	How the facet counts — currencyRangeUnit(currency) for a price. Plain by default.
isPending?	boolean

Any other props go to the root element, like on a plain HTML element.

FacetToggleA yes-or-no facet — in stock, on sale — as one switch named by the facet, with the count of what it narrows to.

Prop	Type	Description
facet	ListFacet
onToggleChange	(value: boolean | undefined) => void	On or off; undefined clears it.
isPending?	boolean

Any other props go to the root element, like on a plain HTML element.