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>