# 8.SIMILAR

## GraphQL API Query

Get similar products for product with identifier `8S-DEMO-Polohemd-1`

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

## GraphQL API response

The API returns the first 2 similar products as requested.

```json
{
	"data": {
		"product": {
			"similarProducts": {
				"edges": [
					{
						"node": {
							"id": "8S-DEMO-Polohemd-10"
						}
					},
					{
						"node": {
							"id": "8S-DEMO-Polohemd-9"
						}
					}
				]
			}
		}
	}
}
```

## View event

User scrolls to the displayed similar 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 `similarProducts` must contain a `similarProducts` 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": "similarProducts",
    "similarProducts": {
      "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 similar products. Let's say `8S-DEMO-Polohemd-9` 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-Polohemd-9"
    }
  },
  "context": [
    {
      "content": {
        "similarProducts": {
          "id": "8S-DEMO-Polohemd-1"
        },
        "type": "similarProducts"
      },
      "type": "content"
    },
    {
      "type": "user",
      "user": {
        "id": "c57a43f7-eefc-462b-b5a8-0ef421e90f67"
      }
    }
  ]
}
```

### add to cart

User adds one of the shown similar products to the cart. Let's say `8S-DEMO-Polohemd-10` in size L - e.g. the variant SKU is `8S-DEMO-Polohemd-10-L`.

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": "addToCart",
    "type": "product",
    "product": {
      "sku": "8S-DEMO-Polohemd-10-L"
    }
  },
  "context": [
    {
      "content": {
        "similarProducts": {
          "id": "8S-DEMO-Polohemd-1"
        },
        "type": "similarProducts"
      },
      "type": "content"
    },
    {
      "type": "user",
      "user": {
        "id": "c57a43f7-eefc-462b-b5a8-0ef421e90f67"
      }
    }
  ]
}
```