# 8.SET

## 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>

```graphql
query {
  product(id: "8S-DEMO-Polohemd-1") {
    matchingProductClusters(first: 4) {
      edges {
        node {
          products(first: 2) {
            edges {
              node {
                id
              }
            }
          }
        }
      }
    }
  }
}

```

## GraphQL API response

The API returns the first 4 clusters with the first 2 products as requested.

{% code expandable="true" %}

```json
{
	"data": {
		"product": {
			"matchingProductClusters": {
				"edges": [
					{
						"node": {
							"products": {
								"edges": [
									{
										"node": {
											"id": "8S-DEMO-Polohemd-10"
										}
									},
									{
										"node": {
											"id": "8S-DEMO-Polohemd-8"
										}
									}
								]
							}
						}
					},
					{
						"node": {
							"products": {
								"edges": [
									{
										"node": {
											"id": "8S-DEMO-Hose-1"
										}
									},
									{
										"node": {
											"id": "8S-DEMO-Hose-3"
										}
									}
								]
							}
						}
					},
					{
						"node": {
							"products": {
								"edges": [
									{
										"node": {
											"id": "8S-DEMO-Schuhe-1"
										}
									},
									{
										"node": {
											"id": "8S-DEMO-Schuhe-2"
										}
									}
								]
							}
						}
					},
					{
						"node": {
							"products": {
								"edges": [
									{
										"node": {
											"id": "8S-DEMO-Jacket-1"
										}
									},
									{
										"node": {
											"id": "8S-DEMO-Jacket-2"
										}
									}
								]
							}
						}
					}
				]
			}
		}
	}
}
```

{% endcode %}

## View event

User scrolls to the displayed cross-selling items 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 `matchingProductClusters` must contain a `matchingProductClusters` property containing the identifier of the product the content was requested for. Here it is `8S-DEMO-Polohemd-1`, i.e. the same `id` as in our initial API query.

Also a `user` context need to be attached.

```json
{
  "type": "view",
  "view": {
    "type": "matchingProductClusters",
    "matchingProductClusters": {
      "id": "8S-DEMO-Polohemd-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-Hose-1` 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-Hose-1"
    }
  },
  "context": [
    {
      "content": {
        "matchingProductClusters": {
          "id": "8S-DEMO-Polohemd-1"
        },
        "type": "matchingProductClusters"
      },
      "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-Schuhe-1` in size 43 - e.g. the variant SKU is `8S-DEMO-Schuhe-1-43`.

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-Schuhe-1-43"
    }
  },
  "context": [
    {
      "content": {
        "matchingProductClusters": {
          "id": "8S-DEMO-Polohemd-1"
        },
        "type": "matchingProductClusters"
      },
      "type": "content"
    },
    {
      "type": "user",
      "user": {
        "id": "c57a43f7-eefc-462b-b5a8-0ef421e90f67"
      }
    }
  ]
}
```
