Content Comparison

...

Описание

Wizart Web Visualizer представляет собой виртуальную примерочную как назависимое веб-приложение, которое внедряется в веб-сайт клиента, и служит для предоставления возможности производить наложение образцов отделочных материалов на фото предразмеченных заранее интерьеров и на фото личных интерьеров пользователей. Отображает информацию из PIM-системы(см.ниже) либо из базы данных клиента.

Пример приложения без интеграции: https://demo.wizart.tech

Пример e-commerce с интеграцией: https://store.wizart.tech

PIM-система (Product Information Management System)

представляет собой серверное приложение, хранящее в структурированном виде детальную информацию о продуктах и их текстуры, необходимые для произведения наложения в продуктах визуализации Wizart.

PIM Admin Tool (https://pim-admin.wizart.tech/login)

web-система администрирования, позволяющая клиенту возможность оперативно управлять данными, доступными для него в PIM системе и данными, отображающимися в продуктах визуализации Wizart. Клиент при помощи данного инструмента может проводить загрузку необходимых ему текстур в PIM систему и использовать их в приложениях визуализации Wizart. Для каждого клиента используется своя собственная Admin Tool.

Интеграция Wizart Web

Последовательность действий

Получение доступа к PIM Admin Tool (генерируется и выдается администратором Wizart) и API Token
Импорт необходимых данных в PIM через PIM Admin Tool (User manual for PIM admin , File upload requirements )
Встраивание приложения Wizart Web в сайт клиента
Тестирование интеграции
Публикация

Требование к специалистам

Начальные знания веб-верстки и разработки:

HTML
JavaScript
CSS

Требование к системе

Никаких специфических требований нет. Приложение может быть встроено на любой соверменный веб-сайт.

Примеры возможных мест интеграции

Стили и элементы, открывающие Wizart Web Visualizer могут быть любыми на усмотрение клиента.

Ниже приведены некоторые примеры возможного расположения элементов.

Главное меню:

...

Страница списка продуктов:

...

Страница продукта:

...

Встраивание приложения Wizart Web Visualizer в сайт клиента

Вам потребуется API Token (генерируется и выдается администратором Wizart) - api_token

...

Basic integration example:

В исходном файле необходимой страницы добавьте требуемый код в теге <body>, как указано в листинге ниже.

Info
Поскольку в Wizart Web Visualizer предусмотрена возможность открытия и визуализации с конкретным продуктом (SKU), уделите пожалуйста внимание тому, как это дополнительно реализовано.

Note
Для корректного отображения Wizart Web Visualizer свойство CSS z-index для тега с id `wizart-fitting-room-object` должно быть больше чем z-index у всех остальных всплывающих окон на сайте.

Code Block

language	html

<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 
  <iframe 
  id="wizart-fitting-room-object" 
  role="dialog" 
  aria-label="Wizart Fitting Room." 
  type="text/html"
  allowfullscreen 
 class="active" >
</object>iframe>

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

<script>
  <script src="./wizart-integration.js"></script>

</body>

2. Используя следующий листинг ниже, создайте js-файл с именем wizart-integration.js: и загрузите его к существующим исходным файлам клиентского веб-приложения.

Code Block

language	js

// todo get api token from Wizart.
  letconst api_token = 'CLIENT_SPECIFIC_API_TOKEN';
  letconst 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
  letconst fittingRoomEndpoint = server_address
 
  + '/fitting-room'
 
  + '?api_token=' + api_token  
   + '?&bba=true'

 ;

  function openFittingRoom (searchQuery) {
  const componentEndpoint if= (searchQuery) {
 searchQuery ? fittingRoomEndpoint + searchQuery : fittingRoomEndpoint;
  
  let componentEndpointfittingRoomObject = fittingRoomEndpoint + searchQuerydocument.getElementById('wizart-fitting-room-object');
  const fittingRoomObjectContainer = fittingRoomObject.parentElement;

   } else {
       let componentEndpoint = fittingRoomEndpoint;
    }
    fittingRoomObject.setAttribute('data', componentEndpoint);
    fittingRoomObjectfittingRoomObject.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
function openSpecificFittingRoom document.getElementsByTagName('html') {
    [0].style.overflow = 'hidden';
}

// canbba beevent any- necessaryfired fieldwhen supportedback bybutton searchis requestclicked at wizart component
 let articleName = 'ARTICLE_NAME_TO_OPEN';
    window.addEventListener('message', function (event) {
  if (~event.origin.indexOf(server_address)) {
    // query can be updated to search for necessary articleexactly 'close_overlay' as it's sent from wizart component
    if let articleSearchQuery (event.data === '&articleclose_query=overlay') {
      + '{\"name\": \"' // return overflow of target page to initial state
      + articleName document.getElementsByTagName('html')[0].style.overflow = 'auto';

     + '\"}'document.getElementById('wizart-fitting-room-object').classList.remove('active');
    ;}
    
    if  openFittingRoom(articleSearchQuery);(event.data && event.data.eventName === 'wizart_shopping_cart') {
  }    // 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>here you can process the data that comes from the shopping cart after clicking go_to_shop
    }
  }
});

3. Корзина покупок.

Пример интеграции корзины покупок указан в листинге выше. Смотри строку 42.

Формат event.data:

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

4. Опциональные параметры:

logo_path – ссылка на ваш логотип. Предпочтительно в формате svg. Логотип должен занимать всю высоту картинки без отступов сверху и снизу.
Формат: logo_path=LINK_TO_YOUR_LOGO
menu_items – дополнительные поля в меню.
Формат: menu_items=JSON.stringify([{ title: string }])
do_not_show_info_about_app – не показывать пункт меню “О приложении“.
Формат: do_not_show_info_about_app=1
original_url – ссылка на страницу. Служит для перенаправления из постов в социальных сетях. По умолчанию wizart.tech.
Формат: original_url=link_to_your_web_site
twitter_mention – mention вашего twitter аккаунта.
Формат: twitter_mention=@your_twitter_mention
facebook_app_id – Идентификатор аккаунта который упоминается в посте facebook при шаринге. Аккаунт по умолчанию - Wizart. Вам необходимо зарегистрировать своё приложение на странице https://developers.facebook.com/ и затем скопировать ID приложения (убедитесь, что вы нажали кнопку активации приложения в Facebook)
back_button_background - фон кнопки Назад.
Формат: back_button_background=#ffffff
back_button_icon_color - цвет иконки внутри кнопки Назад.
Формат: back_button_icon_color=#ffffff
enabled_shopping_cart - Если передано значение 1 функциональность корзины покупок будет активирована. Значение по умолчанию 0.
Формат: enabled_shopping_cart=1
is_shown_shopping_cart_prices - Если передано значение 1 цены в корзине покупок и каталоге будут отображаться. Значение по умолчанию 0.
Формат: is_shown_shopping_cart_prices=1
shopping_cart_button_name - Текст для кнопки перенаправления корзины покупок. По умолчанию “Go to shop“.
Формат: shopping_cart_button_name=your_text_for_shopping_cart_button

Пример интеграции:

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'
  + '&enabled_shopping_cart=1'
  + '&is_shown_shopping_cart_prices=1'
  + '&shopping_cart_button_name=your_text_for_shopping_cart_button'
;

5. Сохраните и перенесите все изменения в рабочее окружении клиентского сайта.

6. Проверьте работоспособность интеграции.

Интеграция считается завершенной.

В случае возникновения дополнительных вопросов и проблем, пожалуйста обратитесь в техническую поддержку Wizart: developer@wizart.tech

Version	Old Version 2	New Version Current
Changes made by	Ilya Stasiukevich	Pavel Batashov
Saved on	2020-01-16	2020-06-29

Versions Compared

Key

Описание

Интеграция Wizart Web

Последовательность действий

Требование к специалистам

Требование к системе

Примеры возможных мест интеграции

Встраивание приложения Wizart Web Visualizer в сайт клиента