Searchkit API supports a number of different instantsearch facet components. The following examples show what components are supported and how to add them to your search application.

Below we will show how to setup a field in Elasticsearch to be used as a facet attribute. You will then be able to use the facet attribute with instantsearch components.

Defining a facet attribute

By default, any string type field in Elasticsearch will be defined as a text field and a keyword subfield. The text field is used for full text search and the keyword field is used for aggregations.

Read more about Elasticsearch dynamic field mapping in the Elasticsearch documentation (opens in a new tab).

The following document indexed in Elasticsearch:

{
  "brand": "Apple"
}

will result in the following mapping:

{
  "properties": {
    "brand": {
      "type": "text",
      "fields": {
        "keyword": {
          "type": "keyword"
        }
      }
    }
  }
}

The keyword field is the field that should be used for facet attributes. In this case, the facet field should be brand.keyword.

You will then be able to define a facet attribute in Searchkit:

Simple Facet Attribute

{
  facet_attributes: [
    { 
      attribute: 'brand', 
      field: 'brand.keyword', 
      type: 'string' 
    },
  ]
}
 

Frontend Usage

Then you can use instantsearch components using the brand facet attribute.

import { RefinementList } from "react-instantsearch-hooks-web";
 
<RefinementList attribute="brand" />;

See the Refinement Facets components on how to use.

Array based Values

Elasticsearch supports array based values. This means that you can have a field that is an array of values.

Read more about array based values in the Elasticsearch documentation (opens in a new tab).

Defining a facet attribute for an array field

An example of an array field is a tags field. The following document indexed in Elasticsearch:

{
  "tags": ["apple", "fruit"]
}

will result in the following mapping:

{
  "properties": {
    "tags": {
      "type": "text",
      "fields": {
        "keyword": {
          "type": "keyword"
        }
      }
    }
  }
}

The keyword field is the field that should be used for facet attributes. In this case, the facet field should be tags.keyword.

You will then be able to define a facet attribute in Searchkit:

{
  facet_attributes: [
    { 
      attribute: 'tags', 
      field: 'tags.keyword', 
      type: 'string' 
    },
  ]
}
 

Then you can use instantsearch components using the tags facet attribute.

Nested Fields Support

Elasticsearch supports nested fields. This means that you can have a field that is an object with nested fields.

Read more about nested fields in the Elasticsearch documentation (opens in a new tab).

Marketplace Example

A product document may have one or more suppliers. Each supplier may have a different price for the product. The following document shows a product with two suppliers:

{
  "name": "AirPods",
  "marketplace": [
    {
      "supplier": "Apple",
      "price": 100,
      "market": "Worldwide"
    },
    {
      "supplier": "Dixons",
      "price": 95,
      "market": "GB"
    }
  ]
}

The mapping for the marketplace field would be:

{
  "properties": {
    "marketplace": {
      "type": "nested",
      "properties": {
        "supplier": {
          "type": "text",
          "fields": {
            "keyword": {
              "type": "keyword"
            }
          }
        },
        "price": {
          "type": "integer"
        },
        "market": {
          "type": "text",
          "fields": {
            "keyword": {
              "type": "keyword"
            }
          }
        }
      }
    }
  }
}

Defining a facet attribute for a nested field

To define a facet attribute for a nested field, you need to specify the path to the nested field.

{
  facet_attributes: [
    { 
      attribute: 'marketplace.supplier', 
      field: 'supplier.keyword', 
      type: 'string',
      nestedPath: 'marketplace'
    },
  ]
}
 

Then you can use instantsearch components using the marketplace.supplier facet attribute.