8.SIMILAR
Fetch similar products for a given product identifier.
Last updated
Fetch similar products for a given product identifier.
Last updated
We want to show a slider with up to 8 similar products on our product page.
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") {
similarProducts(first: 8) {
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 similarProducts(first: 8) {\n edges {\n node {\n id\n }\n }\n }\n\t}\n}\n"}'{
"data": {
"product": {
"similarProducts": {
"edges": [
{
"node": {
"id": "8S-DEMO-Polohemd-10"
}
},
{
"node": {
"id": "8S-DEMO-Polohemd-9"
}
},
{
"node": {
"id": "8S-DEMO-Polohemd-7"
}
},
{
"node": {
"id": "8S-DEMO-Polohemd-8"
}
},
{
"node": {
"id": "8S-DEMO-Polohemd-2"
}
},
{
"node": {
"id": "8S-DEMO-Polohemd-3"
}
},
{
"node": {
"id": "8S-DEMO-Polohemd-4"
}
},
{
"node": {
"id": "8S-DEMO-Polohemd-5"
}
}
]
}
}
}
}
In case you can not make the extra roundtrip you can actually query all the data that is required to render a basic UI.
```groovy
query {
product(id: "8S-DEMO-Polohemd-1") {
similarProducts(first: 5) {
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 similarProducts(first: 5) {\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}"}'{
"data": {
"product": {
"similarProducts": {
"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-9",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Polohemd-9.jpg"
}
}
]
},
"modelId": "8S-DEMO-Polohemd",
"name": "Polohemd Alternative 9",
"tags": [
"sale",
"sale_discount_4"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Polohemd-9-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": {
"id": "8S-DEMO-Polohemd-2",
"brand": "8select Fashion",
"images": {
"edges": [
{
"node": {
"url": "https://wgt-prod.staging.8select.io/db54750f-80fc-4818-9455-30ca233225dc/demo/images/Polohemd.png"
}
}
]
},
"modelId": "8S-DEMO-Polohemd",
"name": "Polohemd Alternative 2",
"tags": [
"sale",
"sale_discount_4"
],
"url": "https://www.8select.com/",
"variants": {
"edges": [
{
"node": {
"id": "8S-DEMO-Polohemd-2-M",
"variantId": "M",
"manufacturerSuggestedRetailPrice": {
"amount": "155.55",
"currencyCode": "EUR"
},
"price": {
"amount": "150.00",
"currencyCode": "EUR"
}
}
},
{
"node": {
"id": "8S-DEMO-Polohemd-2-L",
"variantId": "L",
"manufacturerSuggestedRetailPrice": {
"amount": "155.55",
"currencyCode": "EUR"
},
"price": {
"amount": "150.00",
"currencyCode": "EUR"
}
}
}
]
}
}
}
]
}
}
}
}
