Facets Widget JS
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(container, options);
container
– The element to render the widgetoptions
– 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.
- 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.