8.SET
Fetch cross selling products for a given product identifier.
What we want to build
We want to show a slider with cross selling content. We want to limit the number of different product categories we show to 5 and only want 3 products per category. We will then end up with up to 15 matching products.
The response will not include the product the content was requested for. If you want to include it in your UI you need to add it to the list of products on your side.
We will request 5 matching clusters with up to 3 products each. We actually get back less products in our example - 3 shirts; 2 watches; 3 girdles; 2 trousers; 3 gloves
Our UI will be rendered by alternating over the 5 clusters, i.e. we take one product out of each cluster and then start the iteration again until no more products are left.
GraphQL query and response - id only
To ensure that you show the most recent data in you shop you should only query the product ids and fetch the rest of the data you need for your UI from your own database.
query {
product(id: "8S-DEMO-Polohemd-1") {
matchingProductClusters(first: 5) {
edges {
node {
products(first: 3) {
edges {
node {
id
}
}
}
}
}
}
}
}
curl --request POST \
--url https://api.8select.io/graphql \
--header 'Content-Type: application/json' \
--header 'x-api-id: db54750f-80fc-4818-9455-30ca233225dc' \
--data '{"query":"query {\n product(id: \"8S-DEMO-Polohemd-1\") {\n matchingProductClusters(first: 5) {\n edges {\n node {\n products(first: 3) {\n edges {\n node {\n id\n }\n }\n }\n }\n }\n }\n }\n}\n"}'{
"data": {
"product": {
"matchingProductClusters": {
"edges": [
{
"node": {
"products": {
"edges": [
{
"node": {
"id": "8S-DEMO-Polohemd-10"
}
},
{
"node": {
"id": "8S-DEMO-Polohemd-7"
}
},
{
"node": {
"id": "8S-DEMO-Polohemd-8"
}
}
]
}
}
},
{
"node": {
"products": {
"edges": [
{
"node": {
"id": "8S-DEMO-Uhr-1"
}
},
{
"node": {
"id": "8S-DEMO-Uhr-2"
}
}
]
}
}
},
{
"node": {
"products": {
"edges": [
{
"node": {
"id": "8S-DEMO-Gürtel-3"
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-4"
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-1"
}
}
]
}
}
},
{
"node": {
"products": {
"edges": [
{
"node": {
"id": "8S-DEMO-Hose-1"
}
},
{
"node": {
"id": "8S-DEMO-Hose-3"
}
}
]
}
}
},
{
"node": {
"products": {
"edges": [
{
"node": {
"id": "8S-DEMO-Handschuhe-1"
}
},
{
"node": {
"id": "8S-DEMO-Handschuhe-2"
}
},
{
"node": {
"id": "8S-DEMO-Handschuhe-3"
}
}
]
}
}
}
]
}
}
}
}GraphQL query and response - full data
In case you can not make the extra roundtrip you can actually query all the data that is required to render a basic UI.
query {
product(id: "8S-DEMO-Polohemd-1") {
matchingProductClusters(first: 6) {
edges {
node {
products(first: 3) {
edges {
node {
id
brand
images {
edges {
node {
url
}
}
}
modelId
name
tags
url
variants {
edges {
node {
id
variantId
manufacturerSuggestedRetailPrice {
amount
currencyCode
}
price {
amount
currencyCode
}
}
}
}
}
}
}
}
}
}
}
}
curl --request POST \
--url https://api.8select.io/graphql \
--header 'Content-Type: application/json' \
--header 'x-api-id: db54750f-80fc-4818-9455-30ca233225dc' \
--data '{"query":"query {\n product(id: \"8S-DEMO-Polohemd-1\") {\n matchingProductClusters(first: 6) {\n edges {\n node {\n products(first: 3) {\n edges {\n node {\n id\n brand\n images {\n edges {\n node {\n url\n }\n }\n }\n modelId\n name\n tags\n url\n variants {\n edges {\n node {\n id\n variantId\n manufacturerSuggestedRetailPrice {\n amount\n currencyCode\n }\n price {\n amount\n currencyCode\n }\n }\n }\n }\n }\n }\n }\n }\n }\n }\n }\n}\n"}'{
"data": {
"product": {
"matchingProductClusters": {
"edges": [
{
"node": {
"products": {
"edges": [
{
"node": {
"id": "8S-DEMO-Polohemd-10",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Polohemd-10.jpg"
}
}
]
},
"modelId": "8S-DEMO-Polohemd",
"name": "Polohemd Alternative 10",
"tags": [
"sale",
"sale_discount_4"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Polohemd-10-M",
"variantId": "M",
"manufacturerSuggestedRetailPrice": {
"amount": "155.55",
"currencyCode": "EUR"
},
"price": {
"amount": "150.00",
"currencyCode": "EUR"
}
}
}
]
}
}
},
{
"node": {
"id": "8S-DEMO-Polohemd-7",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Polohemd-7.jpg"
}
}
]
},
"modelId": "8S-DEMO-Polohemd",
"name": "Polohemd Alternative 7",
"tags": [
"sale",
"sale_discount_4"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Polohemd-7-M",
"variantId": "M",
"manufacturerSuggestedRetailPrice": {
"amount": "155.55",
"currencyCode": "EUR"
},
"price": {
"amount": "150.00",
"currencyCode": "EUR"
}
}
}
]
}
}
},
{
"node": {
"id": "8S-DEMO-Polohemd-8",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Polohemd-8.jpg"
}
}
]
},
"modelId": "8S-DEMO-Polohemd",
"name": "Polohemd Alternative 8",
"tags": [
"sale",
"sale_discount_4"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Polohemd-8-M",
"variantId": "M",
"manufacturerSuggestedRetailPrice": {
"amount": "155.55",
"currencyCode": "EUR"
},
"price": {
"amount": "150.00",
"currencyCode": "EUR"
}
}
}
]
}
}
}
]
}
}
},
{
"node": {
"products": {
"edges": [
{
"node": {
"id": "8S-DEMO-Uhr-1",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Uhr.png"
}
}
]
},
"modelId": "8S-DEMO-Uhr",
"name": "Uhr",
"tags": [],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Uhr-1",
"variantId": "onesize",
"manufacturerSuggestedRetailPrice": {
"amount": "149.49",
"currencyCode": "EUR"
},
"price": {
"amount": "149.49",
"currencyCode": "EUR"
}
}
}
]
}
}
},
{
"node": {
"id": "8S-DEMO-Uhr-2",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Uhr-2.jpg"
}
}
]
},
"modelId": "8S-DEMO-Uhr",
"name": "Uhr Alternative 2",
"tags": [],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Uhr-2",
"variantId": "onesize",
"manufacturerSuggestedRetailPrice": {
"amount": "149.49",
"currencyCode": "EUR"
},
"price": {
"amount": "149.49",
"currencyCode": "EUR"
}
}
}
]
}
}
}
]
}
}
},
{
"node": {
"products": {
"edges": [
{
"node": {
"id": "8S-DEMO-Gürtel-3",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Guertel-3.jpg"
}
}
]
},
"modelId": "8S-DEMO-Gürtel",
"name": "Gürtel Alternative 3",
"tags": [
"sale",
"sale_discount_7"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Gürtel-3-95",
"variantId": "95",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-3-100",
"variantId": "100",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-3-105",
"variantId": "105",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-3-110",
"variantId": "110",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-3-120",
"variantId": "120",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
}
]
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-4",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Guertel-4.jpg"
}
}
]
},
"modelId": "8S-DEMO-Gürtel",
"name": "Gürtel Alternative 4",
"tags": [
"sale",
"sale_discount_7"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Gürtel-4-95",
"variantId": "95",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-4-100",
"variantId": "100",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-4-105",
"variantId": "105",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-4-110",
"variantId": "110",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-4-120",
"variantId": "120",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
}
]
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-1",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Guertel.png"
}
}
]
},
"modelId": "8S-DEMO-Gürtel",
"name": "Gürtel",
"tags": [
"sale",
"sale_discount_7"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Gürtel-1-95",
"variantId": "95",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-1-100",
"variantId": "100",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-1-105",
"variantId": "105",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-1-110",
"variantId": "110",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Gürtel-1-120",
"variantId": "120",
"manufacturerSuggestedRetailPrice": {
"amount": "35.99",
"currencyCode": "EUR"
},
"price": {
"amount": "33.33",
"currencyCode": "EUR"
}
}
}
]
}
}
}
]
}
}
},
{
"node": {
"products": {
"edges": [
{
"node": {
"id": "8S-DEMO-Hose-1",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Hose.png"
}
}
]
},
"modelId": "8S-DEMO-Hose",
"name": "Hose",
"tags": [],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Hose-1-32-32",
"variantId": "32-32",
"manufacturerSuggestedRetailPrice": {
"amount": "79.99",
"currencyCode": "EUR"
},
"price": {
"amount": "79.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Hose-1-32-34",
"variantId": "32-34",
"manufacturerSuggestedRetailPrice": {
"amount": "79.99",
"currencyCode": "EUR"
},
"price": {
"amount": "79.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Hose-1-34-34",
"variantId": "34-34",
"manufacturerSuggestedRetailPrice": {
"amount": "79.99",
"currencyCode": "EUR"
},
"price": {
"amount": "79.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Hose-1-36-32",
"variantId": "36-32",
"manufacturerSuggestedRetailPrice": {
"amount": "79.99",
"currencyCode": "EUR"
},
"price": {
"amount": "79.99",
"currencyCode": "EUR"
}
}
}
]
}
}
},
{
"node": {
"id": "8S-DEMO-Hose-3",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Hose-3.jpg"
}
}
]
},
"modelId": "8S-DEMO-Hose",
"name": "Hose Alternative 3",
"tags": [],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Hose-3-32-32",
"variantId": "32-32",
"manufacturerSuggestedRetailPrice": {
"amount": "79.99",
"currencyCode": "EUR"
},
"price": {
"amount": "79.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Hose-3-32-34",
"variantId": "32-34",
"manufacturerSuggestedRetailPrice": {
"amount": "79.99",
"currencyCode": "EUR"
},
"price": {
"amount": "79.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Hose-3-34-34",
"variantId": "34-34",
"manufacturerSuggestedRetailPrice": {
"amount": "79.99",
"currencyCode": "EUR"
},
"price": {
"amount": "79.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Hose-3-36-32",
"variantId": "36-32",
"manufacturerSuggestedRetailPrice": {
"amount": "79.99",
"currencyCode": "EUR"
},
"price": {
"amount": "79.99",
"currencyCode": "EUR"
}
}
}
]
}
}
}
]
}
}
},
{
"node": {
"products": {
"edges": [
{
"node": {
"id": "8S-DEMO-Handschuhe-1",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Handschuhe.png"
}
}
]
},
"modelId": "8S-DEMO-Handschuhe",
"name": "Handschuhe",
"tags": [
"sale",
"sale_discount_20"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Handschuhe-1-8",
"variantId": "8",
"manufacturerSuggestedRetailPrice": {
"amount": "49.99",
"currencyCode": "EUR"
},
"price": {
"amount": "39.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Handschuhe-1-9",
"variantId": "9",
"manufacturerSuggestedRetailPrice": {
"amount": "49.99",
"currencyCode": "EUR"
},
"price": {
"amount": "39.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Handschuhe-1-10",
"variantId": "10",
"manufacturerSuggestedRetailPrice": {
"amount": "49.99",
"currencyCode": "EUR"
},
"price": {
"amount": "39.99",
"currencyCode": "EUR"
}
}
}
]
}
}
},
{
"node": {
"id": "8S-DEMO-Handschuhe-2",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Handschuhe-2.jpg"
}
}
]
},
"modelId": "8S-DEMO-Handschuhe",
"name": "Handschuhe Alternative 2",
"tags": [
"sale",
"sale_discount_13"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Handschuhe-2-8",
"variantId": "8",
"manufacturerSuggestedRetailPrice": {
"amount": "45.99",
"currencyCode": "EUR"
},
"price": {
"amount": "39.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Handschuhe-2-9",
"variantId": "9",
"manufacturerSuggestedRetailPrice": {
"amount": "45.99",
"currencyCode": "EUR"
},
"price": {
"amount": "39.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Handschuhe-2-10",
"variantId": "10",
"manufacturerSuggestedRetailPrice": {
"amount": "43.99",
"currencyCode": "EUR"
},
"price": {
"amount": "39.99",
"currencyCode": "EUR"
}
}
}
]
}
}
},
{
"node": {
"id": "8S-DEMO-Handschuhe-3",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Handschuhe-3.jpg"
}
}
]
},
"modelId": "8S-DEMO-Handschuhe",
"name": "Handschuhe Alternative 3",
"tags": [
"sale",
"sale_discount_33"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Handschuhe-3-8",
"variantId": "8",
"manufacturerSuggestedRetailPrice": {
"amount": "29.99",
"currencyCode": "EUR"
},
"price": {
"amount": "29.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Handschuhe-3-9",
"variantId": "9",
"manufacturerSuggestedRetailPrice": {
"amount": "39.99",
"currencyCode": "EUR"
},
"price": {
"amount": "39.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Handschuhe-3-10",
"variantId": "10",
"manufacturerSuggestedRetailPrice": {
"amount": "59.99",
"currencyCode": "EUR"
},
"price": {
"amount": "39.99",
"currencyCode": "EUR"
}
}
}
]
}
}
}
]
}
}
},
{
"node": {
"products": {
"edges": [
{
"node": {
"id": "8S-DEMO-Jacket-2",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Jacket.png"
}
}
]
},
"modelId": "8S-DEMO-Jacket",
"name": "Jacket Alternative",
"tags": [
"sale",
"sale_discount_20"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Jacket-2-48",
"variantId": "48",
"manufacturerSuggestedRetailPrice": {
"amount": "199.99",
"currencyCode": "EUR"
},
"price": {
"amount": "159.99",
"currencyCode": "EUR"
}
}
}
]
}
}
},
{
"node": {
"id": "8S-DEMO-Jacket-1",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Jacket.png"
}
}
]
},
"modelId": "8S-DEMO-Jacket",
"name": "Jacket",
"tags": [
"sale",
"sale_discount_10"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Jacket-1-48",
"variantId": "48",
"manufacturerSuggestedRetailPrice": {
"amount": "99.99",
"currencyCode": "EUR"
},
"price": {
"amount": "99.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Jacket-1-52",
"variantId": "52",
"manufacturerSuggestedRetailPrice": {
"amount": "99.99",
"currencyCode": "EUR"
},
"price": {
"amount": "99.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Jacket-1-54",
"variantId": "54",
"manufacturerSuggestedRetailPrice": {
"amount": "99.99",
"currencyCode": "EUR"
},
"price": {
"amount": "99.99",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Jacket-1-98",
"variantId": "98",
"manufacturerSuggestedRetailPrice": {
"amount": "99.99",
"currencyCode": "EUR"
},
"price": {
"amount": "89.99",
"currencyCode": "EUR"
}
}
}
]
}
}
}
]
}
}
}
]
}
}
}
}
a
Last updated
