For dev - Filter Tree Option Properties
In this article
Description
The following describes the properties of a filter tree option returned by Filter/Search API.
Filter Tree Properties
Property | Description |
filterOptionId | 'filterOptionId': 'pf_st_availability' Unique filter option id. This id is used to create search/filter param in the URL as well. |
filterType | 'filterType': 'collection' Type of filter option. Allowed values: - collection - vendor - product_type - Product options such as color, size, etc. (depend on your product data) - title - price - percent_sale - review_ratings (Reviews data is gotten from metafield of a Review app) - tag |
displayType | 'displayType': 'list' Display Type of Filter Option. Each filter option type will have a list of different display types. Allowed values: - list - box - swatch - range |
selectType | 'selectType': 'multiple' Allow a filter option to be selected one or multiple values. Allowed values: - multiple - single |
valueType | 'valueType': 'manual' Data of filter option is either specific values or all values based on the filter option type Allowed values: - all (default) - manual |
position | 'position: 3 Position of the filter option in the filter tree |
keepValuesStatic | 'status': true When this option is enabled: - All collection items are displayed, even if they have no product. - When a collection is selected, our app will redirect the customer to that collection page. Allowed values: - false (default) - true |
status | 'status': 'active' Status of the filter option. Allowed values: - active (default) - disabled |
manualValues | Deprecated |
values | Format 1: For Option Selection 'values': [ { 'key': 'in-stock', // Key of this filter option value 'label': 'In Stock or Pre-Order', // Label of this filter option value 'doc_count': 4 // Number of products found with this filter option value }, { 'key': 'out-of-stock', 'label': 'Backordered', 'doc_count': 2 } ] Format 2: For Range Slider 'values': { 'max': 149.99, 'min': 49.99 } Aggregated Values of the Filter Option for Displaying. |
prefix | 'prefix': 'size' It's only enabled when the filter option type is Tag. When it has value, all tags with this value are displayed. |
sliderRange | 'sliderRange': 4 It's the number of range separated on a slider. It's only enabled when the display type of a filter option is Range. Default value: 4 |
sliderDelimiter | 'sliderDelimiter': null The character is used as the thousand separator. For example: - Delimiter is '.' → 1000 will be 1.000 - Delimiter is ',' → 1000 will be 1,000 - Delimiter is null → keep original value Default value: null |
sliderStep | 'sliderStep': 1 The amount of each interval or step of the slider taken between min and max values. Default value: 1 |
isCollapsePC | 'isCollapsePC': false The content of the filter option will be hidden by default on PC Allowed values: - false (default) - true |
isCollapseMobile | 'isCollapseMobile': false The content of the filter option will be hidden by default on Mobile Allowed values: - false (default) - true |
tooltip | 'tooltip': 'Define your style' Explanation of a filter option Default value: null |
Example
"filter": { "options": [ { "sliderStep": null, "isCollapseMobile": null, "prefix": null, "isCollapsePC": null, "label": "Brand", "filterOptionId": "pf_v_brand", "sliderEnableThousand": null, "sliderDelimiter": null, "displayType": "list", "sliderRange": null, "manualValues": null, "valueType": "all", "selectType": "multiple", "position": "0", "filterType": "vendor", "keepValuesStatic": null, "status": "active", "values": [ { "key": "Blade", "doc_count": 4 }, { "key": "XK Innovations", "doc_count": 2 } ] }, { "sliderStep": null, "isCollapseMobile": false, "prefix": null, "isCollapsePC": false, "label": "Class / Size", "filterOptionId": "pf_t_class_size", "sliderEnableThousand": null, "sliderDelimiter": null, "displayType": "list", "sliderRange": null, "manualValues": [ "Less than 200", "200 to 350", "450", "500", "600", "700", "800" ], "valueType": "specific", "selectType": "multiple", "position": "1", "filterType": "tag", "keepValuesStatic": null, "status": "active", "values": [ { "key": "Less than 200", "doc_count": 6 } ] } ] }