Page Comparison

...

In the source file of the target page, add the required code in the <body> tag, as shown in the listing below.

Code Block

language	html

<body>

...

<button id="wizart-spec-fitting-room-button" onClick="openSpecificFittingRoom('someVendorCode')">
  Fitting room Specific Article
</button>

<object<iframe 
  id="wizart-fitting-room-object" 
  role="dialog" 
  aria-label="Wizart Fitting Room." 
  type="text/html" 
  allowfullscreen
  >
</object>iframe>

<style>
  #wizart-fitting-room-object {
      z-index: 21474836462147483647 !important;
      display: none;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      border: none;
  }
  
  #wizart-fitting-room-object.active {
    display: block;
  }
</style>

<script src="./wizart-integration.js"></script>

</body>

...

Code Block

language	js

// todo get api token from Wizart.
const api_token = 'CLIENT_SPECIFIC_API_TOKEN';
const server_address = 'https://pim-client.wizart.techai';

// 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('datasrc', 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}`);
}

function openSpecificFittingRoom (vendorCode) {
  // query can be updated to search for necessary article
  const articleSearchQuery = '&article_query=' 
    + '{\"vendor_code\": \"' 
    + vendorCode 
    + '\"}'
  ;
    
  openFittingRoom(articleSearchQuery);
}

// 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');
    }
  }
});

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}`);
});

Versions Compared

Old Version 2

New Version Current

Key