The SearchstaxFacetsWidget component displays the search facets.

Usage

<SearchstaxFacetsWidget
                facetingType="and"
                itemsPerPageDesktop={2}
                itemsPerPageMobile={3}
                specificFacets={undefined}
                facetsTemplateDesktop={facetsTemplateDesktop}
                facetsTemplateMobile={facetsTemplateMobile}
 ></SearchstaxFacetsWidget>

Props

• facetingType – Faceting logic type: "and" | "or" | "showUnavailable" | "tabs"
• itemsPerPageDesktop – Number of facets to show per group on desktop
• itemsPerPageMobile – Number of facets to show per group on mobile
• specificFacets – Array of facet names to display

Template Props

Customize the UI by passing template functions.

facetsTemplateDesktop

Renders the desktop facets UI.

Receives:

• facetsTemplateDataDesktop – Facets data object
• facetContainers – Refs for facet containers
• toggleFacetGroup – Toggles facet group expanded/collapsed
• selectFacet – Handles facet selection
• isChecked – Checks if a facet is selected
• showMoreLessDesktop – Shows more/less facets

facetsTemplateMobile

Renders the mobile facets UI.

Receives:

• facetsTemplateDataMobile – Facets data object
• selectedFacetsCheckboxes – Selected facets
• facetContainers – Refs for facet containers
• toggleFacetGroup – Toggles facet group
• selectFacet – Handles facet selection
• isChecked – Checks if facet is selected
• unselectFacet – Unselects a facet
• showMoreLessMobile – Shows more/less facets
• openOverlay – Opens the mobile overlay
• closeOverlay – Closes the overlay
• unselectAll – Unselects all facets

Example

• Read more

Questions?

Do not hesitate to contact the SearchStax Support Desk.