Page Comparison

...

You will need an API Token (to be generated and issued by a Wizart administrator) - api_token

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

Info
Since the Wizart Web Visualizer* allows to open and visualize a specific product (SKU), please pay attention to* how this is implemented separately.

...

Code Block

language	html

<body>

...

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

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

<style>
  #wizart-fitting-room-object {
      z-index: 2147483647 !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 js-file named wizart-integration.js: 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.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
    }
  }
});

3. Shopping cart.

An example of shopping cart integration is shown in the listing above. See line 42.

Event.data format:

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

4. Optional parameters:

logo_path – link to your logo. Preferably in svg format. The logo should occupy the entire height of the image without indentation above and below.
Format: logo_path=LINK_TO_YOUR_LOGO
menu_items – additional fields in the menu.
Format: menu_items=JSON.stringify([{ title: string }])
do_not_show_info_about_app – do not show the menu item “About the application“.
Format: do_not_show_info_about_app=1
original_url – link to the page. Links for redirecting from posts in social networks.
Format: original_url=link_to_your_web_site
twitter_mention – mention your twitter account.
Format: twitter_mention=@your_twitter_mention
facebook_app_id – Account ID that is mentioned in the facebook post when sharing. The default account is Wizart. You need to register your app on https://developers.facebook.com/ and copy its ID (make sure that you clicked LIVE button to activate your app on Facebook).
back_button_background - the background of the Back button.
Format: back_button_background=#ffffff
back_button_icon_color - the icon color inside the Back button.
Format: back_button_icon_color=#ffffff
enabled_shopping_cart - If the value is 1, the shopping cart functionality will be activated. The default value is 0.
Format: enabled_shopping_cart=1
is_shown_shopping_cart_prices - If the value is 1, the prices in the shopping cart and catalog will be displayed. The default value is 0.
Формат: is_shown_shopping_cart_prices=1
shopping_cart_button_name - Text for the shopping cart redirect button. The default is “Go to shop“.
Format: shopping_cart_button_name=your_text_for_shopping_cart_button

Integration example:

Code Block

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

45. Save and move all the changes into the work environment of the client’s website.

56. Check and verify that the integration is operational.

The integration is now considered complete.

...

Versions Compared

Old Version 30

New Version 31

Key