numericMenu
numericMenu({ container: string|HTMLElement, attribute: string, items: object[], // Optional parameters templates: object, cssClasses: object, transformItems: function, });
1
import { numericMenu } from 'instantsearch.js/es/widgets';
About this widget
The numericMenu
widget displays a list of numeric filters in a list. Those numeric filters are pre-configured when creating the widget.
Requirements
The value provided to the attribute
option must be an attribute which is a number in the index, not a string.
Examples
1
2
3
4
5
6
7
8
9
10
numericMenu({
container: '#numeric-menu',
attribute: 'price',
items: [
{ label: 'All' },
{ label: 'Less than 500$', end: 500 },
{ label: 'Between 500$ - 1000$', start: 500, end: 1000 },
{ label: 'More than 1000$', start: 1000 },
],
});
Options
container
|
type: string|HTMLElement
Required
The CSS Selector or |
||
Copy
|
|||
attribute
|
type: string
Required
The name of the attribute in the record. |
||
Copy
|
|||
items
|
type: object[]
Required
A list of all the options to display, with:
|
||
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
|
|||
transformItems
|
type: function
default: items => items
Optional
Receives the items and is called before displaying them. Should return a new array with the same shape as the original array. Useful for transforming, removing, or reordering items. In addition, the full |
||
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.
item
|
type: string|function
Optional
The template for each item. It exposes:
|
||
Copy
|
HTML output
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
<div class="ais-NumericMenu">
<ul class="ais-NumericMenu-list">
<li class="ais-NumericMenu-item ais-NumericMenu-item--selected">
<label class="ais-NumericMenu-label">
<input
class="ais-NumericMenu-radio"
type="radio"
name="NumericMenu"
checked
/>
<span class="ais-NumericMenu-labelText">All</span>
</label>
</li>
<li class="ais-NumericMenu-item">
<label class="ais-NumericMenu-label">
<input
class="ais-NumericMenu-radio"
type="radio"
name="NumericMenu"
/>
<span class="ais-NumericMenu-labelText">Less than 500</span>
</label>
</li>
</ul>
</div>
Customize the UI with connectNumericMenu
If you want to create your own UI of the numericMenu
widget, you can use connectors.
To use connectNumericMenu
, you can import it with the declaration relevant to how you installed InstantSearch.js.
1
import { connectNumericMenu } from 'instantsearch.js/es/connectors';
Then it’s a 3-step process:
// 1. Create a render function
const renderNumericMenu = (renderOptions, isFirstRender) => {
// Rendering logic
};
// 2. Create the custom widget
const customNumericMenu = connectNumericMenu(
renderNumericMenu
);
// 3. Instantiate
search.addWidgets([
customNumericMenu({
// 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 renderNumericMenu = (renderOptions, isFirstRender) => {
const {
object[] items,
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
items
|
type: object[]
The list of available options, with each option:
|
||
Copy
|
|||
canRefine
|
since: v4.45.0
type: boolean
Whether the search can be refined.
This is |
||
Copy
|
|||
refine
|
type: function
Sets the selected value and triggers a new search. |
||
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 customNumericMenu = connectNumericMenu(
renderNumericMenu
);
search.addWidgets([
customNumericMenu({
attribute: string,
items: object[],
// Optional parameters
transformItems: function,
})
]);
Instance options
attribute
|
type: string
Required
The name of the attribute in the record. |
||
Copy
|
|||
items
|
type: object[]
Required
A list of all the options to display, with:
|
||
Copy
|
|||
transformItems
|
type: function
default: items => items
Optional
Receives the items and is called before displaying them. Should return a new array with the same shape as the original array. Useful for transforming, removing, or reordering items. In addition, the full |
||
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// Create the render function
const renderNumericMenu = (renderOptions, isFirstRender) => {
// `canRefine` is only available from v4.45.0
// Use `hasNoResults` in earlier minor versions.
const { items, canRefine, refine, widgetParams } = renderOptions;
widgetParams.container.innerHTML = `
<ul>
${items
.map(
item => `
<li>
<label>
<input
type="radio"
name="${widgetParams.attribute}"
value="${item.value}"
${item.isRefined ? 'checked' : ''}
${!canRefine ? 'disabled' : ''}
/>
${item.label}
</label>
</li>`
)
.join('')}
</ul>
`;
[...widgetParams.container.querySelectorAll('input')].forEach(element => {
element.addEventListener('change', event => {
refine(event.currentTarget.value);
});
});
};
// Create the custom widget
const customNumericMenu = connectNumericMenu(
renderNumericMenu
);
// Instantiate the custom widget
search.addWidgets([
customNumericMenu({
container: document.querySelector('#numeric-menu'),
attribute: 'price',
items: [
{ label: 'All' },
{ label: 'Less than 500$', end: 500 },
{ label: 'Between 500$ - 1000$', start: 500, end: 1000 },
{ label: 'More than 1000$', start: 1000 },
],
})
]);