Facets Widget JS

The Facets Widget for UX-JS displays faceted filters for search.

Usage

searchstax.addFacetsWidget(container, options);

container – The element to render the widget
options – Configuration options (ISearchstaxSearchFacetsConfig)

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.

Template Override

The facet widget template option allows customizing the UI templates.

mainTemplateDesktop

Main wrapper template for desktop facets display.

Template model: IFacetsTemplateData
Usage:

templates: {

  mainTemplateDesktop: {
    template: `
      <div class="desktop-facets"></div>
    `,
    facetsContainerId: 'desktop-facets'
  }

}

mainTemplateMobile

Main wrapper template for mobile facets display.

Template model: IFacetsTemplateData
Usage:

templates: {

  mainTemplateMobile: {
    template: `
      <div class="mobile-facets"></div>
    `,
    facetsContainerId: 'mobile-facets'
  }

}

showMoreButtonContainerTemplate

Template for the show more button when collapsing facets.

Template model: IFacetData
Usage:

templates: {

  showMoreButtonContainerTemplate: {
    template: `
      <div class="show-more">
        Show More
      </div>
    `,
    showMoreButtonClass: 'show-more'
  }

}

facetItemContainerTemplate

Template for each facet group.

Template model: IFacetData
Usage:

templates: {

  facetItemContainerTemplate: {
    template: `
      <div class="facet-group">
        <div class="facet-group-name"></div>
        <div class="facet-options"></div>
      </div>
    `,

    facetListTitleContainerClass: 'facet-group-name',
    facetListContainerClass: 'facet-options'
  }

}

clearFacetsTemplate

Template for clear all filters button.

Template model: {shouldShow: boolean}
Usage:

templates: {

  clearFacetsTemplate: {
    template: `
      <div class="clear-filters">
        Clear All Filters
      </div>
    `
  }

}

facetItemTemplate

Template for each facet value item.

Template model: IFacetValueData
Usage:

templates: {

  facetItemTemplate: {
    template: `
      <input type="checkbox" class="facet-checkbox">
      <div class="facet-label">{{label}} ({{count}})</div>
    `
  }

}

filterByTemplate

Template for the filter by pill.

Template model: {} (plain object)
Usage:

templates: {

  filterByTemplate: {
    template: `
      <div class="filter-pill">
        Filter By
      </div>
    `
  }

}

selectedFacetsTemplate

Template for selected facet pills.

Template model: IFacetValue | IFacetValueRange
Usage:

templates: {

  selectedFacetsTemplate: {
    template: `
      <div class="selected-facet-pill">
        {{label}} ({{count}})
        <span class="remove"></span>
      </div>
    `
  }

}

The IFacetValueRange interface is for numeric range facets.

Example

searchstax.addFacetsWidget('searchstax-facets-container', {

  facetingType: 'and',

  itemsPerPageDesktop: 5,
  itemsPerPageMobile: 3,

  templates: {

    mainTemplateDesktop: {
      template: `
        <div class="desktop-facets"></div>
      `,
      facetsContainerId: 'desktop-facets'
    },

    mainTemplateMobile: {
      template: `
        <div class="mobile-facets"></div>
      `,
      facetsContainerId: 'mobile-facets'
    },

    showMoreButtonContainerTemplate: {
      template: `
        <div class="show-more">
          Show More
        </div>
      `,
      showMoreButtonClass: 'show-more' 
    },

    facetItemContainerTemplate: {
      template: `
        <div class="facet-group">
          <div class="facet-group-name"></div>
          <div class="facet-options"></div>
        </div>
      `,
      facetListTitleContainerClass: 'facet-group-name',
      facetListContainerClass: 'facet-options'
    },

    // other templates

  }

});

Questions?

Do not hesitate to contact the SearchStax Support Desk.