For dev - Filter Tree Option Properties (App Lib V2)
In this article
This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.
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
}
]
}
]
}