8.SET Custom

Typical request/response flow for custom sets.

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") {
    customSets {
      edges {
        node {
          id
          title
          description
          images {
            edges {
              node {
                url
              }
            }
          }
          products {
            id
            similarProducts(first: 2) {
              edges {
                node {
                  id
                }
              }
            }
          }
        }
      }
    }
  }
}

GraphQL API response

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

{
	"data": {
		"product": {
			"customSets": {
				"edges": [
					{
						"node": {
							"id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299",
							"title": "8SELECT Fashion for everyday",
							"description": "This is a demo set. It is here to preview the 8.SET Custom widget.",
							"images": {
								"edges": [
									{
										"node": {
											"url": "https://thumbnails.8scdn.io/9056af8c-e9b8-50db-bdf1-f794dc2e10d7.jpg"
										}
									}
								]
							},
							"products": [
								{
									"id": "8S-DEMO-Jacket-1",
									"similarProducts": {
										"edges": [
											{
												"node": {
													"id": "8S-DEMO-Jacket-2"
												}
											}
										]
									}
								},
								{
									"id": "8S-DEMO-Polohemd-1",
									"similarProducts": {
										"edges": [
											{
												"node": {
													"id": "8S-DEMO-Polohemd-10"
												}
											},
											{
												"node": {
													"id": "8S-DEMO-Polohemd-9"
												}
											}
										]
									}
								},
								{
									"id": "8S-DEMO-Gürtel-1",
									"similarProducts": {
										"edges": [
											{
												"node": {
													"id": "8S-DEMO-Gürtel-3"
												}
											},
											{
												"node": {
													"id": "8S-DEMO-Gürtel-4"
												}
											}
										]
									}
								},
								{
									"id": "8S-DEMO-Hose-1",
									"similarProducts": {
										"edges": [
											{
												"node": {
													"id": "8S-DEMO-Hose-2"
												}
											},
											{
												"node": {
													"id": "8S-DEMO-Hose-3"
												}
											}
										]
									}
								},
								{
									"id": "8S-DEMO-Schuhe-1",
									"similarProducts": {
										"edges": [
											{
												"node": {
													"id": "8S-DEMO-Schuhe-2"
												}
											},
											{
												"node": {
													"id": "8S-DEMO-Schuhe-3"
												}
											}
										]
									}
								}
							]
						}
					}
				]
			}
		}
	}
}

View event

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

A view event with type customSet must contain a customSet property containing the identifier of the custom set. Here it is e3bcaf66-5037-4d7b-be4a-8c571a6fb299.

This differs from 8.SIMILAR and 8.SET - the id of the custom set from the API response is now required here.

Also a user context need to be attached.

{
  "type": "view",
  "view": {
    "type": "customSet",
    "customSet": {
      "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299",
    }
  },
  "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-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-Gürtel-1"
    }
  },
  "context": [
    {
      "content": {
        "customSet": {
          "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299"
        },
        "type": "customSet"
      },
      "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-3 in size 120 - e.g. the variant SKU is 8S-DEMO-Gürtel-3-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.

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