8.SET
Fetch cross selling products for a given product identifier.
Last updated
Fetch cross selling products for a given product identifier.
Last updated
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.
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"
}
}
]
}
}
}
]
}
}
}
}
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"
}
}