Page Comparison

When you need to fetch one and only article to preset it in fitting room you’ll need to update your integration.

Integrating the Wizart Web Visualizer application into a client’s website

You will need an API Token (to be generated and issued by a Wizart administrator) - api_tokenBellow you can find information how the Wizart Web Visualizer allows to open and visualize a specific product (SKU).

Info
Please read Wizart Web Visualizer: integration article before.

someVendorCode - unique code or identifier that is related to specific product and exists in The PIM (Product Information Management) system.

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

...

Since the Wizart Web Visualizer allows to open and visualize a specific product (SKU), please pay attention to how this is implemented separately. This functionality is optional and provided on demand.

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>

2. Using the listing below, create a update js-file named wizart-integration.js: . If you don’t have such file create and upload it to the existing source files of the client’s web application.

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 1

New Version Current

Key

Integrating the Wizart Web Visualizer application into a client’s website