Developer Category Documentation

Category Filtering

Category filtering can be performed through URL search parameters.

Format

The filter format is JSON as in the following example:

{
  "categories": [
    {
      "cat_id": 1,
      "values": [2],
      "operator": "AND"
    }
  ]
}

categories is an array of filters.
cat_id is an integer corresponding to the category.
values is an array of value IDs corresponding to the category values to filter by.
operator is one of "AND" or "OR" and determines whether a property must match every value or any value to pass the filter.

Filtering By Search Parameter

The filter can be URI encoded and passed as a URL search parameter.

As a search parameter, the example looks like this: categoryFilter={"categories"%3A[{"operator"%3A"AND"%2C"values"%3A[2]%2C"cat_id"%3A1}]}

This example will only show search results that have the category value with ID 2 for the category with ID 1.

Filtering by Javascript global

The application will check window.REZFUSION_COMPONENTS_CONF.settings.components.SearchProvider.filters.categoryFilter for initial category filter settings. Note that if the window.REZFUSION_COMPONENTS_CONF object already exists, overwriting it could override other configuration settings and cause unexpected behavior.

Determining IDs

Category IDs and category value IDs can be determined a few ways.

Hub Dashboard

Log in to the Hub dashboard at https://hub.rezfusion.com
Navigate to the channel in question
On the left sidebar, click "View All Custom Categories"

This will take you to a list of categories. If you click on the "Manage" link for a category, that category's ID will be the last part of the path in the URL.

The page for a category includes a list of values associated with that category. Clicking on the "Manage" link for a category value will take you to the page associated with that category value. The category value will be the last part of the path in the URL.

HTML

View the search page for the website in question.
Click the "Filters" button to open the filters modal.
Inspect the modal in your web browser (usually F12)

Each category that can be filtered is contained in a div with class bt-category. The category ID can be found in the data-category property on the corresponding div. The human-readable name of the category is contained in an h4 inside the div.

The same bt-category div also contains all the category values for that category. Each category value is contained in an li with a class bt-category-filter as well as a class value-n, where n is the ID of that value.

GraphQL

In most browsers, the HTTP requests used to populate the front end application with data can be viewed through the developer tools. On initial load for the search page, one GraphQL request is made to retrieve property data, and one is made to retrieve category data. In the response to the category data request, the category and category value IDs and human-readable names can be viewed in the JSON response.

Example of the format:

{
  "data": {
    "categoryInfo": {
      "categories": [
        {
          "name": "Category One",
          "id": 1,
          "values": [
            {
              "name": "category one, value one",
              "id": 1
            },
            {
              "name": "category one, value two",
              "id": 2
            }
          ]
        },
        {
          "name": "Category Two",
          "id": 2,
          "values": [
            {
              "name": "category two, value one",
              "id": 1
            }
          ]
        }
      ]
    }
  }
}

React Developer Tools

In deployed versions of Hub, component names are minimized, making it difficult to find specific components. Nonetheless, both categories and category values are keyed by their IDs. Categories are found in CategoryFilter components, and category values are found in styled.li components.

Additionally, each CategoryFilter component receives its category ID and all of its associated values as props.