Skip to main content
All CollectionsTechnical GuidelinesFilter and Search APIApp Structure
For dev - Filter Tree Option Properties (App Lib V2)
For dev - Filter Tree Option Properties (App Lib V2)
Thomas Ta avatar
Written by Thomas Ta
Updated over 5 months ago

⚠️ This instruction is appropriate for App Lib V2 only. 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 }
]
}
]
}
}

If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].

Did this answer your question?