...
| Code Block | ||
|---|---|---|
| ||
<body>
...
<button id="wizart-fitting-room-button" onClick="openFittingRoom()">
Fitting room
</button>
<iframe
id="wizart-fitting-room-object"
name="wizartFittingRoom"
role="dialog"
aria-label="Wizart Fitting Room."
type="text/html"
allow="web-share"
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> |
wizart-integration.js:
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 | ||
|---|---|---|
| ||
// TODO get api token from Wizart and set the value
const api_token = 'CLIENT_SPECIFIC_API_TOKEN';
// please do not change the server address
const server_address = 'https://pim-client.wizart.ai';
// 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 wid() {
let currentID = localStorage.getItem("w_uuid");
if (!currentID) {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
currentID = `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
localStorage.setItem("w_uuid", currentID);
}
return currentID;
}
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';
const queryParams = new URLSearchParams({
v: 1,
ds: "web",
t: "event",
tid: "UA-121898981-9",
ec: "spi_entry_button",
ea: "pressed",
uid: wid(),
dr: window?.location?.origin || "",
z: Date.now(),
cd1: !!searchQuery,
}).toString();
fetch(`https://www.google-analytics.com/collect?${queryParams}`);
}
// 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
}
}
});
document.addEventListener("DOMContentLoaded", () => {
const buttons = document.querySelectorAll("#wizart-fitting-room-object");
const queryParams = new URLSearchParams({
v: 1,
ds: "web",
t: "event",
tid: "UA-121898981-9",
ec: "spi_entry_button",
ea: "shown",
uid: wid(),
dr: window?.location?.origin || "",
z: Date.now(),
cd2: buttons.length > 1,
}).toString();
fetch(`https://www.google-analytics.com/collect?${queryParams}`);
}); |
Shopping cart.
An example of shopping cart integration is shown in the listing above. Please check line 64.
| Code Block |
|---|
Event.data format:
{
eventName: 'wizart_shopping_cart',
payload: [
{
vendor_code: string,
quantity: number,
},
],
}
|
Optional parameters:
Visualizer configuration:https://pim-admin.wizart.ai/configuration/web
Parameter | Type | Description |
|---|---|---|
user_id | string | User identifier or Device identifier. Format: user_id=string. |
context | string | Format: context=string Here you can find out more about the context. |
custom_shopping_cart_link | string | This parameter takes precedence over the setting in the PIM configuration. Format: custom_shopping_cart_link=https://www.wizart.ai/ |
locale | array | Need to indicate in which language product’s should be displayed. |
room_uuid | string | The room with the selected uuid will be opened |
deactivate_custom_photo | bool 1/0 | For deactivating uploading photo. |
...