// Image mappings for prescription options const IMAGE_MAPPING = { 'la-canUploadPrescription': 'https://cdn.shopify.com/s/files/1/0904/4993/6685/files/Upload.png?v=1737583250', 'la-canEnterPrescriptionManually': 'https://cdn.shopify.com/s/files/1/0904/4993/6685/files/Prescription.png?v=1737583250', 'la-canEmailPrescription': 'https://cdn.shopify.com/s/files/1/0904/4993/6685/files/Email.png?v=1737583250', 'la-canUsePrescriptionOnFile': 'https://cdn.shopify.com/s/files/1/0904/4993/6685/files/Existing_Glasses.png?v=1737583250' }; const LOGO_CONFIG = { src: '//lensrefresh.co/cdn/shop/files/Logo_Website_c9c49408-ed70-4290-8df2-1afa1dde3947.png?v=1736351493&width=600', alt: 'Lens Refresh', srcset: '//lensrefresh.co/cdn/shop/files/Logo_Website_c9c49408-ed70-4290-8df2-1afa1dde3947.png?v=1736351493&width=300 300w, //lensrefresh.co/cdn/shop/files/Logo_Website_c9c49408-ed70-4290-8df2-1afa1dde3947.png?v=1736351493&width=450 450w, //lensrefresh.co/cdn/shop/files/Logo_Website_c9c49408-ed70-4290-8df2-1afa1dde3947.png?v=1736351493&width=600 600w' }; const METHOD_MAP = { email_later: 'Email Later', uploaded: 'Uploaded', entered_manually: 'Manual Entry', prescription_on_file: 'Prescription On File' }; const BACK_IMG = 'https://cdn.shopify.com/s/files/1/0904/4993/6685/files/Back.png?v=1738167568'; const CLOSE_IMG = 'https://cdn.shopify.com/s/files/1/0904/4993/6685/files/Close.png?v=1738167568'; const IMAGE_CONFIG = { backButton: { selector: '.la-steeper-back img', src: BACK_IMG, styles: { width: '30px', height: 'auto' } }, closeButton: { selector: '.la-prescription-modal-close img', src: CLOSE_IMG, styles: { width: '30px', height: 'auto' } } }; // Add logo to modal function addLogoToModal() { const modal = document.querySelector('#lensadvizor-prescription-modal'); if (!modal || modal.querySelector('.header__heading-logo')) return; const img = document.createElement('img'); Object.assign(img, { ...LOGO_CONFIG, width: 300, height: 40.8, loading: 'eager', className: 'header__heading-logo motion-reduce', sizes: '(max-width: 600px) 50vw, 300px' }); Object.assign(img.style, { position: 'static', background: '#fff', margin: '5px auto', display: 'block' }); modal.insertBefore(img, modal.firstChild); } // Get current step from step bar function getCurrentStep() { const stepBar = document.querySelector('.la-step-bar'); if (!stepBar) return null; const activeStep = Array.from(stepBar.querySelectorAll('.la-step-item')) .findIndex(step => step.classList.contains('is-active')); return activeStep !== -1 ? activeStep + 1 : null; } // Replace SVG images with PNG versions function replaceSVGWithPNG() { const wrapper = document.querySelector('.la-label-wrapper'); if (!wrapper) return; Object.entries(IMAGE_MAPPING).forEach(([className, pngUrl]) => { const labelImage = document.querySelector(`.${className} .la-label-image`); if (!labelImage) return; const existingImg = labelImage.querySelector('img'); if (existingImg?.src === pngUrl) return; labelImage.innerHTML = ''; const img = document.createElement('img'); Object.assign(img, { src: pngUrl, alt: className.replace('la-', '').split(/(?=[A-Z])/).join(' '), style: 'width: 120px; height: auto' }); labelImage.appendChild(img); }); } // Display prescription summary function displayPrescriptionSummary(prescriptionData) { const modalContent = document.querySelector('.la-prescription-modal-content'); const header = document.querySelector('.la-prescription-modal-header'); if (!modalContent || !header) return; if (window.innerWidth < 768) return; modalContent.querySelector('.selected-options-summary')?.remove(); const colorValue = LensAdvizor?.customOptions?.['Front Colour'] || LensAdvizor?.customOptions?.Colour; const hasColor = !!colorValue; // Determine if color exists // Calculate dynamic steps for Coating/Finishing/Method const coatingStep = hasColor ? 6 : 5; const finishingStep = coatingStep + 1; const methodStep = finishingStep + 1; const currentStep = getCurrentStep(); const stepMap = [ { label: 'Prescription Type', value: prescriptionData?.selectedPrescriptionType?.title, step: 2 }, { label: 'Lens Group', value: prescriptionData?.lens?.group_title, step: 3 }, { label: 'Lens Name', value: prescriptionData?.lens?.name, step: 3 }, { label: 'Colour', value: colorValue, step: 4 }, { label: 'Thickness Index', value: prescriptionData?.lensOptionsSelected?.option1, step: hasColor ? 5 : 4 // Dynamic thickness step }, { label: 'Coating', value: prescriptionData?.lensOptionsSelected?.option2, step: coatingStep // Dynamic coating step }, { label: 'Finishing', value: prescriptionData?.lensOptionsSelected?.option3, step: finishingStep // Dynamic finishing step }, { label: 'Method', value: prescriptionData?.method ? METHOD_MAP[prescriptionData.method] : null, step: methodStep // Dynamic method step } ]; // Filter items that have values and are within current step const summaryData = stepMap.filter(item => item.value && currentStep >= item.step ); if (summaryData.length === 0) return; const summary = document.createElement('div'); summary.className = 'selected-options-summary'; summary.style.cssText = 'margin: 12px 0; padding: 8px 12px; background: #f8f9fa; border-radius: 6px; font-size: 14px;'; summary.innerHTML = summaryData .map((item, index) => ` ${index > 0 ? '▶' : ''} ${item.value} `) .join(''); header.insertAdjacentElement('afterend', summary); } function getColorTooltipValues(selectedColor) { // Find color option using either name variation const colorOption = LensAdvizor.response.lens?.raw_options?.find( opt => opt.name === 'Front Colour' || opt.name === 'Colour' ); // Find matching color value (case-insensitive match) const colorValue = colorOption?.values?.find( val => val.name.toLowerCase() === selectedColor?.toLowerCase() ); // Return cleaned array of tooltip values return colorValue?.tooltipContent ?.split(',') ?.map(v => v.trim()) || []; } function handleThicknessOptionsBasedOnColor() { const currentStep = getCurrentStep(); if (currentStep !== 4) return; // Get selected color and tooltip values const selectedColor = LensAdvizor?.customOptions?.['Front Colour'] || LensAdvizor?.customOptions?.Colour; const tooltipValues = getColorTooltipValues(selectedColor); if(!tooltipValues.length) return; // CORRECTED: Keep 2 decimal places with trailing zeros const allowedIndices = tooltipValues.map(v => parseFloat(v).toFixed(2) ); // Find all thickness options const optionsContainer = document.querySelector('.la-prescription-wrapper.la-option-container'); if (!optionsContainer) return; optionsContainer.querySelectorAll('.la-label-title').forEach(titleElement => { const optionText = titleElement.textContent; const thicknessValue = optionText.match(/(\d+\.\d+)/)?.[1]; const parentLabel = titleElement.closest('.la-label-btn'); const parentWrapper = titleElement.closest('.la-label-btn-wrapper'); const inputElement = parentWrapper.querySelector('input'); const priceElement = parentWrapper.querySelector('.la-label-price'); // CORRECTED: Compare formatted values directly if (!thicknessValue || !allowedIndices.includes(thicknessValue)) { parentLabel?.classList.add('disabled'); if (inputElement) { inputElement.disabled = true; inputElement.checked = false; } if (priceElement) { priceElement.textContent = "Not available in selected colour"; } } else { parentLabel?.classList.remove('disabled'); if (inputElement) inputElement.disabled = false; } }); } function addThicknessVisualization() { if (getCurrentStep() !== 3) return; const lensData = [ { value: '1.50' }, { value: '1.59' }, { value: '1.67' }, { value: '1.74' } ]; document.querySelectorAll('.la-label-btn-wrapper').forEach(wrapper => { const contentBox = wrapper.querySelector('.la-label-content-box'); const colorName = wrapper.querySelector('.la-label-title')?.textContent?.trim(); if (!contentBox || !colorName || wrapper.querySelector('.la-label-content-images')) return; const allowedValues = getColorTooltipValues(colorName); if(!allowedValues.length) return; const tickIconSize = 12; // SVG icon size in pixels const crossIconSize = 10; // SVG icon size in pixels const visualizationHTML = `

${lensData.map(lens => { const isAllowed = allowedValues.some(v => parseFloat(v) === parseFloat(lens.value)); return `

${isAllowed ? `

` : `

${lens.value}

`; }).join('')}

`; contentBox.insertAdjacentHTML('afterend', visualizationHTML); }); } function updateImageElement(config) { const element = document.querySelector(config.selector); if (!element) return; element.src = config.src; Object.assign(element.style, config.styles); } function replaceButtonImages() { Object.values(IMAGE_CONFIG).forEach(updateImageElement); } // Main update function function updatePrescriptionUI() { addLogoToModal(); replaceButtonImages(); const currentStep = getCurrentStep(); const currentStepTitle = document.querySelector("#la_prescriptionSelect_title")?.innerText.toLowerCase().replace(/\s+/g, '-'); const element = document.querySelector('.la-prescription-modal-wrapper'); if (element && currentStepTitle) { // Remove previous step class if it exists and is different if (lastStepClass && lastStepClass !== currentStepTitle) { element.classList.remove(lastStepClass); } // Add new step class if not already present if (!element.classList.contains(currentStepTitle)) { element.classList.add(currentStepTitle); } // Update the last step class tracker lastStepClass = currentStepTitle; } if (currentStep !== null) { displayPrescriptionSummary(LensAdvizor.response); } if (currentStep >= 6) { replaceSVGWithPNG(); } handleThicknessOptionsBasedOnColor() addThicknessVisualization() // Check if the screen width matches mobile devices (max-width: 768px) if (window.matchMedia('(max-width: 768px)').matches) { // Function to apply the mobile-specific classes const applyMobileClasses = (grid) => { grid.classList.add('grid--1-col-tablet-down'); if (grid.classList.contains('grid--2-col-tablet-down')) { grid.classList.remove('grid--2-col-tablet-down'); } }; // Check immediately if the grid exists in the DOM const grid = document.querySelector('.product-grid.contains-card.contains-card--product'); if (grid) { applyMobileClasses(grid); } else { // Set up a MutationObserver to watch for when the grid is added const observer = new MutationObserver((mutations, obs) => { const grid = document.querySelector('.product-grid.contains-card.contains-card--product'); if (grid) { applyMobileClasses(grid); // Stop observing once the grid is found and processed obs.disconnect(); } }); // Start observing the document body and its descendants observer.observe(document.body, { childList: true, subtree: true }); } } } let lastStepClass = null; setInterval(updatePrescriptionUI, 100);

Coloré

2 produits

Trier par :

Couleurs Dailies®

Couleurs Air Optix®

Restez connecté