JavaScript - Facets Widget

Updated

The SearchStax Site Search solution’s Facets Widget for UX-JS displays faceted filters for search.

Facet Selection and Order

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

Usage 

searchstax.addFacetsWidget("searchstax-facets-container", {
    facetingType: "and",
    itemsPerPageDesktop: 3,
    itemsPerPageMobile: 99,
    hooks: {
      beforeFacetsRender: function (facetObjects) {
        return facetObjects;
      }
    }
 });

Multiple Instances

Multiple instances of the Facets widget can be added by calling the addFacetsWidget method multiple times with different target containers: 

searchstax.addFacetsWidget('container1', options1);

searchstax.addFacetsWidget('container2', options2);

Each instance can be configured separately via its options object. This allows for the widget to be added to different locations on the page as needed.

Props

  • facetingType: “and” | “or” | “showUnavailable” | “tabs”. Type that determines how facets will behave.
  • specificFacets: string[]. Optional array of facet names that, if provided, will only render those facets.
  • itemsPerPageDesktop: number. Default expanded facets for desktop.
  • itemsPerPageMobile: number. Default expanded facets for mobile.
  • hooks.beforeFacetsRender: callback that runs before facet values render. Use it to reorder time-based values (for example, month/day-of-week chronology) or adjust display labels. Return the facet data in the same structure.
  • templates: See examples in searchstax-ux-js.

Example

See the full examples in searchstax-ux-js.

Articles in this section