...
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}`); }); |
...