Versions Compared

Version Old Version 1 New Version 2
Changes made by

Ilya Stasiukevich

Ilya Stasiukevich

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Basic integration example:

Code Block
languagehtml
<body>

...

<button id="wizart-fitting-room-button" onClick="openFittingRoom">
  Fitting room
</button>

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

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

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

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

  let fittingRoomObject = document.getElementById('wizart-fitting-room-object');
  // bba (back button action) param is used to add back button to wizart component
  let fittingRoomEndpoint = server_address
    + '/fitting-room'
    + '?api_token=' + api_token 
    + '?bba=true'
  ;

  function openFittingRoom (searchQuery) {
    if (searchQuery) {
       let componentEndpoint = fittingRoomEndpoint + searchQuery;
    } else {
       let componentEndpoint = fittingRoomEndpoint;
    }
    fittingRoomObject.setAttribute('data', fittingRoomEndpointcomponentEndpoint);
    fittingRoomObject.classList.add('active');
  }
  
  function openSpecificFittingRoom () {
    // can be any necessary field supported by search request
    let articleName = 'ARTICLE_NAME_TO_OPEN';
    
    // query can be updated to search for necessary article
    let 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') {
        fittingRoomObject.removeAttribute('data');
        fittingRoomObject.innerHTML = '';
        fittingRoomObject.classList.remove('active');
      }
    }
  });
</script>

</body>

...