...
| Code Block | ||
|---|---|---|
| ||
<body> ... <button id="wizart-fitting-room-button" onClick="openFittingRoom()"> Fitting room </button> <object<iframe id="wizart-fitting-room-object" role="dialog" aria-label="Wizart Fitting Room." type="text/html" allowfullscreen > </object>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); display: none; } #wizart-fitting-room-object.active { display: block; } </style> <script src="./wizart-integration.js"></script> </body> |
...
| Code Block | ||
|---|---|---|
| ||
// 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('datasrc', 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');
}
}
}); |
...