8.SIMILAR

Typical request/response flow for similar products.

GraphQL API Query

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

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.

{
	"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.

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.

{
  "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.

{
  "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.

{
  "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"
      }
    }
  ]
}