Page Comparison

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

const fittingRoomObject = document.getElementById('wizart-fitting-room-object');

// 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 openFittingRoom (searchQuery) {
  const componentEndpoint = searchQuery ? fittingRoomEndpoint + searchQuery : fittingRoomEndpoint;
  fittingRoomObject.setAttribute('data', componentEndpoint);
  fittingRoomObject.classList.add('active');
  
  // should be added to avoid duplicating scrollbars
  document.getElementsByTagName('html')[0].style.overflow = 'hidden';
}

function openSpecificFittingRoom () {
  
  // can be any necessary field supported by search request
  const articleName = 'ARTICLE_NAME_TO_OPEN';
  
  // query can be updated to search for necessary article
  const articleSearchQuery = '&article_query=' 
    + '{\"name\": \"' 
    + articleName 
    + '\"}'
  ;
    
  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';

      fittingRoomObject.removeAttribute('data');
      fittingRoomObject.innerHTML = '';
      fittingRoomObject.classList.remove('active');
    }
  }
});