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.

We strongly encourage you to use the new productSets() query!

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.

GraphQL query

query {
  product(id: "8S-DEMO-Polohemd-1") {
    matchingProductClusters(first: 5) {
      edges {
        node {
          products(first: 3) {
            edges {
              node {
                id
              }
            }
          }
        }
      }
    }
  }
}

cURL request

response

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.

GraphQL query

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

response

a