How to Implement a Variant Selector for the ARitize 3D Buttons

Overview

If you have different variants (e.g., colours) and you want to display different 3D models, you can add a selector to switch between variants. The purpose of these instructions is to demonstrate how to dynamically create a selector for the product variants in the case that your site does not have its own selector to switch between variants. In the case that your site does have a variant selector then it is recommended to create a new on-click event to change the below Div's data-threedy-web-id and data-threedy-sku. These instructions will help your clients swap between the 3D model variants for a better user experience on your site. These instructions are intended for developers.

Solution

We will make API calls through https://quick-ar.threedy.ai/api/search to get result data. If a SKU has more than one Option Id existing in the portal, it will populate a Select option to let you choose the product with different Option Ids. Thus, if your products have different variants, you should have the same SKU with different Option Ids for those variants in the portal as in a figure below.

Code to paste:

<script>
 const clientKey = 'REPLACE_WITH_CLIENT_KEY';
 const cdnLink = 'https://cdn-quick-ar.threedy.ai';
 const qARLink = 'https://quick-ar.threedy.ai';
 const models = [{
 webId: "REPLACE_WITH_SKU",
 optionId: "REPLACE_WITH_OPTION_ID",
 insertParent: "REPLACE_WITH_PARENT_ELEMENT"
 }];
 (function (sc, d, t, u, k, s, p) {
 if (sc.QUICK_AR_INIT) return; sc['QUICK_AR_INIT'] = { key: k };
 s = d.createElement(t), p = d.getElementsByTagName('head')[0]; s.src = u;
 p.appendChild(s);
 })(window, document, 'script', cdnLink + '/latest/threedy.js', clientKey);
 (function () {

 // Appending the ARitize buttons to your HTML using JavaScript
 if (window.QUICK_BTN_INIT) return; window['QUICK_BTN_INIT'] = true;

 models.forEach(model => {
 let s = document.createElement('div'), p =
 document.querySelector(model.insertParent);
 if (!p) { return; }
 s.setAttribute('data-threedy-web-id', model.webId);
 s.setAttribute('data-threedy-sku', model.optionId);
 s.innerHTML = "<button class='threedy-3d-btn threedy-embed-btn'"
 + " style='display: none;'>View in 3D</button>"
 + "<button class='threedy-qar-btn threedy-embed-btn'"
 + " style='display: none;'>View in AR</button>";
 p.after(s);
 });
   // Fetching API data for the 3D Models based on SKU
 let myHeaders = new Headers();
 myHeaders.append("Content-Type", "application/json");
 let raw = JSON.stringify({
 "client_key": clientKey,
 "sku": models.map(el => el.webId),
 "action": "model-search"
 });
 let requestOptions = {
 method: 'POST',
 headers: myHeaders,
 body: raw,
 redirect: 'follow'
 };
 // Fetch the different model
 fetch(qARLink + "/api/search", requestOptions)
 .then(response => response.text())
 .then(result => {
 result = JSON.parse(result)
 if (!result["success"] || !result["data"]?.length || result["data"]?.length <
 2 || !Array.isArray(result["data"])) {
 return;
 }
 // Creating the Selector on the page using JavaScript
 const grouped = Object.values(result["data"].reduce((acc, item) => {
       // Append the item to the array for each SKU
 acc[item.sku] = [...(acc[item.sku] || []), item];
 return acc;
 }, {}))
 if (!grouped?.length) {
 return;
 }
 // Get the resulting variants for each unique SKU (different option ids)
 // Create a new select element and get the threedyContainer for eachSKU using the webId
 grouped.forEach((el, i) => {
 let threedyContainer = document.querySelector(`[data-threedy-web-id="${el[0].sku}"]`);
 if (!threedyContainer || el.length < 2) {
 return;
 }
 let select = document.createElement("select");
 select.setAttribute("id", "threedy-select");
 let option = document.createElement("option");
 option.innerHTML = "Select a model to View in 3D";

 option.setAttribute("selected", "selected");
 option.setAttribute("hidden", "hidden");
      select.append(option);
 el.forEach((el2, i) => {
 // Add options for each select element
 option = document.createElement("option");
 option.setAttribute("value", el2.option_id);
 option.innerHTML = el2.option_id;
 select.append(option);
      });
 threedyContainer.append(select);
 // Add an event listener to change the model
 select.addEventListener('change', function () {
 threedyContainer.setAttribute("data-threedy-sku", this.value);
 }, false);
 })
 })
 .catch(error => console.log('error', error));
 })();

</script>

IMPORTANT NOTE

1. REPLACE_WITH_CLIENT_KEY needs to be replaced with your client key. For more information, please view this document.
2. REPLACE_WITH_WEB_ID needs to be replaced with the "SKU" associated with the product.
3. REPLACE_WITH_OPTION_ID needs to be replaced with the "Option Id" associated with the product.
4. REPLACE_WITH_PARENT_NODE needs to be replaced with the class selector of the parent we want to insert after.

Live Experience

Once the tag is live, two user experiences for the 'View in AR' button differ depending on if the shopper is on a mobile or desktop device:

1. Mobile Web - when the shopper interacts with the 'View in AR' button, the experience launches via WebAR on the mobile device. Here they can see the model in their space.
2. Desktop Web - When the shopper interacts with the 'View in AR' button, a QR code is shown. If scanned with a mobile device camera it will lauch the mobile WebAR experience.