8.SET

Typical request/response flow for matching product clusters.

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.

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.

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

View event

User scrolls to the displayed cross-selling items and items are about 50% inside the viewport.

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.

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

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

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