#review_selection"]').on('shown.bs.tab', function (e) { // if (LensAdvisor.advisor.responses.method === "email_later") { // LensAdvisor.$('#la_review_orderNotes_label').before('

Please send your prescription to support@vivarays.com with your order number

') // } // }) document.addEventListener('LensAdvizor:review:rendered', function(){ if (LensAdvizor.response.method == "email_later") { insertHTML = `

Please send your prescription to support@vivarays.com with your order number

` document.querySelector('.la-order-notes-wrapper').insertAdjacentHTML("afterend", insertHTML) } }) // Watch for variant change on a timer for some stores that prevent us from watching the form change events // LensAdvizor.watchVariantChange = function () { // this.variantInterval = setInterval(function () { // LensAdvizor.productForms.forEach(form => this.formVariantUpdate.call(form)) // }.bind(this)) // } // document.addEventListener("LensAdvizor:init:complete", LensAdvizor.watchVariantChange.bind(LensAdvizor)) // document.addEventListener('LensAdvizor:render:submissionMethods', function(){ // document.querySelector('.la-prescription-wrapper').insertAdjacentHTML('beforeend',` //

// // }) // // HIDE THE CHAT pop-up overlay // document.addEventListener('LensAdvizor:selectLensModal:open', function () { // document.querySelector('.rp-messenger-trigger').style.display = 'none' // setTimeout(function() { // document.querySelector('.rp-messenger-trigger').style.display = 'none' // }, 1500); // }) // document.addEventListener('LensAdvizor:selectLensModal:close', function () { // document.querySelector('.rp-messenger-trigger').style.display = 'flex' // }) // ------------------------------------------------Add custom notes below prescription options start----------------------------------- // Add custom notes below prescription options - dynamic metadata filtering document.addEventListener('LensAdvizor:render:submissionMethods', function(){ if (document.querySelector('.la-custom-prescription-notes') || !document.querySelector('.la-canUploadPrescription')) return; // Filter LensFlowNote metadata and exclude empty values let Insmf = LensAdvizor.response.selectedPrescriptionType.metafields.filter((mf) => mf.key.includes("_LensFlowNote") && mf.value && mf.value.trim() !== '' ); // Sort by numerical order Insmf.sort((a, b) => { const getNumber = (key) => parseInt(key.replace('_LensFlowNote', '')) || 0; return getNumber(a.key) - getNumber(b.key); }); // Generate list items for each note const instructionItems = Insmf.map(note => `

${note.value}

` ).join(''); // Only show notes if we have LensFlowNotes if (instructionItems) { const notesHTML = `

${instructionItems}

`; document.querySelector('.la-label-wrapper')?.insertAdjacentHTML('afterend', notesHTML); } }); // Add custom notes below lens selection - dynamic prescription type detection document.addEventListener('LensAdvizor:lens:rendered', function(){ if (document.querySelector('.la-custom-prescription-notes') || !document.querySelector('.la-lensgroup-wrapper')) return; // Check if current prescription type is reading-related (by name or title) const prescriptionType = LensAdvizor.response.selectedPrescriptionType; const isReadingType = prescriptionType.name === 'reading' || prescriptionType.title.toLowerCase().includes('reading') || prescriptionType.title.toLowerCase().includes('reader'); if (!isReadingType) return; // Filter LensFlowNote metadata and exclude empty values let Insmf = prescriptionType.metafields.filter((mf) => mf.key.includes("_LensFlowNote") && mf.value && mf.value.trim() !== '' ); // Sort by numerical order Insmf.sort((a, b) => { const getNumber = (key) => parseInt(key.replace('_LensFlowNote', '')) || 0; return getNumber(a.key) - getNumber(b.key); }); // Generate list items for each note const instructionItems = Insmf.map(note => `
${note.value}
` ).join(''); // Only show notes if we have LensFlowNotes if (instructionItems) { const notesHTML = `

${instructionItems}

`; document.querySelector('.la-lensgroup-wrapper')?.insertAdjacentHTML('afterend', notesHTML); } }); // Add custom notes below reading form - multiple approaches for better targeting document.addEventListener('LensAdvizor:render:readingForm', function(){ if (document.querySelector('.la-custom-prescription-notes')) return; // Try multiple selectors for the reading form const readingForm = document.querySelector('.la-reading-form') || document.querySelector('[data-form="reading"]') || document.querySelector('form[id="la-prescription-form"]'); if (!readingForm) return; // Check prescription type only (removed collection restriction) const prescriptionType = LensAdvizor.response.selectedPrescriptionType; const isReadingType = prescriptionType.name === 'reading' || prescriptionType.title.toLowerCase().includes('reading') || prescriptionType.title.toLowerCase().includes('reader'); if (!isReadingType) return; // Filter LensFlowNote metadata and exclude empty values let Insmf = prescriptionType.metafields.filter((mf) => mf.key.includes("_LensFlowNote") && mf.value && mf.value.trim() !== '' ); // Sort by numerical order Insmf.sort((a, b) => { const getNumber = (key) => parseInt(key.replace('_LensFlowNote', '')) || 0; return getNumber(a.key) - getNumber(b.key); }); // Generate list items for each note const instructionItems = Insmf.map(note => `
${note.value}
` ).join(''); // Only show notes if we have LensFlowNotes if (instructionItems) { const notesHTML = `

${instructionItems}

`; // Try different insertion methods if (readingForm.insertAdjacentHTML) { readingForm.insertAdjacentHTML('afterend', notesHTML); } else { // Fallback: insert after prescription fields wrapper const fieldsWrapper = document.querySelector('.la-prescription-fields-wrapper'); if (fieldsWrapper) { fieldsWrapper.insertAdjacentHTML('afterend', notesHTML); } } } }); // Additional fallback - try with manual entry form event as well document.addEventListener('LensAdvizor:render:manualEntryForm', function(){ // Only for reading forms (removed collection restriction) if (document.querySelector('.la-custom-prescription-notes') || !document.querySelector('.la-reading-form')) return; const prescriptionType = LensAdvizor.response.selectedPrescriptionType; const isReadingType = prescriptionType.name === 'reading' || prescriptionType.title.toLowerCase().includes('reading') || prescriptionType.title.toLowerCase().includes('reader'); if (!isReadingType) return; // Filter and process metadata same as above let Insmf = prescriptionType.metafields.filter((mf) => mf.key.includes("_LensFlowNote") && mf.value && mf.value.trim() !== '' ); Insmf.sort((a, b) => { const getNumber = (key) => parseInt(key.replace('_LensFlowNote', '')) || 0; return getNumber(a.key) - getNumber(b.key); }); const instructionItems = Insmf.map(note => `
${note.value}
` ).join(''); if (instructionItems) { const notesHTML = `

${instructionItems}

`; document.querySelector('.la-reading-form')?.insertAdjacentHTML('afterend', notesHTML); } }); // ------------------------------------------------Add custom notes below prescription options Stop----------------------------------- //------------------------------------------------Add PD Instruction start------------------------------ // Get metafield values from Flow metafields LensAdvizor.getMetafieldInstructions = function() { const flowMetafields = LensAdvizor.options.flowMetafields || []; const metafields = {}; flowMetafields.forEach(field => { metafields[field.key] = field.value; }); const linkColor = metafields._link_color || '#e4721c'; const steps = []; let stepNumber = 1; while (metafields[`_step_${stepNumber}`]) { const stepText = metafields[`_step_${stepNumber}`]; if (stepText && stepText.trim()) { const stepLinks = []; let linkNumber = 1; // Collect all links for this step while (metafields[`_step_${stepNumber}_link${linkNumber}`]) { const link = metafields[`_step_${stepNumber}_link${linkNumber}`]; if (link && link.trim()) { stepLinks.push(link.trim()); } linkNumber++; } steps.push({ text: stepText.trim(), links: stepLinks }); } stepNumber++; } return { title: metafields._pd_title || '', steps: steps, footer: metafields._pd_footer || '', linkColor: linkColor }; }; // Process text and replace app names with links LensAdvizor.processStepText = function(text, links, color) { let processedText = text; if (links && links.length > 0) { let linkIndex = 0; // Replace GlassesOn first if (processedText.includes('GlassesOn') && linkIndex < links.length) { processedText = processedText.replace(/GlassesOn/g, `GlassesOn`); linkIndex++; } // Replace EyeMeasure second if (processedText.includes('EyeMeasure') && linkIndex < links.length) { processedText = processedText.replace(/EyeMeasure/g, `EyeMeasure`); linkIndex++; } } return processedText; }; // Generate instructions HTML LensAdvizor.generatePDInstructions = function() { const content = LensAdvizor.getMetafieldInstructions(); let html = `
`; if (content.title) { html += `
${content.title}
`; } content.steps.forEach((step, index) => { const processedText = LensAdvizor.processStepText(step.text, step.links, content.linkColor); html += `
${index + 1}. ${processedText}
`; }); if (content.footer) { html += `
${content.footer}
`; } html += `
`; return html; }; // Force update function LensAdvizor.updatePDInstructions = function() { const existingInstructions = document.querySelector('.la-pd-instructions'); if (existingInstructions) { const newHTML = LensAdvizor.generatePDInstructions(); existingInstructions.outerHTML = newHTML; } }; // Add instructions for Upload Form document.addEventListener('LensAdvizor:render:uploadForm', function(){ if (!document.querySelector('.la-pd-instructions')) { const instructionsHTML = LensAdvizor.generatePDInstructions(); const container = document.querySelector("#la-pd-fields-container"); if (container) { container.insertAdjacentHTML("afterend", instructionsHTML); } } }); // Add instructions for Manual Entry Form document.addEventListener('LensAdvizor:render:manualEntryForm', function(){ if (!document.querySelector('.la-pd-instructions')) { const instructionsHTML = LensAdvizor.generatePDInstructions(); const container = document.querySelector("#la-pd-fields-container"); if (container) { container.insertAdjacentHTML("afterend", instructionsHTML); } } }); //------------------------------------------------Add PD Instruction end------------------------------ //------------------------------------------- Lens selection start------------------------------ //Using IIFE to fire up the function when the page is loaded (() => { const SCOPE_SEL = '.la-choose-prescription-wrapper.la-render-lenses'; const CARD_SEL = '.la-label-btn-wrapper'; const RADIO_SEL = 'input[type="radio"]'; const TITLE_SEL = '.la-label-title'; const POSSIBLE_SELECTED_CLASSES = ['la-active', 'selected', 'active', 'is-selected', 'is-active']; const getScope = () => document.querySelector(SCOPE_SEL) || document; // We only enforce the user's selection after they manually pick something let userChosenValue = null; const addSelectedClass = (el, on) => { if (!el) return; POSSIBLE_SELECTED_CLASSES.forEach(cls => { try { el.classList.toggle(cls, on); } catch {} try { el.querySelector('label')?.classList.toggle(cls, on); } catch {} }); try { el.setAttribute('aria-checked', on ? 'true' : 'false'); } catch {} }; const radiosInGroup = (radio) => { if (!radio?.name) return []; return Array.from(document.querySelectorAll(`${RADIO_SEL}[name="${CSS.escape(radio.name)}"]`)); }; const syncGroupClasses = (radio) => { if (!radio?.name) return; const group = radiosInGroup(radio); group.forEach(r => addSelectedClass(r.closest(CARD_SEL), r.checked)); }; // Make the whole card act like a proper radio selection and fix broken label/for const wireCard = (card, index) => { if (!card || card.__wired) return; const input = card.querySelector(RADIO_SEL); const label = card.querySelector('label'); // Build a stable id for the input and link the label if (input) { const newId = `la-lens-${input.name || 'group'}-${input.value || index}-${index}`; input.id = newId; if (label) label.setAttribute('for', newId); } // Make the entire card clickable (avoid double triggers if click originates on native controls) card.addEventListener('click', (e) => { if (!input) return; const blocker = e.target.closest('input, button, a, select, textarea'); if (blocker) return; input.click(); // Let native behavior + site listeners run }); // Keyboard accessibility: Space/Enter if (!card.hasAttribute('tabindex')) card.setAttribute('tabindex', '0'); card.addEventListener('keydown', (e) => { if (!input) return; if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); input.click(); } }); card.__wired = true; }; const wireAll = () => { const scope = getScope(); const cards = Array.from(scope.querySelectorAll(CARD_SEL)); cards.forEach((c, i) => wireCard(c, i)); // Sync classes with any already-checked radio (if any) const checked = scope.querySelector(`${RADIO_SEL}:checked`); if (checked) syncGroupClasses(checked); }; // Track manual user choice and keep classes in sync const onChange = (e) => { const radio = e.target; if (!(radio instanceof HTMLInputElement) || radio.type !== 'radio') return; // Remember user's explicit choice userChosenValue = radio.value; syncGroupClasses(radio); }; // If a render resets selection, re-apply only if the user already picked something earlier const reapplyUserChoiceIfReset = () => { if (!userChosenValue) return; const scope = getScope(); const chosen = scope.querySelector(`${RADIO_SEL}[value="${userChosenValue}"]`); if (chosen && !chosen.checked) { chosen.click(); // Respect site listeners } }; // Handle LensAdvizor render/mount events – no MutationObserver, only events const onLensUIRendered = () => { wireAll(); reapplyUserChoiceIfReset(); }; // Global change listener (capture) to catch radio changes even if nodes are replaced getScope().addEventListener('change', onChange, true); document.addEventListener('change', onChange, true); // LensAdvizor lifecycle hooks document.addEventListener('LensAdvizor:init:complete', onLensUIRendered); document.addEventListener('LensAdvizor:selectLensModal:open', onLensUIRendered); document.addEventListener('LensAdvizor:lens:rendered', (e) => { // e.detail.method can be 'renderLenses' or 'renderLensGroup' onLensUIRendered(); }); document.addEventListener('LensAdvizor:lensOptions:rendered', onLensUIRendered); document.addEventListener('LensAdvizor:lensOption1:rendered', onLensUIRendered); document.addEventListener('LensAdvizor:lensOption2:rendered', onLensUIRendered); document.addEventListener('LensAdvizor:lensOption3:rendered', onLensUIRendered); document.addEventListener('LensAdvizor:variant:change', onLensUIRendered); document.addEventListener('LensAdvizor:lensVariant:change', onLensUIRendered); // New-style component mount events document.addEventListener('LensAdvizor:component:DidMount', (evt) => { const t = evt?.detail?.eventType || ''; // Re-wire when lens steps/options mount if ( t === 'LensAdvizor:lens:rendered' || t === 'LensAdvizor:lensOptions:rendered' || t === 'LensAdvizor:lensOption1:rendered' || t === 'LensAdvizor:lensOption2:rendered' || t === 'LensAdvizor:lensOption3:rendered' || t === 'LensAdvizor:selectLensModal:open' ) { onLensUIRendered(); } }); // Initial pass in case the UI is already present when injected wireAll(); })(); //----------------------------------------- Lens selection end //# sourceURL=la_extrastuff.js

Lens	What it filters	Brightness
Day	The Day lens balances the harmful spike at 455nm, which causes eye strain and allow the beneficial blue (470–495nm range) that drives alertness.	Dims 1.2x
Sunset	Blocks blue and green to 530nm, 1500K bonfire glow	Dims 4x
TrueNight	Blocks 100% of blue and green light to 570nm, 1000K	Dims 10x

Let customers speak for us