Slider support for facets

Background

There are several ways of displaying facets on the customers' front end. Typically, for price facets, it is preferred to use a slider. An enhanced support for slider facets was introduced in FAS version 22.1.* .

Facet configuration

A facet can be configured to be displayed as a slider via the Merchandising Studio. Only numerical attributes are supported.

In the facet edit screen, after selecting a numeric attribute, the Slider facet type can be chosen from the drop-down:

FAS Query Response

Slider facets are returned in the FAS response as usual in the facetmap section as filters. The filter contains the min & max global range of the current query and the selected min & max values. Example price facet slider:

<facetmap universe="catalog01">

<filter on="price" facetid="5a78b237-839c-4b7b-868e-53af779eb204" basetype="float" show_number_values="0" selected="true" display-hint="slider">
<title>Price</title>
<globalrange min="1.0" max="999.0"/>
<currentselection min="100.0" max="250.0"/> 
<url-params-base>date_time=20220317T205954&preview_seo=false&preview_advanced=true&fh_refpath=5a78b237-839c-4b7b-868e- 53af779eb204&fh_refview=lister&fh_reffacet=price&fh_location=%2f%2fcatalog01%2fen_AU</url-params-base>
<custom-fields>
<custom-field name="default_state" id="3">collapsed</custom-field>
<custom-field name="facet_type" id="5ba5ff28-dbf1-4a90-aaaf-27886b6b6369">list</custom-field>
</custom-fields>
</filter>

... other filters
</facetmap>

Preview Pages

When a facet is configured as a slider, it will be displayed as such in Preview Pages, where min and max values can be selected, and the items will be filtered.

Some implementation details worth mentioning here:

• The slider step is by default configured to 1, but depending on the device/browser resolution, the slider's step will vary.
• A delay of 1300ms is added after dragging the slider. This is to prevent sending many requests to FAS and have some time to select both values.
• If min & max values are float, for example, 10.83 and 99.2, this is rounded up or down, respectively, in the result shown as 10 - 100. This is done to avoid the cases where the max value can't be reached.
• When an item(s) has an attribute value equal to the upper boundary of the global range and the user slider is adjusted to its top range, the particular item(s) is not shown and is excluded. That issue is solved by having on purpose max+1 in order for the last item to be shown. This is because FAS Query Language works like this: value1 <= attribute < value2

Visual Merchandising

When a facet is configured as a slider, it will also be shown as such in Visual Merchandising and the items will be filtered upon sliding the min and max values.