Wizart Web Visualizer: интеграция

Owned by Ilya Stasiukevich (Deactivated)
Last updated: 29-06-2020 by Pavel Batashov (Deactivated)
5 min read

Описание

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

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

  1. Получение доступа к PIM Admin Tool (генерируется и выдается администратором Wizart) и API Token

  2. Импорт необходимых данных в PIM через PIM Admin Tool (PIM User Manualarchived , (OUTDATED) File Upload Requirementsarchived )

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

  4. Тестирование интеграции

  5. Публикация

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


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

  • HTML

  • JavaScript

  • CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

<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. Используя следующий листинг ниже, создайте js-файл с именем wizart-integration.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. Корзина покупок.

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

Формат event.data:

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

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

  1. logo_path – ссылка на ваш логотип. Предпочтительно в формате svg. Логотип должен занимать всю высоту картинки без отступов сверху и снизу.
    Формат: logo_path=LINK_TO_YOUR_LOGO

  2. menu_items – дополнительные поля в меню.
    Формат: menu_items=JSON.stringify([{ title: string }])

  3. do_not_show_info_about_app – не показывать пункт меню “О приложении“.
    Формат: do_not_show_info_about_app=1

  4. original_url – ссылка на страницу. Служит для перенаправления из постов в социальных сетях. По умолчанию wizart.tech.
    Формат: original_url=link_to_your_web_site

  5. twitter_mention – mention вашего twitter аккаунта.
    Формат: twitter_mention=@your_twitter_mention

  6. facebook_app_id – Идентификатор аккаунта который упоминается в посте facebook при шаринге. Аккаунт по умолчанию - Wizart. Вам необходимо зарегистрировать своё приложение на странице https://developers.facebook.com/ и затем скопировать ID приложения (убедитесь, что вы нажали кнопку активации приложения в Facebook)

  7. back_button_background - фон кнопки Назад.
    Формат: back_button_background=#ffffff

  8. back_button_icon_color - цвет иконки внутри кнопки Назад.
    Формат: back_button_icon_color=#ffffff

  9. enabled_shopping_cart - Если передано значение 1 функциональность корзины покупок будет активирована. Значение по умолчанию 0.
    Формат: enabled_shopping_cart=1

  10. is_shown_shopping_cart_prices - Если передано значение 1 цены в корзине покупок и каталоге будут отображаться. Значение по умолчанию 0.
    Формат: is_shown_shopping_cart_prices=1

  11. shopping_cart_button_name - Текст для кнопки перенаправления корзины покупок. По умолчанию “Go to shop“.
    Формат: shopping_cart_button_name=your_text_for_shopping_cart_button

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

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

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

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

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