When selectiontype is set to slider and containsclickpoints or containsbuckets is set to true, our Frontend API response will contain a specific set of attributes and clickpoints or buckets in order to do a non-linear slider implementation in your storefront.
Note
To understand slider basics, make sure you read our slider guide.
Read our product guide on how to configure the bucket slider in detail.
Clickpoints
The clickpoints can be used to create a slider with fixed points between the bounds. Most slider implementations support this type of configuration.
{
"facets": [
{
"facetsettings": {
"title": "Price",
"selectiontype": "slider",
"containsclickpoints": true,
"containsbuckets": false
//..
},
"attributes": [
{
"title": "0",
"isselected": false,
//...
},
{
"title": "1169.5",
"isselected": false,
//...
}
],
"clickpoints": [
{
"value": 1
},
{
"value": 2
},
{
"value": 3
},
{
"value": 5
},
{
"value": 10
},
{
"value": 20
}
]
}
],
"items": [],
"properties": {
...
}
}
<navigation xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<facets>
<facet>
<facetsettings>
...
<title>Price</title>
<selectiontype>slider</selectiontype>
<containsclickpoints>true</containsclickpoints>
<containsbuckets>false</containsbuckets>
...
</facetsettings>
<attributes>
<attribute>
<title>2017</title>
<isselected>false</isselected>
...
</attribute>
<attribute>
<title>2024</title>
<isselected>false</isselected>
...
</attribute>
</attributes>
<clickpoints>
<clickpoint>
<value>1</value>
</clickpoint>
<clickpoint>
<value>2</value>
</clickpoint>
<clickpoint>
<value>3</value>
</clickpoint>
<clickpoint>
<value>5</value>
</clickpoint>
<clickpoint>
<value>10</value>
</clickpoint>
<clickpoint>
<value>20</value>
</clickpoint>
</clickpoints>
</facet>
</facets>
<items>...</items>
<properties>...</properties>
<redirects />
</navigation>
Buckets
Buckets can be used to display non-linear steps.
{
"facets": [
{
"facetsettings": {
"title": "Price",
"selectiontype": "slider",
"containsclickpoints": false,
"containsbuckets": true
//..
},
"attributes": [
{
"title": "0",
"isselected": false,
//...
},
{
"title": "1169.5",
"isselected": false,
//...
}
],
"buckets": [
{
"rangemin": 233.9,
"rangemax": 467.8,
"relativeamount": 1.0415310506444473
},
{
"rangemin": 467.8,
"rangemax": 701.69999999999993,
"relativeamount": 0.22132534826194505
},
{
"rangemin": 701.69999999999993,
"rangemax": 935.6,
"relativeamount": 0.039057414399166775
},
{
"rangemin": 935.6,
"rangemax": 1169.5,
"relativeamount": 0.01301913813305559
}
]
}
],
"items": [],
"properties": {
...
}
}
<navigation xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<facets>
<facet>
<facetsettings>
...
<title>Price</title>
<selectiontype>slider</selectiontype>
<containsclickpoints>false</containsclickpoints>
<containsbuckets>true</containsbuckets>
...
</facetsettings>
<attributes>
<attribute>
<title>0</title>
<isselected>false</isselected>
...
</attribute>
<attribute>
<title>11495</title>
<isselected>false</isselected>
...
</attribute>
</attributes>
<buckets>
<bucket>
<rangemin>0.5</rangemin>
<rangemax>30</rangemax>
<relativeamount>34.540428472702146</relativeamount>
</bucket>
<bucket>
<rangemin>30</rangemin>
<rangemax>80</rangemax>
<relativeamount>24.367657221838286</relativeamount>
</bucket>
<bucket>
<rangemin>80</rangemin>
<rangemax>120</rangemax>
<relativeamount>7.1181755355908773</relativeamount>
</bucket>
<bucket>
<rangemin>120</rangemin>
<rangemax>11495</rangemax>
<relativeamount>22.446440912232205</relativeamount>
</bucket>
</buckets>
</facet>
</facets>
<items>...</items>
<properties>...</properties>
<redirects />
</navigation>
Clickpoints + buckets
If both containsclickpoints and containsbuckets both set to true, the clickpoints determine the step size of the buckets.
The clickpoints and buckets can be used to create custom steps.
{
"facets": [
{
"facetsettings": {
"title": "Price",
"selectiontype": "slider",
"containsclickpoints": true,
"containsbuckets": true
//..
},
"attributes": [
{
"title": "0",
"isselected": false,
//..
},
{
"title": "1169.5",
"isselected": false,
//..
}
],
"buckets": [
{
"rangemin": 233.9,
"rangemax": 467.8,
"relativeamount": 1.0415310506444473
},
{
"rangemin": 467.8,
"rangemax": 701.69999999999993,
"relativeamount": 0.22132534826194505
},
{
"rangemin": 701.69999999999993,
"rangemax": 935.6,
"relativeamount": 0.039057414399166775
},
{
"rangemin": 935.6,
"rangemax": 1169.5,
"relativeamount": 0.01301913813305559
}
]
}
],
"items": [],
"properties": {
...
}
}
<navigation xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<facets>
<facet>
<facetsettings>
...
<title>Price</title>
<selectiontype>slider</selectiontype>
<containsclickpoints>true</containsclickpoints>
<containsbuckets>true</containsbuckets>
...
</facetsettings>
<attributes>
<attribute>
<title>0</title>
<isselected>false</isselected>
...
</attribute>
<attribute>
<title>11495</title>
<isselected>false</isselected>
...
</attribute>
</attributes>
<clickpoints>
<clickpoint>
<value>30</value>
</clickpoint>
<clickpoint>
<value>80</value>
</clickpoint>
<clickpoint>
<value>120</value>
</clickpoint>
<clickpoint>
<value>250</value>
</clickpoint>
</clickpoints>
<buckets>
<bucket>
<rangemin>0.5</rangemin>
<rangemax>30</rangemax>
<relativeamount>34.540428472702146</relativeamount>
</bucket>
<bucket>
<rangemin>30</rangemin>
<rangemax>80</rangemax>
<relativeamount>24.367657221838286</relativeamount>
</bucket>
<bucket>
<rangemin>80</rangemin>
<rangemax>120</rangemax>
<relativeamount>7.1181755355908773</relativeamount>
</bucket>
<bucket>
<rangemin>120</rangemin>
<rangemax>11495</rangemax>
<relativeamount>22.446440912232205</relativeamount>
</bucket>
</buckets>
</facet>
</facets>
<items>...</items>
<properties>...</properties>
<redirects />
</navigation>