Developers
Authorization
API Resources
NL Interpreter
Search
Assist
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. You can use the value _all to set the order in which the tab "All" will appear (first by default). |
||
| tabs.*.html | String | {{ facet.name }} | The HTML that the tab renders. You can use the following templates to render the label:
|
|
| 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', 'name:desc', 'isAll:asc' and 'isAll:desc'. |
|
| templates | Object | The templates to override the default render behavior for all tabs except the "All" tab. See further information about templates here. | ||
| templates.item | String | (Object) => String | Item template, provided with:
|
Tab order options
- forced: Whether the tab is forced by the user using the
tabsprop. - name: The attribute name.
- count: The number of results for the attribute.
- isRefined: Whether the tab is selected.
- isAll: Whether the tab is the "All" tab.
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.
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>Example using tabs with "Abacus" and All tabs.
<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',
tabs: [
{ facetValue: 'Abacus'},
{ facetValue: '_all'},
]
});
results.linkTo(tabs);
</script>