Loading player with SKU instead of assetId

Development
1

Is it possible to load the player with a SKU instead of the Threekit assetId? I am implementing Threekit on Shopify and would like to avoid syncing ids between the two platforms.

2

You can use a Threekit Asset ID or a Threekit Catalog Item ID to initialize the player. In this case it’s common for the Shopify catalog to be sync’d to the threekit catalog.

3

This is fairly common. While you do need the Threekit assetId to initialize the Player, you can use the SKU (or any product information that resides in both Threekit & Shopify) to retrieve the assetId.

Here’s a step by step guide on how to accomplish this.

Step 0: Setup Item on Threekit

Before we begin, we must first make sure that there is a global product identifier (such as a SKU) that resides in Threekit. This information is stored in the Item’s metadata.

3338×1812 237 KB

Step 1: Query the Threekit Catalog

The first step is to query the Assets Service. This can be done directly from the browser.

This function will take a SKU and return the corresponding Threekit assetId.

async function getAssetId(SKU) {
  const url =
    "https://preview.threekit.com/api/assets" +
    `?bearer_token=${authToken}` +
    `&metadata=${JSON.stringify({ SKU })}` +
    `&orgId=${orgId}`;

  const tkProduct = await fetch(url)
    .then((res) => res.json())
    .then((data) => data.products[0]);

  return tkProduct?.id;
}

Step 2: Initialize Player

Here’s how everything comes together. We retrieve the SKU from the URL parameters, query the Threekit assets-service, and use the id to initialize the Player.

const authToken = "00000000-0000-0000-0000-000000000000";
const el = document.getElementById("player-el");
const orgId = "98b24b51-103f-4f86-8802-a791dd6f836a";

const searchParams = new URLSearchParams(window.location.search);
const sku = searchParams.get("sku");

async function getAssetId(SKU) {
  const url =
    "https://preview.threekit.com/api/assets" +
    `?bearer_token=${authToken}` +
    `&metadata=${JSON.stringify({ SKU })}` +
    `&orgId=${orgId}`;

  const tkProduct = await fetch(url)
    .then((res) => res.json())
    .then((data) => data.products[0]);

  return tkProduct?.id;
}

async function init(SKU) {
  const player = await window.threekitPlayer({
    assetId: await getAssetId(SKU),
    authToken,
    el,
  });
  window.player = player;
}

init(sku);
2 Likes
4

Thank you. This is very helpful.