if (typeof relativePosition === "undefined") { var relativePosition = "on_image"; } if (typeof imagePosition === "undefined") { var imagePosition = "bottom_right"; } function extractSkuAndStatus(items) { const itemHavingGlamarCustomField = items.find(item => item.slug === 'glamarmeta')?.value; let status = false; let glam_ar_sku = null; if (itemHavingGlamarCustomField) { const glam_ar_sku_data = itemHavingGlamarCustomField.find(item => item['glam_ar_sku_data'])?.['glamar_sku_data']; if (glam_ar_sku_data) { glam_ar_sku = glam_ar_sku_data.find(item => item.key === 'glam_ar_sku')?.value; status = glam_ar_sku_data.find(item => item.key === 'glam_ar_status')?.value; } } window.glam_ar_sku = glam_ar_sku; return {status: status.toString(), glam_ar_sku}; } setTimeout(() => { const companyId = window?.FPI?.state?.product?.selectedArticle?._data?.seller?.uid; const appId = window?.FPI?.state?.global?.appFeature?._data?.feature?.app; const productId = window?.FPI?.state?.product?._data?.product?.uid; const url = window.location.protocol + "//" + window.location.hostname + "/ext/glamar/binding/v1/company/" + companyId + "/application/" + appId + "/custom-fields/" + productId; if (companyId && appId && productId) { const response = await fetch(url,{ headers: { 'Content-Type': 'application/json', 'x-company-id': companyId, 'x-application-id': appId } }); const res = await response.json(); const {status, glam_ar_sku} = extractSkuAndStatus(res.items); if (status == "true" && glam_ar_sku) { // add try on button const tryOnButton = document.createElement('button'); // Optionally, add some styles or classes to the button tryOnButton.innerHTML = ` Virtual Try-On`; tryOnButton.style.padding = '10px 20px'; tryOnButton.style.fontSize = '14px'; tryOnButton.style.cursor = 'pointer'; tryOnButton.style.background = "#DA0E640A"; tryOnButton.style.borderRadius = "10px"; tryOnButton.style.padding = "8px"; tryOnButton.style.fontSize = "16px"; tryOnButton.style.cursor = "pointer"; tryOnButton.style.border = "1px solid #DA0E64"; tryOnButton.style.color = "#E65E97"; tryOnButton.style.display = "flex"; tryOnButton.style.alignItems = "center"; // Set location for this button // Inside image div let container; if(relativePosition == "on_image"){ container = document.getElementsByClassName('image-item')[0]; tryOnButton.style.position = "inherit"; if(imagePosition == "bottom_center"){ // Center tryOnButton.style.bottom = "20px"; tryOnButton.style.left = "50%"; tryOnButton.style.transform = "translateX(-50%)"; } else if(imagePosition == "bottom_left"){ // Bottom left tryOnButton.style.left = "20px"; tryOnButton.style.bottom = "20px"; } else if(imagePosition == "bottom_right"){ // Bottom right tryOnButton.style.right = "20px"; tryOnButton.style.bottom = "20px"; } else if(imagePosition == "top_left"){ // Top right tryOnButton.style.left = "20px"; tryOnButton.style.top = "20px"; } } else if(relativePosition == "side_image"){ container = document.getElementById('container__frame_wrapper'); } container.appendChild(tryOnButton); // Set event for on click tryOnButton.addEventListener('click', loadGlamAR); } } }, "3000"); if (typeof loadGlamAR === "undefined") { var loadGlamAR = null; } // using an Immediately Invoked Function Expression (IIFE) (() => { function showModal() { let modal = document.getElementById('glamARModal'); // Check if the modal already exists if (!modal) { // Create the modal container if it doesn't exist modal = document.createElement('div'); modal.style.position = 'fixed'; modal.style.top = '0'; modal.style.left = '0'; modal.style.width = '100%'; modal.style.height = '100%'; modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; modal.style.display = 'flex'; modal.style.justifyContent = 'center'; modal.style.alignItems = 'center'; modal.style.zIndex = '1000'; // Ensure it's above other content modal.style.flexDirection = 'column'; modal.id = 'glamARModal'; // Create the content div inside the modal const modalContent = document.createElement('div'); modalContent.style.backgroundColor = '#fff'; modalContent.style.borderRadius = '12px'; modalContent.style.margin = '40px'; modalContent.style.borderRadius = '12px'; const headingDiv = document.createElement('div'); headingDiv.style.fontSize = "20px"; headingDiv.style.padding = "20px 20px 0 20px"; headingDiv.style.backgroundColor = '#fff'; headingDiv.style.borderRadius = "12px"; const headingDisplayDiv = document.createElement("div"); headingDisplayDiv.style.display = "flex"; headingDisplayDiv.style.flexDirection = "row"; headingDisplayDiv.style.alignItems = "center"; headingDisplayDiv.innerHTML = `

Choose a Try-on Mode

` // Create the close button const closeButton = document.createElement('button'); closeButton.innerText = 'X'; closeButton.style.display = "flex"; closeButton.style.alignItems = "center"; closeButton.style.justifyContent = "center"; closeButton.style.height = "32px"; closeButton.style.width = "32px"; closeButton.style.backgroundColor = "#10111210"; closeButton.style.borderRadius = "50%"; closeButton.style.fontFamily = "Arial, sans-serif"; closeButton.style.border = "none"; closeButton.style.cursor = "pointer"; headingDisplayDiv.appendChild(closeButton); const tryOnContainer = document.createElement('div'); tryOnContainer.style.padding = '20px'; tryOnContainer.id = "GlamarTryOnDiv"; headingDiv.appendChild(headingDisplayDiv); modalContent.appendChild(headingDiv); modalContent.appendChild(tryOnContainer); modal.appendChild(modalContent); // Append the modal to the body document.body.appendChild(modal); // Event listener for the close button closeButton.addEventListener('click', hideModal); } // Function to show the modal const showModal = () => { modal.style.display = 'flex'; }; return showModal; } const removeSdkIframe = () => { const sdkDiv = document.getElementById('GlamarTryOnDiv'); return new Promise((res) => { if (sdkDiv) { sdkDiv.innerHTML = ""; res(); } else { res(); // Resolve even if the div doesn't exist to avoid blocking } }); }; const hideModal = () => { removeSdkIframe().then(()=> { let modal = document.getElementById('glamARModal'); modal.style.display = 'none'; }) }; loadGlamAR = () => { // Show the modal when this function is called const showModalFunction = showModal(); // Create the modal and get the function to show it showModalFunction(); // Show the modal removeSdkIframe().then(() => { let overrides = { platform: 'web', }; window.GlamAR.init( 'GlamarTryOnDiv', "c466f1ed-059d-42e5-abcb-4a041d3f1e71", // this will get replaced with actual access key overrides ); document.getElementById('GlamarTryOnDiv').style.height = "80vh"; document.getElementById('GlamarTryOnDiv').style.width = "50vw"; window?.GlamAR?.addEventListener('closed', hideModal); window?.GlamAR?.addEventListener('loaded', () => { const sku = window.glam_ar_sku; if (sku) { window.GlamAR.applyBySku(sku); console.log("apply called"); } else { console.error("SKU not found or glam_ar_sku key is missing."); } }); }); }; })()

FILTERS

Contact Lens

Vision Express

Eyexpert Natural Daily (30 Lenses)

Vision Express

Eyexpert Silk Monthly (3 Lenses)

Vision Express

Eyexpert Wave Monthly (3 Lenses)

Vision Express

Eyexpert Dynamic Monthly (3 Lenses)