toggleRefinement
1
import { toggleRefinement } from 'instantsearch.js/es/widgets';
About this widget
The toggleRefinement
widget provides an on/off filtering feature based on an attribute value.
Requirements
Ensure that the attribute provided is already declared as an attribute for faceting.
Examples
1
2
3
4
5
6
7
8
9
toggleRefinement({
container: '#toggle-refinement',
attribute: 'free_shipping',
templates: {
labelText({ count }, { html }) {
return html`Free shipping (${count.toLocaleString()})`;
},
},
});
Options
container
|
type: string|HTMLElement
Required
The CSS Selector or |
||
Copy
|
|||
attribute
|
type: string
Required
The name of the attribute on which apply the refinement. To avoid unexpected behavior, you can’t use the same |
||
Copy
|
|||
on
|
type: boolean|number|string
default: true
Optional
The value of the refinement to apply on the attribute when checked. |
||
Copy
|
|||
off
|
type: boolean|number|string
Optional
The value of the refinement to apply on the attribute when unchecked. |
||
Copy
|
|||
templates
|
type: object
Optional
The templates to use for the widget. |
||
Copy
|
|||
cssClasses
|
type: object
default: {}
Optional
The CSS classes you can override:
|
||
Copy
|
Templates
You can customize parts of the widget’s UI using the Templates API.
Every template provides an html
function you can use as a tagged template. Using html
lets you safely provide templates as an HTML string. It works directly in the browser without a build step. See Templating your UI for more information.
The html
function is available starting from v4.46.0.
labelText
|
type: string|function
Optional
The template to use to customize the label. It exposes:
|
||
Copy
|
HTML output
1
2
3
4
5
6
7
<div class="ais-ToggleRefinement">
<label class="ais-ToggleRefinement-label">
<input class="ais-ToggleRefinement-checkbox" type="checkbox" />
<span class="ais-ToggleRefinement-labelText">Free Shipping</span>
<span class="ais-ToggleRefinement-count">18,013</span>
</label>
</div>
Customize the UI with connectToggleRefinement
If you want to create your own UI of the toggleRefinement
widget, you can use connectors.
To use connectToggleRefinement
, you can import it with the declaration relevant to how you installed InstantSearch.js.
1
import { connectToggleRefinement } from 'instantsearch.js/es/connectors';
Then it’s a 3-step process:
// 1. Create a render function
const renderToggleRefinement = (renderOptions, isFirstRender) => {
// Rendering logic
};
// 2. Create the custom widget
const customToggleRefinement = connectToggleRefinement(
renderToggleRefinement
);
// 3. Instantiate
search.addWidgets([
customToggleRefinement({
// instance params
})
]);
Create a render function
This rendering function is called before the first search (init
lifecycle step)
and each time results come back from Algolia (render
lifecycle step).
const renderToggleRefinement = (renderOptions, isFirstRender) => {
const {
object value,
boolean canRefine,
function refine,
function sendEvent,
function createURL,
object widgetParams,
} = renderOptions;
if (isFirstRender) {
// Do some initial rendering and bind events
}
// Render the widget
}
Rendering options
value
|
type: object
The current refinement, with:
|
||
Copy
|
|||
canRefine
|
type: boolean
Required
Indicates if search state can be refined. |
||
Copy
|
|||
refine
|
type: function
Updates to the next state by applying the toggle refinement. |
||
Copy
|
|||
sendEvent
|
type: (eventType, facetValue) => void
The function to send
|
||
Copy
|
|||
createURL
|
type: function
Generates a URL for the next state. |
||
Copy
|
|||
widgetParams
|
type: object
All original widget options forwarded to the render function. |
||
Copy
|
Create and instantiate the custom widget
We first create custom widgets from our rendering function, then we instantiate them. When doing that, there are two types of parameters you can give:
- Instance parameters: they are predefined parameters that you can use to configure the behavior of Algolia.
- Your own parameters: to make the custom widget generic.
Both instance and custom parameters are available in connector.widgetParams
, inside the renderFunction
.
const customToggleRefinement = connectToggleRefinement(
renderToggleRefinement
);
search.addWidgets([
customToggleRefinement({
attribute: string,
// Optional parameters
on: boolean|number|string,
off: boolean|number|string,
})
]);
Instance options
attribute
|
type: string
Required
The name of the attribute on which to apply the refinement. To avoid unexpected behavior, you can’t use the same |
||
Copy
|
|||
on
|
type: boolean|number|string
default: true
Optional
The value of the refinement to apply on the attribute when checked. |
||
Copy
|
|||
off
|
type: boolean|number|string
Optional
The value of the refinement to apply on the attribute when unchecked. |
||
Copy
|
Full example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// Create the render function
const renderToggleRefinement = (renderOptions, isFirstRender) => {
const { value, refine, widgetParams } = renderOptions;
if (isFirstRender) {
const label = document.createElement('label');
const input = document.createElement('input');
input.type = 'checkbox';
const span = document.createElement('span');
input.addEventListener('change', event => {
refine({ isRefined: !event.target.checked });
});
label.appendChild(input);
label.appendChild(document.createTextNode('Free shipping'));
label.appendChild(span);
widgetParams.container.appendChild(label);
}
widgetParams.container.querySelector('input').checked = value.isRefined;
widgetParams.container.querySelector('span').innerHTML =
value.count !== null ? ` (${value.count})` : '';
};
// Create the custom widget
const customToggleRefinement = connectToggleRefinement(
renderToggleRefinement
);
// Instantiate the custom widget
search.addWidgets([
customToggleRefinement({
container: document.querySelector('#toggle-refinement'),
attribute: 'free_shipping',
})
]);