Vue - Facets Widget

Updated

The SearchStax Site Search solution offers a Vue SearchstaxFacetsWidget component to display facets on your custom search page.

The SearchstaxFacetsWidget component displays the facet filters.

Facet Selection and Order

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

Usage 

<SearchstaxFacetsWidget
              :facetingType="'or'"
              :itemsPerPageDesktop="3"
              :itemsPerPageMobile="99"
></SearchstaxFacetsWidget>

Note: UI Kits implementations support the beforeFacetsRender callback for facet value ordering. Hook binding can vary by package version, so use the package documentation for exact implementation details.

Props

  • facetingType – Determines how facets will behave: ‘and’, ‘or’, ‘showUnavailable’, ‘tabs’
  • itemsPerPageDesktop – Default expanded facets for desktop
  • itemsPerPageMobile – Default expanded facets for mobile
  • specificFacets – Optional string array of facet names that, if provided, will only render those facets
  • beforeFacetsRender – callback that runs before facet values render. Use it to apply chronological ordering for time-based values (for example, months or days of the week).

Example

For the full example, see searchstax-ux-vue.

Articles in this section