Refinement Tabs

Overview

This component displays a set of tabs that allows the user to refine the results over one specific topic.

This component must be linked to a search Store, since it retrieves the values of the last search filtering from it.

Usage

This is how you create this component:

sdk.component('refinement-tabs', target: HTMLElement|String, options: 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
nullFacetString String '' The label of the null value refinement. Does not show if empty.
showFacetCount Boolean true Show number of result next to the tab name
tabs Array [] Tabs to always show. If empty, all of the possible values are rendered as tabs.
tabs.*.facetValue String The value of the facet that the tab triggers
tabs.*.html String {{facet.name}} The HTML that the tab renders.
You can use the following templates to render the label:
  • {{ facet.name }}: name of the facet.
  • {{ facet.count }}: number of results.
transformData Function (object) => object Function to transform the object passed to the view
sortBy Array ['forced:asc', 'name:asc'] The sorting strategy for the refinement values. Available values are 'forced:desc', 'forced:desc', 'count:asc', 'count:desc', 'isRefined:asc', 'isRefined:desc', 'name:asc' and'name:desc'.
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.
  • name: The name of the facet.
  • isRefined: Whether the facet is refined.

Tab order options

  • forced: Whether the tab is forced by the user using the tabs prop.
  • name: The attribute name.
  • count: The number of results for the attribute.
  • isRefined: Whether the tab is selected.

Tracking

This component does a new search when selecting a new tab, using the endpoint POST /federated-searches. This search is bound to the current session, with the tracking option set to true.

Labels

This component uses the following labels:

Name Default Description
REFINEMENT_TABS_ALL_TAB All The text for the all button tab

Examples

Example using results component Store through method linkTo
<div id="tabs"></div>
<div id="results"></div>

<script>
  var results = sdk.component('results', '#results');
  var tabs = sdk.component('refinement-tabs', '#tabs', {
    attributeName: 'Product Type'
  });
  results.linkTo(tabs);
</script>
Example using item template
<div id="tabs"></div>
<div id="results"></div>

<script>
  var results = sdk.component('results', '#results');
  var tabs = sdk.component('refinement-tabs', '#tabs', {
    attributeName: 'Product Type',
    templates: {
      item: '<span>{{ name }} ({{ count }})</span>'
    }
  });
  results.linkTo(tabs);
</script>