Loading player with SKU instead of assetId

Warwick_Haynes
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.

Comments

4 comments

  • Comment author
    Warwick_Haynes

    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.

    0
  • Comment author
    Matthew Seeger

    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.

    0
  • Comment author
    Phil

    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.

    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);
    
    0
  • Comment author
    Warwick_Haynes

    Thank you. This is very helpful.

    0

Please sign in to leave a comment.