Developers
Authorization
API Resources
NL Interpreter
Search
Assist
Custom
Overview
This component provides a set of tools to create a custom filter. You need to use a Refinement Lists component to add it on the UI.
Usage
This is how you create this component:
sdk.filterComponent('custom', target: filterOptions: Object);Options
The following options can be set in this component:
| Name | Type | Default | Description |
|---|---|---|---|
| templateValues | Object | {} | The values that are passed to the template. Each key is a variable |
| templates | (Function) => String | String | The templates to override the default render behaviour |
| transformData | Function | (object) => object |
Function to transform the object sent to the view |
Methods
| Method | Description |
|---|---|
setTemplateValues(templateValues: Object) |
Updates the templateValues and makes the template to render again. |
setListener(selector: string, event: string, callback: Function, extraData: Object = {}, id: Int = null): Int |
Creates a new listener for event for all elements that match the CSS selector that will invoke callback with extraData. Optionally you can pass id to identify the listener. Returns the id you passed or an auto-generated one. |
removeListener(id: Int) |
Removes the listener identified by id as created by setListener. |
getListeners(): Object |
Returns all the listeners with the key id and the values with selector, event, callback, extraData as created by setListener. |
Examples
Slider example for price using the results component Store, through the linkTo method:
<div id="refinement-lists"></div>
<div id="results"></div>
<script>
var results = sdk.component('results', '#results');
// Values used by the custom filter that will be modified
var templateValues = {
label: 'Maximum Price',
step: 1,
min: 10,
max: 100,
value: 10,
}
// Create custom filter with the template, the previous values and the header text
const priceFilter = sdk.filterComponent('custom', {
templates: `
<label>{{ label }}:
<input
style="width: 75%"
step="{{ step }}"
min="{{ min }}"
max="{{ max }}"
type="range"
value="{{ value }}"
>
</label>
<span style="width: 25%" id="price-filter-value">{{ value }}</span>`,
templateValues
});
var refinementLists = sdk.component('refinement-lists', '#refinement-lists', {
refinements: [
{ component: priceFilter, headerText: 'Price' }
]
});
results.linkTo(refinementLists);
// Create the facet that the custom filter will filter
results.searchStore.addFacet("PRICE")
// Create event listener for when the slider changes value
priceFilter.setListener('input', 'change', function (id, el) {
// Remove and add the PRICE attribute refinement with filter "lte" (Less or equal than)
results.searchStore.removeFacetRefinement("PRICE", templateValues.value, "lte");
results.searchStore.addFacetRefinement("PRICE", el.value, "lte")
// Update the current value in the template so that it updates
templateValues.value = el.value;
// Notify the price filter to update the template
priceFilter.setTemplateValues(templateValues);
});
</script>