Overview

A facet represents a characteristic of a piece of content. It can help users refine their search. When a facet is assigned to a piece of content, it allows you to set up a filter so the end user can filter their search results by facets. In other words, this component provides a set of tools to filter the results. To add a facet filter to the UI, use a Refinement Lists component. Users can filter on multiple facets at the same time.

In the sample below, each checkbox represents a facet. Each piece of content is relevant to at least one of those facets. In this example, selecting the Chatbot facet would filter a user’s initial search results to retrieve only the search results relevant to the Inbenta Chatbot module.

Usage

This is how you create this component:

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

Sample

By default, this component looks like this:

However, you can configure it according to your needs. For example, you could also configure it to be displayed as a range slider if you want the user to be able to filter results for a certain price range.

Options

The following options can be set in this component:

Labels

This component uses the following labels:

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>