# 8.SET (simplified)

## GraphQL API Query

Get matching product clusters for product with identifier `8S-DEMO-Polohemd-1`.\
We request 4 clusters with 2 products each, i.e. a total of 8 products.<br>

{% code expandable="true" %}

```graphql
query {
  product(id: "8S-DEMO-Polohemd-1") {
    productSets {
      edges {
        node {
          id
          tags
          imageLink
          products {
            id            
          }
        }
      }
    }
  }
}
```

{% endcode %}

## GraphQL API response

The API returns the first 2 product sets with 5 products each.

{% code expandable="true" %}

```json
{
  "data": {
    "product": {
      "productSets": {
        "edges": [
          {
            "node": {
              "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299",
              "tags": ["everyday"],
              "imageLink": "https://thumbnails.8scdn.io/9056af8c-e9b8-50db-bdf1-f794dc2e10d7.jpg",
              "products": [
                {
                  "id": "8S-DEMO-Jacket-1"
                },
                {
                  "id": "8S-DEMO-Polohemd-1"
                },
                {
                  "id": "8S-DEMO-Gürtel-1"
                },
                {
                  "id": "8S-DEMO-Hose-1"
                },
                {
                  "id": "8S-DEMO-Schuhe-1"
                }
              ]
            }
          },
          {
            "node": {
              "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299#generated#1",
              "tags": [],
              "imageLink": null,
              "products": [
                {
                  "id": "8S-DEMO-Jacket-2"
                },
                {
                  "id": "8S-DEMO-Polohemd-2"
                },
                {
                  "id": "8S-DEMO-Gürtel-2"
                },
                {
                  "id": "8S-DEMO-Hose-2"
                },
                {
                  "id": "8S-DEMO-Schuhe-2"
                }
              ]
            }
          }
        ]
      }
    }
  }
}
```

{% endcode %}

## View event

### initial view

User scrolls to the displayed product sets and items are about [50% inside the viewport](https://docs.8select.io/api-tracking/events/view/how-to-evaluate-if-view-event-can-be-sent).

A view event with type `productSet` must contain a `productSet` property containing the identifier of the product set that was visible. Here it is the first set `e3bcaf66-5037-4d7b-be4a-8c571a6fb299`.

{% hint style="warning" %}
This differs from 8.SIMILAR and 8.SET - the `id` of the product set from the API response is now required here.
{% endhint %}

Also a `user` context need to be attached.

```json
{
  "type": "view",
  "view": {
    "type": "productSet",
    "productSet": {
      "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299",
    }
  },
  "context": [
    {
      "type": "user",
      "user": {
        "id": "c57a43f7-eefc-462b-b5a8-0ef421e90f67"
      }
    }
  ]
}
```

### user paginates

The simplified 8.SET query returns product sets that can be displayed like they are. The most optimal way to display the sets is in pages for example in a slider. Thus the user will initially see the first set and can paginate to the next sets.

So on paging you need to send another view event.

The only thing that will change is the `productSet.id` this time it will be `e3bcaf66-5037-4d7b-be4a-8c571a6fb299#generated#1`

```json
{
  "type": "view",
  "view": {
    "type": "productSet",
    "productSet": {
      "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299#generated#1",
    }
  },
  "context": [
    {
      "type": "user",
      "user": {
        "id": "c57a43f7-eefc-462b-b5a8-0ef421e90f67"
      }
    }
  ]
}
```

## Interact event

### click

User clicks on one of the shown cross-selling products. Let's say `8S-DEMO-Gürtel-2` from the second set and no specific size is selected.

An interact event with type `product` must contain a `product` property containing the `sku` of the respective product and can contain an `action`.

Also a `content` and `user` context need to be attached.\
The `content` context basically resembles the data from the view event.

```json
{
  "type": "interact",
  "interact": {
    "action": "click",
    "type": "product",
    "product": {
      "sku": "8S-DEMO-Gürtel-1"
    }
  },
  "context": [
    {
      "content": {
        "productSet": {
          "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299#generated#1"
        },
        "type": "productSet"
      },
      "type": "content"
    },
    {
      "type": "user",
      "user": {
        "id": "c57a43f7-eefc-462b-b5a8-0ef421e90f67"
      }
    }
  ]
}
```

### add to cart

User adds one of the shown cross-selling products to the cart. Let's say `8S-DEMO-Gürtel-2` in size 120 - e.g. the variant SKU is `8S-DEMO-Gürtel-2-120`.

An interact event with type `product` must contain a `product` property containing the `sku` of the respective product and **must contain** an `action`.

Also a `content` and `user` context need to be attached.\
The `content` context basically resembles the data from the view event.

```json
{
  "type": "interact",
  "interact": {
    "action": "addToCart",
    "type": "product",
    "product": {
      "sku": "8S-DEMO-Gürtel-3-120"
    }
  },
  "context": [
    {
      "content": {
        "productSet": {
          "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299#generated#1"
        },
        "type": "productSet"
      },
      "type": "content"
    },
    {
      "type": "user",
      "user": {
        "id": "c57a43f7-eefc-462b-b5a8-0ef421e90f67"
      }
    }
  ]
}
```