// ---------------------------------------------------- Manual Entry misalignment fix Start---------------------- document.addEventListener('LensAdvizor:component:WillMount', function(evt) { if (evt.detail.eventType == "LensAdvizor:render:manualEntryForm") { requestAnimationFrame(function() { const selects = document.querySelectorAll('.la-form-select'); selects.forEach(function(select) { select.style.removeProperty('-webkit-text-fill-color'); }); }); } }); // ---------------------------------------------------- Manual Entry misalignment fix End---------------------- // ---------------------------------------------------- Custom Tooltip for PD measurement by Chris---------------------- (() => { const PDF_URL = "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/VS-PD.pdf?v=1764723071#toolbar=0&navpanes=0&scrollbar=0"; const $ = (sel, ctx = document) => ctx.querySelector(sel); let overlay = null; const openModal = (e) => { e.preventDefault(); e.stopPropagation(); if (!overlay) return; overlay.style.display = "flex"; document.body.style.overflow = "hidden"; }; const closeModal = () => { if (!overlay) return; overlay.style.display = "none"; document.body.style.overflow = ""; }; const buildModal = () => { if (overlay) return; overlay = document.createElement("div"); overlay.className = "pd-overlay"; overlay.innerHTML = ` `; document.body.appendChild(overlay); overlay.addEventListener("click", (ev) => { if (ev.target === overlay) closeModal(); }); overlay.querySelector(".pd-close").addEventListener("click", closeModal); }; const attachInfoIcon = () => { const title = $('#la-prescription-form[data-form="manually"] .la-pd-container h6.la-flex-gap'); if (!title || title.dataset.pdInfo === "1") return; title.dataset.pdInfo = "1"; const btn = document.createElement("button"); btn.type = "button"; btn.className = "pd-i"; btn.setAttribute("aria-label", "How to measure your PD"); btn.textContent = "i"; title.appendChild(btn); buildModal(); btn.addEventListener("click", openModal); }; attachInfoIcon(); new MutationObserver(() => attachInfoIcon()).observe(document.body, { childList: true, subtree: true }); })(); // ---------------------------------------------------- Custom Tooltip for PD measurement by Chris---------------------- // ---------------------------------------------------- Require Variant Selection Start ---------------------- // Hide Select Lenses button until customer explicitly selects a color // Only active for specific Lens Flow IDs (Collection IDs) listed below // Skips products with only one variant (nothing to select) (function() { // ADD LENS FLOW IDs HERE that require variant selection before showing button const FLOWS_REQUIRING_VARIANT_SELECTION = [9555, 9701, 9632, 9678, 9700, 9470]; let userSelectedColor = false; let requireVariantSelection = false; function getCurrentFlowId() { const variantId = window.LensAdvizor?.selectedOrDefaultVariant; return window.LensAdvizor?.variants?.[variantId]?.collection_id; } function hasMultipleVariants() { const variants = window.LensAdvizor?.product?.variants || window.LensAdvizor?.variantsJSON || []; return variants.length > 1; } function checkIfFlowRequiresSelection() { // Skip if product only has one variant - nothing to select if (!hasMultipleVariants()) { return false; } const flowId = getCurrentFlowId(); return FLOWS_REQUIRING_VARIANT_SELECTION.includes(flowId); } function hideLAButton() { document.querySelectorAll('.la-select-lenses-btn').forEach(btn => { btn.style.display = 'none'; }); } function showLAButton() { document.querySelectorAll('.la-select-lenses-btn').forEach(btn => { btn.style.display = ''; }); } document.addEventListener('LensAdvizor:init:complete', function() { requireVariantSelection = checkIfFlowRequiresSelection(); if (requireVariantSelection && !userSelectedColor) { hideLAButton(); } }); document.addEventListener('LensAdvizor:variant:change', function() { // Re-check in case variant changed to a different flow requireVariantSelection = checkIfFlowRequiresSelection(); if (requireVariantSelection && !userSelectedColor) { hideLAButton(); } else if (!requireVariantSelection) { showLAButton(); } }); document.addEventListener('click', function(e) { const swatch = e.target.closest('.swatch-element, .js-swatch-element'); const colorInput = e.target.closest('input[name="color"]'); const colorLabel = e.target.closest('label[for*="color"]'); if (swatch || colorInput || colorLabel) { userSelectedColor = true; if (requireVariantSelection) { showLAButton(); } } }); document.addEventListener('change', function(e) { if (e.target.matches('input[name="color"]')) { userSelectedColor = true; if (requireVariantSelection) { showLAButton(); } } }); })(); // ---------------------------------------------------- Require Variant Selection End ---------------------- // // ---------------------------------------------------- PDF Tooltip for PD & Seg Height ---------------------- // const CONFIG = { // pd: { // url: "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/VS-PD.pdf?v=1764723071#toolbar=0&navpanes=0&scrollbar=0", // selector: ".la-pd-container h6.la-flex-gap", // label: "PD", // type: "pdf", // }, // segHeight: { // url: "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/How-Do-I-Measure-My-Progressive-Lens-Segment-Height-Myself.pdf?v=1766602137#toolbar=0&navpanes=0&scrollbar=0", // selector: ".la-seg-height-container h6, label[for*='seg'], .la-segment-height h6", // label: "Seg Height", // type: "pdf", // }, // segHeightImage: { // url: "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/Determining_segment_height.webp?v=1768675530", // selector: ".la-prescription-fields-wrapper.la-segment-height-wrapper h6.la-h6", // label: "Seg Height", // type: "image", // }, // }; // let overlay = null; // const openModal = (url, type = "pdf") => { // if (!overlay) buildModal(); // const iframe = overlay.querySelector(".pdf-frame"); // const img = overlay.querySelector(".pdf-image"); // if (type === "image") { // iframe.style.display = "none"; // img.style.display = "block"; // img.src = url; // } else { // img.style.display = "none"; // overlay.querySelector(".pdf-image").src = ""; // iframe.style.display = "block"; // iframe.src = url; // } // overlay.style.display = "flex"; // document.body.style.overflow = "hidden"; // }; // const closeModal = () => { // if (!overlay) return; // overlay.style.display = "none"; // document.body.style.overflow = ""; // overlay.querySelector(".pdf-frame").src = ""; // }; // const buildModal = () => { // if (overlay) return; // overlay = document.createElement("div"); // overlay.className = "pdf-tooltip-overlay"; // overlay.innerHTML = ` // // `; // document.body.appendChild(overlay); // overlay.addEventListener("click", (e) => { // if (e.target === overlay) closeModal(); // }); // overlay.querySelector(".pdf-tooltip-close").addEventListener("click", closeModal); // }; // const attachInfoIcon = (config, dataAttr) => { // const targets = document.querySelectorAll(config.selector); // targets.forEach((el) => { // if (el.dataset[dataAttr] === "1") return; // el.dataset[dataAttr] = "1"; // const btn = document.createElement("button"); // btn.type = "button"; // btn.className = "pdf-info-btn"; // btn.setAttribute("aria-label", `How to measure ${config.label}`); // btn.innerHTML = ''; // btn.addEventListener("click", (e) => { // e.preventDefault(); // e.stopPropagation(); // openModal(config.url, config.type || "pdf"); // }); // el.appendChild(btn); // }); // }; // const attachAll = () => { // attachInfoIcon(CONFIG.pd, "pdInfo"); // attachInfoIcon(CONFIG.segHeightImage, "segImgInfo"); // attachInfoIcon(CONFIG.segHeight, "segInfo"); // }; // document.addEventListener("LensAdvizor:component:DidMount", function (evt) { // if ( // evt.detail.eventType === "LensAdvizor:render:manualEntryForm" || // evt.detail.eventType === "LensAdvizor:render:uploadForm" || // evt.detail.eventType === "LensAdvizor:render:readingForm" // ) { // attachAll(); // } // }); // document.addEventListener("LensAdvizor:init:complete", function () { // attachAll(); // }); // if (document.readyState === "loading") { // document.addEventListener("DOMContentLoaded", attachAll); // } else { // attachAll(); // } // ---------------------------------------------------- PDF Tooltip for PD & Seg Height ---------------------- // const CONFIG = { // pd: { // url: "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/VS-PD.pdf?v=1764723071#toolbar=0&navpanes=0&scrollbar=0", // selector: ".la-pd-container h6.la-flex-gap", // label: "PD", // type: "pdf", // }, // segHeight: { // url: "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/How-Do-I-Measure-My-Progressive-Lens-Segment-Height-Myself.pdf?v=1766602137#toolbar=0&navpanes=0&scrollbar=0", // selector: ".la-prescription-fields-wrapper.la-segment-height-wrapper label[data-seg-info]", // label: "Seg Height", // type: "pdf", // }, // segHeightImage: { // url: "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/Determining_segment_height.webp?v=1768675530", // selector: ".la-prescription-fields-wrapper.la-segment-height-wrapper h6.la-h6", // label: "Seg Height", // type: "image", // }, // }; // let overlay = null; // const openModal = (url, type = "pdf") => { // if (!overlay) buildModal(); // const iframe = overlay.querySelector(".pdf-frame"); // const img = overlay.querySelector(".pdf-image"); // if (type === "image") { // iframe.style.display = "none"; // img.style.display = "block"; // img.src = url; // } else { // img.style.display = "none"; // overlay.querySelector(".pdf-image").src = ""; // iframe.style.display = "block"; // iframe.src = url; // } // overlay.style.display = "flex"; // document.body.style.overflow = "hidden"; // }; // const closeModal = () => { // if (!overlay) return; // overlay.style.display = "none"; // document.body.style.overflow = ""; // overlay.querySelector(".pdf-frame").src = ""; // overlay.querySelector(".pdf-image").src = ""; // }; // const buildModal = () => { // if (overlay) return; // overlay = document.createElement("div"); // overlay.className = "pdf-tooltip-overlay"; // overlay.innerHTML = ` // // `; // document.body.appendChild(overlay); // overlay.addEventListener("click", (e) => { // if (e.target === overlay) closeModal(); // }); // overlay.querySelector(".pdf-tooltip-close").addEventListener("click", closeModal); // }; // const attachInfoIcon = (config, dataAttr) => { // const targets = document.querySelectorAll(config.selector); // targets.forEach((el) => { // if (el.dataset[dataAttr] === "1") return; // el.dataset[dataAttr] = "1"; // const btn = document.createElement("button"); // btn.type = "button"; // btn.className = "pdf-info-btn"; // btn.setAttribute("aria-label", `How to measure ${config.label}`); // btn.innerHTML = ''; // btn.addEventListener("click", (e) => { // e.preventDefault(); // e.stopPropagation(); // openModal(config.url, config.type || "pdf"); // }); // el.appendChild(btn); // }); // }; // const attachAll = () => { // attachInfoIcon(CONFIG.pd, "pdInfo"); // attachInfoIcon(CONFIG.segHeightImage, "segImgInfo"); // attachInfoIcon(CONFIG.segHeight, "segInfo"); // }; // document.addEventListener("LensAdvizor:component:DidMount", function (evt) { // if ( // evt.detail.eventType === "LensAdvizor:render:manualEntryForm" || // evt.detail.eventType === "LensAdvizor:render:uploadForm" || // evt.detail.eventType === "LensAdvizor:render:readingForm" // ) { // attachAll(); // } // }); // document.addEventListener("LensAdvizor:init:complete", function () { // attachAll(); // }); // if (document.readyState === "loading") { // document.addEventListener("DOMContentLoaded", attachAll); // } else { // attachAll(); // } // // ---------------------------------------------------- PDF Tooltip for PD & Seg Height ---------------------- // const CONFIG = { // pd: { // url: "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/VS-PD.pdf?v=1764723071#toolbar=0&navpanes=0&scrollbar=0", // selector: ".la-pd-container h6.la-flex-gap", // label: "PD", // type: "pdf", // scope: ".la-pd-container", // }, // segHeight: { // url: "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/How-Do-I-Measure-My-Progressive-Lens-Segment-Height-Myself.pdf?v=1766602137#toolbar=0&navpanes=0&scrollbar=0", // selector: ".la-prescription-fields-wrapper.la-segment-height-wrapper label[data-seg-info]", // label: "Seg Height", // type: "pdf", // scope: ".la-prescription-fields-wrapper.la-segment-height-wrapper", // }, // segHeightImage: { // url: "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/Determining_segment_height.webp?v=1768675530", // selector: ".la-prescription-fields-wrapper.la-segment-height-wrapper h6.la-h6", // label: "Seg Height", // type: "image", // scope: ".la-prescription-fields-wrapper.la-segment-height-wrapper", // }, // }; // let overlay = null; // const openModal = (url, type = "pdf") => { // if (!overlay) buildModal(); // const iframe = overlay.querySelector(".pdf-frame"); // const img = overlay.querySelector(".pdf-image"); // if (type === "image") { // iframe.style.display = "none"; // img.style.display = "block"; // img.src = url; // } else { // img.style.display = "none"; // img.src = ""; // iframe.style.display = "block"; // iframe.src = url; // } // overlay.style.display = "flex"; // document.body.style.overflow = "hidden"; // }; // const closeModal = () => { // if (!overlay) return; // overlay.style.display = "none"; // document.body.style.overflow = ""; // overlay.querySelector(".pdf-frame").src = ""; // overlay.querySelector(".pdf-image").src = ""; // }; // const buildModal = () => { // if (overlay) return; // overlay = document.createElement("div"); // overlay.className = "pdf-tooltip-overlay"; // overlay.innerHTML = ` // // `; // document.body.appendChild(overlay); // overlay.addEventListener("click", (e) => { // if (e.target === overlay) closeModal(); // }); // overlay.querySelector(".pdf-tooltip-close").addEventListener("click", closeModal); // }; // const attachInfoIcon = (config, dataAttr) => { // const targets = document.querySelectorAll(config.selector); // targets.forEach((el) => { // if (config.scope && !el.closest(config.scope)) return; // if (el.dataset[dataAttr] === "1") return; // el.dataset[dataAttr] = "1"; // const btn = document.createElement("button"); // btn.type = "button"; // btn.className = "pdf-info-btn"; // btn.setAttribute("aria-label", `How to measure ${config.label}`); // btn.innerHTML = ''; // btn.addEventListener("click", (e) => { // e.preventDefault(); // e.stopPropagation(); // openModal(config.url, config.type || "pdf"); // }); // el.appendChild(btn); // }); // }; // const attachAll = () => { // attachInfoIcon(CONFIG.pd, "pdInfo"); // attachInfoIcon(CONFIG.segHeightImage, "segImgInfo"); // attachInfoIcon(CONFIG.segHeight, "segInfo"); // }; // document.addEventListener("LensAdvizor:component:DidMount", function (evt) { // if ( // evt.detail.eventType === "LensAdvizor:render:manualEntryForm" || // evt.detail.eventType === "LensAdvizor:render:uploadForm" || // evt.detail.eventType === "LensAdvizor:render:readingForm" // ) { // attachAll(); // } // }); // document.addEventListener("LensAdvizor:init:complete", function () { // attachAll(); // }); // if (document.readyState === "loading") { // document.addEventListener("DOMContentLoaded", attachAll); // } else { // attachAll(); // } // //# sourceURL=la_pdf_tooltip.js // ---------------------------------------------------- PDF Tooltip for PD & Seg Height ---------------------- const CONFIG = { pd: { url: "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/VS-PD.pdf?v=1764723071#toolbar=0&navpanes=0&scrollbar=0", selector: ".la-pd-container h6.la-flex-gap", label: "PD", type: "pdf", scope: ".la-pd-container", }, segHeight: { url: "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/How-Do-I-Measure-My-Progressive-Lens-Segment-Height-Myself.pdf?v=1766602137#toolbar=0&navpanes=0&scrollbar=0", selector: ".la-prescription-fields-wrapper.la-segment-height-wrapper label[data-seg-info]", label: "Seg Height", type: "pdf", scope: ".la-prescription-fields-wrapper.la-segment-height-wrapper", }, segHeightImage: { url: "https://cdn.shopify.com/s/files/1/0787/6349/1553/files/Determining_segment_height.webp?v=1768675530", selector: ".la-prescription-fields-wrapper.la-segment-height-wrapper h6.la-h6", label: "Seg Height", type: "image", scope: ".la-prescription-fields-wrapper.la-segment-height-wrapper", }, }; let overlay = null; const openModal = (url, type = "pdf") => { if (!overlay) buildModal(); const iframe = overlay.querySelector(".pdf-frame"); const img = overlay.querySelector(".pdf-image"); if (type === "image") { iframe.style.display = "none"; img.style.display = "block"; img.src = url; } else { img.style.display = "none"; img.src = ""; iframe.style.display = "block"; iframe.src = url; } overlay.style.display = "flex"; document.body.style.overflow = "hidden"; }; const closeModal = () => { if (!overlay) return; overlay.style.display = "none"; document.body.style.overflow = ""; overlay.querySelector(".pdf-frame").src = ""; overlay.querySelector(".pdf-image").src = ""; }; const buildModal = () => { if (overlay) return; overlay = document.createElement("div"); overlay.className = "pdf-tooltip-overlay"; overlay.innerHTML = ` `; document.body.appendChild(overlay); overlay.addEventListener("click", (e) => { if (e.target === overlay) closeModal(); }); overlay.querySelector(".pdf-tooltip-close").addEventListener("click", closeModal); }; const attachInfoIcon = (config, dataAttr) => { const targets = document.querySelectorAll(config.selector); targets.forEach((el) => { if (config.scope && !el.closest(config.scope)) return; if (el.dataset[dataAttr] === "1") return; el.dataset[dataAttr] = "1"; const btn = document.createElement("button"); btn.type = "button"; btn.className = "pdf-info-btn"; btn.setAttribute("aria-label", `How to measure ${config.label}`); btn.innerHTML = ''; btn.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); openModal(config.url, config.type || "pdf"); }); el.appendChild(btn); }); }; const attachAll = () => { attachInfoIcon(CONFIG.pd, "pdInfo"); attachInfoIcon(CONFIG.segHeightImage, "segImgInfo"); attachInfoIcon(CONFIG.segHeight, "segInfo"); }; document.addEventListener("LensAdvizor:component:DidMount", function (evt) { if ( evt.detail.eventType === "LensAdvizor:render:manualEntryForm" || evt.detail.eventType === "LensAdvizor:render:uploadForm" || evt.detail.eventType === "LensAdvizor:render:readingForm" ) { attachAll(); } }); document.addEventListener("LensAdvizor:init:complete", function () { attachAll(); }); if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", attachAll); } else { attachAll(); } //# sourceURL=la_extrastuff.js

Products

Wiley X Slay Sunglasses

REPLACEMENT LENSES

EYEGLASSES

Quick links

Join our mailing list