8.SET (simplified)

Typical request/response flow for product 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") {
    productSets {
      edges {
        node {
          id
          tags
          imageLink
          products {
            id            
          }
        }
      }
    }
  }
}

GraphQL API response

The API returns the first 2 product sets with 5 products each.

{
  "data": {
    "product": {
      "productSets": {
        "edges": [
          {
            "node": {
              "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299",
              "tags": ["everyday"],
              "imageLink": "https://thumbnails.8scdn.io/9056af8c-e9b8-50db-bdf1-f794dc2e10d7.jpg",
              "products": [
                {
                  "id": "8S-DEMO-Jacket-1"
                },
                {
                  "id": "8S-DEMO-Polohemd-1"
                },
                {
                  "id": "8S-DEMO-Gürtel-1"
                },
                {
                  "id": "8S-DEMO-Hose-1"
                },
                {
                  "id": "8S-DEMO-Schuhe-1"
                }
              ]
            }
          },
          {
            "node": {
              "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299#generated#1",
              "tags": [],
              "imageLink": null,
              "products": [
                {
                  "id": "8S-DEMO-Jacket-2"
                },
                {
                  "id": "8S-DEMO-Polohemd-2"
                },
                {
                  "id": "8S-DEMO-Gürtel-2"
                },
                {
                  "id": "8S-DEMO-Hose-2"
                },
                {
                  "id": "8S-DEMO-Schuhe-2"
                }
              ]
            }
          }
        ]
      }
    }
  }
}

View event

initial view

User scrolls to the displayed product sets and items are about 50% inside the viewport.

A view event with type productSet must contain a productSet property containing the identifier of the product set that was visible. Here it is the first set e3bcaf66-5037-4d7b-be4a-8c571a6fb299.

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

Also a user context need to be attached.

{
  "type": "view",
  "view": {
    "type": "productSet",
    "productSet": {
      "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299",
    }
  },
  "context": [
    {
      "type": "user",
      "user": {
        "id": "c57a43f7-eefc-462b-b5a8-0ef421e90f67"
      }
    }
  ]
}

user paginates

The simplified 8.SET query returns product sets that can be displayed like they are. The most optimal way to display the sets is in pages for example in a slider. Thus the user will initially see the first set and can paginate to the next sets.

So on paging you need to send another view event.

The only thing that will change is the productSet.id this time it will be e3bcaf66-5037-4d7b-be4a-8c571a6fb299#generated#1

{
  "type": "view",
  "view": {
    "type": "productSet",
    "productSet": {
      "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299#generated#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-Gürtel-2 from the second set 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": {
        "productSet": {
          "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299#generated#1"
        },
        "type": "productSet"
      },
      "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-2 in size 120 - e.g. the variant SKU is 8S-DEMO-Gürtel-2-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": {
        "productSet": {
          "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299#generated#1"
        },
        "type": "productSet"
      },
      "type": "content"
    },
    {
      "type": "user",
      "user": {
        "id": "c57a43f7-eefc-462b-b5a8-0ef421e90f67"
      }
    }
  ]
}