...
Встраивание приложения Wizart Web Visualizer в сайт клиента
Вам потребуется API Token (генерируется и выдается администратором Wizart) - api_token
В исходном файле необходимой страницы добавьте требуемый код в теге
<body>, как указано в листинге ниже.
Поскольку в Wizart Web Visualizer предусмотрена возможность открытия и визуализации с конкретным продуктом (SKU), уделите пожалуйста внимание тому, как это дополнительно реализовано. Данная функциональность опционально и реализуется при желании клиента.
| Code Block | ||
|---|---|---|
| ||
<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 src="/wizart-integration.js"></script>
</body> |
2. Используя следующий листинг ниже, создайте js-файл с именем wizart-integration.js: и загрузите его к существующим исходным файлам клиентского веб-приложения.
| Code Block | ||
|---|---|---|
| ||
// 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', componentEndpoint);
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');
}
}
}); |
3. Сохраните и перенесите все изменения в рабочем рабочее окружении клиентского сайта.
4. Проверьте работоспособность интеграции.
...
В случае возникновения дополнительных вопросов и проюблемпроблем, пожалуйста обратитесь пожалуйста в техническую поддержку Wizart: developer@wizart.tech