SearchProvider
SearchProvider is a React component that wraps an entire page, such as a product listing page, in a way to provide the necessary context for the Faceted Search.
Import​
import { SearchProvider } from '@faststore/sdk'
Usage​
import { SearchProvider, parseSearchState } from '@faststore/sdk'
function Page () {
const params = useMemo(() => parseSearchState(new URL(window.href)), [])
return (
<SearchProvider
onChange={(url: URL) => window.location.href = url.href}
itemsPerPage={12}
{...params}
>
{children}
</SearchProvider>
)
}
Props​
onChange(url: URL) => voidCallback function responsible for handling changes in the facet state.
itemsPerPagenumberNumber of product items displayed on a given page.
sortSearchSortSorting criteria of the search result (e.g., price_asc, orders_desc, discount_desc, etc.).
termstring | nullFull-text term used on the search.
pagenumberCurrent page index of search pagination.
basestringBase URL path of the search page. Useful when dealing with localization and prefixing paths by locale (e.g., /pt-br/).
selectedFacetsArray<{ key: string, value: string }>Array of selected facets on the search.
caution
Don't include personalization facets, such as sales channel and price tables, on the selectedFacets property. If you do so, users may end up having two channels: one from the Session context and another from the URL, which may cause all sorts of unexpected bugs.