SearchstaxFacetsWidget for React and Next.js

The SearchStax Site Search solution offers a SearchstaxFacetsWidget component for React and Next.js. This widget displays the search facets.

Facet Selection and Order

Facet lists are configured and ordered on the Site Search Faceting Tab.

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

Questions?

Do not hesitate to contact the SearchStax Support Desk.