Skip to main content

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) => void
Description

Callback function responsible for handling changes in the facet state.

itemsPerPagenumber
Description

Number of product items displayed on a given page.

sortSearchSort
Description

Sorting criteria of the search result (e.g., price_asc, orders_desc, discount_desc, etc.).

termstring | null
Description

Full-text term used on the search.

pagenumber
Description

Current page index of search pagination.

basestring
Description

Base 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 }>
Description

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.

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY

ON THIS PAGE