Facet

Overview

This component provides a set of tools to filter the results using different facets. If the user selects a combination of filters, the search will be updated with it. You need to use a Refinement Lists component to add it on the UI.

Usage

This is how you create this component:

sdk.filterComponent('facet', target: filterOptions: Object);

Sample

By default, this component looks like this:

Options

The following options can be set in this component:

Name Type Default Description
attributeName String The attribute name to refine on.
limit Number 10 The number of values to display
nullFacetString String '' The label of the null value refinement. Does not show if empty.
operator 'and' or 'or' 'or' Apply operator on refinement
sortBy Array ['isRefined:desc', 'count:desc', 'name:asc'] The sorting strategy for the refinement values. Available values are 'count:asc', 'count:desc', 'isRefined:asc', 'isRefined:desc', 'name:asc' and'name:desc'.
showFacetCount Boolean true Show the count for each facet values
templates Object The templates to override the default render behavior
templates.item String | (Object) => String Item template, provided with:
  • count: The total number of results that contain the facet.
  • value: The name of the facet.
transformData Function (object) => object Function to transform the object sent to the view

Labels

This component uses the following labels:

Name Default Description
REFINEMENT_LISTS_SHOW_MORE Show more The text for the "show more filters" option
REFINEMENT_LISTS_SHOW_LESS Show less The text for the "show less filters" option

Examples

Basic example using the results component Store, through the linkTo method:
<div id="colour-filters"></div>
<div id="results"></div>

<script>
  var results = sdk.component('results', '#results');
  var colorRefinement = sdk.filterComponent('facet', { attributeName: 'COLOUR' });
  var colorFilter = sdk.component('refinement-lists', '#colour-filters', {
    refinements: [
      { component: colorRefinement, headerText: 'Colour filter' }
    ]
  });
  results.linkTo(colorFilter);
</script>