Page Comparison

// TODO get api token from Wizart and set the value
const api_token = 'CLIENT_SPECIFIC_API_TOKEN';

// please do not change the server address
const server_address = 'https://pim-client.wizart.ai';

// bba (back button action) param is used to add back button to wizart component
const fittingRoomEndpoint = server_address
  + '/fitting-room'
  + '?api_token=' + api_token 
  + '&bba=true'
;

function wid() {
  let currentID = localStorage.getItem("w_uuid");
  if (!currentID) {
    function s4() {
      return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
    }
    currentID = `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
    localStorage.setItem("w_uuid", currentID);
  }
  return currentID;
}

function openFittingRoom (searchQuery) {
  const componentEndpoint = searchQuery ? fittingRoomEndpoint + searchQuery : fittingRoomEndpoint;
  let fittingRoomObject = document.getElementById('wizart-fitting-room-object');
  const fittingRoomObjectContainer = fittingRoomObject.parentElement;
  fittingRoomObject.setAttribute('src', componentEndpoint);

  // object clonning is necessary as some browsers does not render "object" twice after changing data attribute
  const clonnedFittingRoomObject = fittingRoomObject.cloneNode(true);
  fittingRoomObjectContainer.appendChild(clonnedFittingRoomObject);
  fittingRoomObject.remove();
  clonnedFittingRoomObject.classList.add('active'); 

  // should be added to avoid duplicating scrollbars
  document.getElementsByTagName('html')[0].style.overflow = 'hidden';
  const queryParams = new URLSearchParams({
    v: 1,
    ds: "web",
    t: "event",
    tid: "UA-121898981-9",
    ec: "spi_entry_button",
    ea: "pressed",
    uid: wid(),
    dr: window?.location?.origin || "",
    z: Date.now(),
    cd1: !!searchQuery,
  }).toString();
  fetch(`https://www.google-analytics.com/collect?${queryParams}`);
}

// bba event - fired when back button is clicked at wizart component
window.addEventListener('message', function (event) {
  if (~event.origin.indexOf(server_address)) {
    // exactly 'close_overlay' as it's sent from wizart component
    if (event.data === 'close_overlay') {
      // return overflow of target page to initial state
      document.getElementsByTagName('html')[0].style.overflow = 'auto';
      document.getElementById('wizart-fitting-room-object').classList.remove('active');
    }    

    if (event.data && event.data.eventName === 'wizart_shopping_cart') {
      // here you can process the data that comes from the shopping cart after clicking go_to_shop
    }
  }
});

document.addEventListener("DOMContentLoaded", () => {
  const buttons = document.querySelectorAll("#wizart-fitting-room-object");
  const queryParams = new URLSearchParams({
    v: 1,
    ds: "web",
    t: "event",
    tid: "UA-121898981-9",
    ec: "spi_entry_button",
    ea: "shown",
    uid: wid(),
    dr: window?.location?.origin || "",
    z: Date.now(),
    cd2: buttons.length > 1,
  }).toString();
  fetch(`https://www.google-analytics.com/collect?${queryParams}`);
});

Event.data format:
{
  eventName: 'wizart_shopping_cart',
  payload: [
    { 
      vendor_code: string,
      quantity: number, 
    },
  ],
}