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
          }
        ]
      }
		]
}

Related Articles