Page Comparison

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

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

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

{
  eventName: 'wizart_shopping_cart',
  payload: [
    { 
      article: Article,
      quantity: number, 
    },
  ],
}

const fittingRoomEndpoint = server_address
  + '/fitting-room'
  + '?api_token=' + api_token
  + '&bba=true'
  + '&logo_path=LINK_TO_YOUR_LOGO'
  + '&menu_items=' + JSON.stringify([])
  + '&do_not_show_info_about_app=0'
  + '&twitter_mention=@your_twitter_mention'
  + '&original_url=LINK_TO_YOUR_WEB_SITE'
  + '&facebook_app_id=facebook_app_id'
  + '&back_button_background=#ffffff'
  + '&back_button_icon_color=#ffffff'
  + '&enabled_shopping_cart=1'
  + '&is_shown_shopping_cart_prices=1'
  + '&shopping_cart_button_name=your_text_for_shopping_cart_button'
;