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.
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 desktopitemsPerPageMobile
– Number of facets to show per group on mobilespecificFacets
– 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 objectfacetContainers
– Refs for facet containerstoggleFacetGroup
– Toggles facet group expanded/collapsedselectFacet
– Handles facet selectionisChecked
– Checks if a facet is selectedshowMoreLessDesktop
– Shows more/less facets
facetsTemplateMobile
Renders the mobile facets UI.
Receives:
facetsTemplateDataMobile
– Facets data objectselectedFacetsCheckboxes
– Selected facetsfacetContainers
– Refs for facet containerstoggleFacetGroup
– Toggles facet groupselectFacet
– Handles facet selectionisChecked
– Checks if facet is selectedunselectFacet
– Unselects a facetshowMoreLessMobile
– Shows more/less facetsopenOverlay
– Opens the mobile overlaycloseOverlay
– Closes the overlayunselectAll
– Unselects all facets
Example
Questions?
Do not hesitate to contact the SearchStax Support Desk.