Toggle Refinement
Toggle refinement is a widget that allows you to specify a filter that you can toggle on and off. It is commonly used for boolean values such as "free shipping" or "in stock".
Setup
The following document indexed in Elasticsearch:
{
"brand": "Apple",
"product": "Macbook Pro 14",
"in_stock": true,
"shipping": 10
}Searchkit Setup
Within facet_attributes:
{
facet_attributes: [
{
attribute: 'brand',
field: 'brand.keyword', // field must be a keyword type field
type: 'string'
},
{
attribute: 'in_stock',
field: 'in_stock',
type: 'string'
},
{
attribute: 'shipping',
field: 'shipping',
type: 'numeric'
}
]
}
Usage
Below is an example of a refinement list that displays a list of categories with React InstantSearch.
import { ToggleRefinement } from 'react-instantsearch';
const App = () => (
<h3>Only Apple Products</h3>
<ToggleRefinement attribute="brand" on="Apple" />
<h3>Free Shipping</h3>
<ToggleRefinement attribute="shipping" on={0} />
<h3>In Stock</h3>
<ToggleRefinement attribute="in_stock" on={true} />
);