...
| 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"
>
</object>
<style>
#wizart-fitting-room-object {
z-index: 2147483646 !important;
display: none;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
#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('data', 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';
}
// articleName can be replaced with anything else if needed
function openSpecificFittingRoom (articleName) {
// query can be updated to search for necessary article
const 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') {
// return overflow of target page to initial state
document.getElementsByTagName('html')[0].style.overflow = 'auto';
document.getElementById('wizart-fitting-room-object').classList.remove('active');
}
}
}); |
...