Shopbox API Examples

Find Similar

Shopbox API usage.

Below you can find a simple carousel example using the frequently_bought_together endpoint of our Shopbox API. Other documentation abot our API can be found here.

Generate API key(token):

To use our Shopbox API you need to add an API key to each request so that the API can identify you. You can generate your API key through the Shopbox portal.

Your API key should always be added in the Header of your Api request.

Query parameters

To get successful recommendations, adding the sku parameter to your API request is mandatory. Please note that only one product SKU is required for this API call. This and other optional query parameters can be found in the table below.

To learn more about how to extract the Shopbox UUID and SUID to use with your API queries, please visit our docs.

Query parameters	Description	Type	Example
sku - required	Product SKU	string	sku=0001
size	This allows you to filter the results by size	integer or string	size=10
currency	Currency codes (ISO 4217)	string >= 3 characters	currency=EUR
page		integer > 0	page=1
num_products	Number of products to be returned	integer ( 0 .. 20 )	num_products=10
fields	Fields to retreive, must be separated by commas	string	fields=sku,name
uuid	Client side user unique identifier	string	uuid=myuseruniqueid
suid	Session unique identifier	string
pageload_id	Page load identifer, generated for each page load	string
source_sb_element		string
source_sb_class		string

Here is an example code snippet calling the Shopbox API:

const getProducts = async (sku) => {
  const SB_TOKEN = "MySbToken";
  let params = {
    sku: sku,
    currency: "GBP",
    page: page,
  };
  if (window?.getShopboxClientUUID) {
    params.uuid = window?.getShopboxClientUUID();
  }
  if (window?.getShopboxClientPageLoadID) {
    params.pageload_id = window?.getShopboxClientPageLoadID();
  }

  const apiUrl = `https://beta-api.shopbox.ai/api/v1/find_similar?${new URLSearchParams(params).toString()}`;

  const response = await fetch(apiUrl, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      "SB-TOKEN": SB_TOKEN,
    },
  });
  if (response?.ok) {
    return await response.json();
  }
  throw new Error();
};

Create your component:

You can connect and display the response products in components you alredy have in your website or use our html carousel example:

html

<div class="carousel-wrapper">
  <div class="carousel"></div>
  <button class="prev">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M9 18L15 12L9 6" stroke="#31383F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </button>
  <button class="next">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M9 18L15 12L9 6" stroke="#31383F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </button>
</div>

Then just add the Find similar recommentations to your component:

let carousel = document.querySelector(".carousel");
const formatPrice = (prices) => {
  if (prices[1]) {
    return `<p><span>&pound; ${prices[0].toFixed(2)}</span><span class='initial-price'>&pound; ${prices[1].toFixed(2)}</span></p>`;
  }
  return `<p><span>&pound; ${prices[0].toFixed(2)}</span></p>`;
};

const addProducts = async (skuList) => {
  try {
    const data = await getProducts(skuList);
    let html = "";

    for (const product of data.products) {
      html += `
            <div class="carousel-item">
                <img src="${product.imageUrl}" alt="" />
                <p>${product.name}</p>
                ${formatPrice(product.price.values)}
              </div>`;
    }

    carousel.innerHTML += html;
  } catch (error) {
    carousel.innerHTML = "<p>Something went wrong</p>";
  }
};

document.addEventListener("DOMContentLoaded", async () => {
  carousel = document.querySelector(".carousel");

  addProducts(skuList);
});

Then add navigation and pagination to your carousel with:

let prevBtn = document.querySelector(".prev");
let nextBtn = document.querySelector(".next");
let page = 1;

prevBtn.addEventListener("click", () => {
  carousel.scrollLeft -= 1200;
});

nextBtn.addEventListener("click", async () => {
  carousel.scrollLeft += 1200;
  if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) >= -0.5) {
    page += 1;
    addProducts(skuList);
  }
});

Style you components

Finally, below is the default style for our carousel example. You can use your own classes, css variables and styles to make it match your website best.

css

<style>
  .carousel-wrapper {
    position: relative;
    padding: 0 60px;
  }

  .carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: 3px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .carousel::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .carousel-item {
    max-width: clamp(100px, 15vw, 400px);
    flex-grow: 1;
    flex-shrink: 0;
  }

  p {
    margin: 0.5em 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
  }

  img {
    width: 100%;
    object-fit: contain;
  }

  button {
    --height: 40px;
    height: var(--height);
    width: var(--height);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    position: absolute;
    margin: auto;
    top: calc(50% - calc(var(--height) / 2));
  }

  .next {
    right: 10px;
  }

  .prev {
    left: 10px;
  }

  .prev svg {
    transform: rotate(-0.5turn);
  }
  .initial-price {
    margin-left: 10px;
    text-decoration: line-through;
  }
</style>

Find Similar

# Generate API key(token):

# Query parameters

# Create your component:

# Style you components

On this page

Generate API key(token):

Query parameters

Create your component:

Style you components