Product set of 4 with alternatives

This example illustrates how to fetch an 8.SET Compose product set with a given trigger product and three additional set products including their potential alternatives.

What we want to build

Let's assume we want to show a two-dimensial outfit composer with alternatives to choose from on the product detail page of a given product:

An 8.SET Compose set consists of a trigger product and between two and four additional set products.

In the above example, the top left product is our trigger product. It is the product this 8.SET Compose product set was generated for. In most cases this will be the product, on which product details page the set will be shown. The additional slots in the outfit composer show set products with a variety of recommended product alternatives a customer could choose from. This particular 8.SET Compose product set has three recommended set products.

How it works

The 8SELECT GraphQL API allows you to query information about an 8.SET Compose product set containing identifiers of the products contained in the set. These enable you to subsequently fetch all product data, like prices, images and more, from your own shop APIs to build your custom interface.

There are three queryTypes, you can choose from: SKU, MAIN_SKU and MODEL_ID. To learn more about the differences between those identifiers, see https://docs.8select.io/produktdaten-uebermitteln/stammdaten/details.

In the following example we are using the MAIN_SKU to query a product set and the SKUs of the contained products, as well as their alternatives. The triggerProduct and the setProducts are two separate fields in the query. Since we already know the SKU of our trigger product and just want to show alternatives for set products, we actually only need to query the latter:

query {
  setCompose(input: { queryType: MAIN_SKU, value: "5969155" }) {
    edges {
      node {
        id # for 8.API tracking
        setProducts {
          sku
          alternatives {
            edges {
              node {
                sku
              }
            }
          }
        }
      }
    }
  }
}

The id is queried, so we can provide it as context when tracking 8.SET Compose interactions. To learn more, please refer to the content context section of API tracking.

As can be seen in the response, the list of alternatives can be quite extensive depending on the respective product. Let's say, we want to show 10 alternatives at most to make the UI easier to navigate. There would be no reason to fetch more product alternatives than necessary. To achieve this, we can use the first paramter to limit the number of returned alternatives:

query {
  setCompose(input: { queryType: MAIN_SKU, value: "5969155" }) {
    edges {
      node {
        id # for 8.API tracking
        setProducts {
          sku
          alternatives(first: 10) {
            edges {
              node {
                sku
              }
            }
          }
        }
      }
    }
  }
}

Looking at the UI we wanted to build, we would show one additional tile β€” next to our trigger product on the left β€” for each entry in the setProducts array. The tiles themselves are sliders, which a user can click through to see all product alternatives for the respecive set product. These correspond to the individual node fields in the edges array of the set product's alternatives field in the response. A button below the tiles allows a user to expand the slider and show multiple product alternatives in a row below the original 8.SET Compose product set. Using these SKUs, you can now fetch the product data and information required for your custom interface from your own shop API.

Last updated