// LensAdvisor.$('.prescription-body a[href="#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

Vivarays Blog

Behind the Scenes: How Our Frames Are Made?

Let customers speak for us