feature-product setup

Styles

Import them once, in the stylesheet where you load Tailwind:

@import "@evolve-storefront/feature-product/styles.css";

Translations

The package ships its texts in @evolve-storefront/feature-product/messages. evolve messages merges them into your message files and never overwrites a text you changed.

ProductListingProvider

The listing's navigation, for the filters, the chips and the sort: the URL's parameters and how to load new ones. A site renders it from a small client component that reads its router, so the listing itself stays server-rendered.

import { ProductListingProvider } from "@evolve-storefront/feature-product/product-listing";

Prop	Type	Description
facets	readonly Facet[]	The facets the listing came back with.
search	URLSearchParams	The URL's current parameters — useSearchParams().
navigate	(params: URLSearchParams) => void	Load the listing for these parameters — router.push(?${params}).
searchable?	readonly string[] | ((facet: Facet) => boolean)	Which facets offer a search box over their options: their keys, or a test. By default as each facet's setting says, else an options or category facet with more than six options to pick.
rangeUnit?	((facet: Facet) => RangeUnit | undefined)	A range facet's unit, currencyRangeUnit for a price; plain when it returns nothing.
list?	string	The list name for listFiltered and listSorted, from listingName. Nothing is reported without one.
children?	ReactNode