///----------------------------------------------------------------------------------- /// Mack Hooyman /// 2/21/2024 /// The following is used to customize our LensAdvizor lens flows. Using LensAdvizor /// events to inject JS at specific points. See https://www.lensadvisor.com/pages/documentation ///----------------------------------------------------------------------------------- // Refresh cart drawer on 'Add to cart' event to fix issue where cart displays as empty LensAdvizor.postAddToCart = () => { setTimeout(function(){ // Dispatch the event to refresh the cart drawer document.dispatchEvent(new CustomEvent('dispatch:cart-drawer:refresh')); // Then open the cart drawer var cartDrawerTrigger = document.querySelector('.cart-link'); if (cartDrawerTrigger) { cartDrawerTrigger.click(); } }, 100); }; // This event listener is triggered when the cart is updated /* document.addEventListener('LensAdvizor:addToCart:success', function() { // Function to hide PD and Intended Use in 'Reading' cart items function hidePdInCartItems() { var cartItems = document.querySelectorAll('.line-item-property'); var curParent; cartItems.forEach(function(item, index, arr) { // Store the parent element if 'Reading' Rx type is identified if (item.textContent.includes('Reading')) { curParent = item.parentElement; } // Hide the property if it exists and the parent element is the the same to ensure // I'm identifying the correct product if the cart contains multiple if ((item.textContent.includes('PD:') || item.textContent.includes('Intended Use:')) && item.parentElement === curParent) { item.style.display = 'none'; // Hide the PD property directly } // Trim 'OS Left' and 'OD Right' values to only include SPH. These are diopter strengths if (item.textContent.includes('OS Left:') || item.textContent.includes('OD Right:')) { trim_index = item.textContent.indexOf('|'); arr[index].textContent = item.textContent.substring(0, trim_index); } }); } // Set up a MutationObserver to watch for changes in the cart drawer var observer = new MutationObserver(function(mutations, obs) { var cartItems = document.querySelectorAll('.line-item-property'); if (cartItems.length > 0) { hidePdInCartItems(); // Disconnect the observer after successful operation to avoid unnecessary overhead obs.disconnect(); } }); // Target the cart container var cartContainer = document.querySelector('.cart-drawer__content-upper'); if (cartContainer) { observer.observe(cartContainer, { childList: true, subtree: true }); } else { } }); */ // UPDATED 1/5/26: Listener for add to cart success (cart drawer display) // This enhances the existing hidePdInCartItems() function to trim "| distance" (or any appended type like "| near") document.addEventListener('LensAdvizor:addToCart:success', function() { // Function to hide PD and Intended Use in 'Reading' cart items, trim OS/OD, and now trim PD append function hidePdInCartItems() { var cartItems = document.querySelectorAll('.line-item-property'); var curParent; cartItems.forEach(function(item, index, arr) { // Store the parent element if 'Reading' Rx type is identified if (item.textContent.includes('Reading')) { curParent = item.parentElement; } // Hide the property if it exists and the parent element is the same (for Reading Rx) if ((item.textContent.includes('PD:') || item.textContent.includes('Intended Use:')) && item.parentElement === curParent) { item.style.display = 'none'; // Hide the PD/Intended Use property directly } // Trim 'OS Left' and 'OD Right' values to only include SPH (diopter strength) if (item.textContent.includes('OS Left:') || item.textContent.includes('OD Right:')) { var trim_index = item.textContent.indexOf('|'); if (trim_index !== -1) { arr[index].textContent = item.textContent.substring(0, trim_index).trim(); } } // NEW: Trim any appended PD type (e.g., "| distance" or "| near") if (item.textContent.includes('PD:')) { var parts = item.textContent.trim().split('|'); if (parts.length >= 3) { // Reconstruct without the third+ parts (e.g., "PD: Single PD | 57.00 | distance" → "PD: Single PD | 57.00") var trimmed = parts.slice(0, 2).map(function(p) { return p.trim(); }).join(' | '); item.textContent = trimmed; } } }); } // Set up a MutationObserver to watch for changes in the cart drawer var observer = new MutationObserver(function(mutations, obs) { var cartItems = document.querySelectorAll('.line-item-property'); if (cartItems.length > 0) { hidePdInCartItems(); // Disconnect the observer after successful operation to avoid unnecessary overhead obs.disconnect(); } }); // Target the cart container var cartContainer = document.querySelector('.cart-drawer__content-upper'); if (cartContainer) { observer.observe(cartContainer, { childList: true, subtree: true }); } }); // This event listener is triggered at the 'Choose Lens Index' screen for SV, Bifocal, and Progressive. 'Choose Lens Group' screen for Reading // Triggered again at the screen immediately after document.addEventListener('LensAdvizor:lens:rendered', function(e){ if(e.detail.method == 'renderLensGroup'){ // Select the h3 element (screen title) by ID var titleElement = document.getElementById('la_prescriptionSelect_title'); // Check if the element exists and its text content is 'Choose Lens Group'. Change title to 'Choose Lens Index' for non-reading Rx types if (titleElement && titleElement.textContent.trim() === 'Choose Lens Group' && LensAdvizor.response.selectedPrescriptionType.title != "Reading" && LensAdvizor.response.selectedPrescriptionType.title != "Non Prescription") { titleElement.textContent = 'Choose Lens Index'; } // Select the wrapper element to display 'Index Comparison' popup link below var wrapperElement = document.querySelector('.la-choose-prescription-wrapper'); if (wrapperElement && LensAdvizor.response.selectedPrescriptionType.title != "Reading" && LensAdvizor.response.selectedPrescriptionType.title != "Non Prescription") { // Add link for popup var linkHtml = 'Index Comparison'; wrapperElement.insertAdjacentHTML("afterend", linkHtml); // Define the popup HTML var popupHtml = ''; document.body.insertAdjacentHTML('beforeend', popupHtml); // Add click event listener for the link document.getElementById('indexComparisonLink').addEventListener('click', function(event) { event.preventDefault(); document.getElementById('indexPopup').style.display = 'block'; }); // Add click event listener for closing the popup document.getElementById('closePopupButton').addEventListener('click', function() { document.getElementById('indexPopup').style.display = 'none'; }); } } }); // This event listener is triggered at the 'Choose Lens Index' screen for SV, Bifocal, and Progressive. 'Choose Lens Group' screen for Reading // Triggered again at the screen immediately after document.addEventListener('LensAdvizor:lens:rendered', function(e){ var priceValue; var priceLabel = document.querySelector('.la-label-price'); if (priceLabel) { priceValue = document.querySelector('.la-label-price').innerText; } // Change 'FREE' to '$0.00' if (priceValue && priceValue.trim().toUpperCase() === 'FREE') { priceLabel.innerText = '$0.00'; } }); // This event listener is triggered at the 'Select coating' screen. Not triggered for 'Reading' Rx type // Used to display 'Compare Coatings' link and popup document.addEventListener('LensAdvizor:lensOptions:rendered', function() { // Don't display compare coatings popup link if a sun lens is selected if (LensAdvizor.response.lens.name == 'Polarized Sun Lens') { return; } // Define the link HTML let linkHtml = '

'; // Insert the link into the HTML document.querySelector('.la-option-container').insertAdjacentHTML('afterend', linkHtml); // Define the popup HTML let popupHtml = ''; document.body.insertAdjacentHTML('beforeend', popupHtml); // Add the overlay div let overlayHtml = '

'; document.body.insertAdjacentHTML('beforeend', overlayHtml); // Modify event listeners document.getElementById('imagePopupLink').addEventListener('click', function(event){ event.preventDefault(); document.getElementById('imagePopup').style.display = 'block'; document.querySelector('.overlay').style.display = 'block'; }); document.getElementById('close-button').addEventListener('click', function() { document.getElementById('imagePopup').style.display = 'none'; document.querySelector('.overlay').style.display = 'none'; }); document.querySelector('.overlay').addEventListener('click', function() { document.getElementById('imagePopup').style.display = 'none'; this.style.display = 'none'; }); // Find all elements with the class 'la-label-title' var labelTitles = document.querySelectorAll('.la-label-title'); // To avoid 'Select coating' screen from being skipped when only 1 option is available // I added a second coating option called 'Hidden Option'. This shouldn't be displayed to the user, so I hide it if it exists // Iterate through each found element labelTitles.forEach(function(labelTitle) { // Check if the text content matches 'Hidden Option' if (labelTitle.textContent.trim() === 'Hidden Option') { // Hide the parent element var parentElement = labelTitle.closest('.la-label-btn-wrapper'); if (parentElement) { parentElement.style.display = 'none'; } } }); // Display 'FREE' as '$0.00' var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === 'childList' || mutation.type === 'characterData') { var priceLabels = document.querySelectorAll('.la-frame-price'); priceLabels.forEach(function(priceLabel) { if (priceLabel.textContent.trim() === 'FREE') { priceLabel.textContent = '$0.00'; } }); } }); }); var config = { childList: true, subtree: true, characterData: true }; observer.observe(document.body, config); }); // This event listener is triggered at the 'Enter Your Prescription' or 'Enter Your Magnification Strength' screen depending on Rx type document.addEventListener('LensAdvizor:render:manualEntryForm', function(){ // Check if Rx type is 'Reading'. Both Reading & SV use SV Rx type, so use 'selectedPrescriptionType.title' if (LensAdvizor.response.selectedPrescriptionType.title == "Reading") { // Hide back button var elementToHide = document.querySelector('.la-steeper-back'); if (elementToHide) { elementToHide.style.visibility = 'hidden'; } // Change page title var titleElement = document.getElementById('la_prescriptionSelect_title'); if (titleElement) { titleElement.innerText = 'Enter Your Magnification Strength'; } // Get all input field labels var labelList = document.querySelectorAll('label.la-form-helper-label'); // Using SPH as diopter strength. This loop changes 'SPH' labels to 'Magnification' and hides all others for (i=0; i

Intended Use

Near Vision Distance Vision

`; // Find the first 'la-h6' element that displays 'OD (Right Eye)' and insert the 'Intended Use' HTML before it var firstField = document.querySelector(".la-h6"); if (firstField) { firstField.insertAdjacentHTML("beforebegin", intendedUseHtml); } else { // Fallback: Insert at the beginning of the prescription form if the h6 element is not found document.querySelector("#la-prescription-form").insertAdjacentHTML("afterbegin", intendedUseHtml); } // Listen for changes to capture the selection and update LensAdvizor.customLensProperties // KVP added to LensAdvizor.customLensProperties display as line items on the order document.querySelectorAll('[name=intendedUse]').forEach(function(radio) { radio.addEventListener('change', function() { LensAdvizor.customLensProperties['Intended Use'] = this.value; }); }); } }); /* // This event listener is triggered at the 'Review Your Order' screen document.addEventListener('LensAdvizor:review:rendered', function() { // Select all elements that might contain the 'PD' information var laLabelDescriptions = document.querySelectorAll('.la-label-description'); var isReading = false; laLabelDescriptions.forEach(function(descriptionDiv) { // Check if the element's content contains 'Prescription Type : Reading' if (descriptionDiv.textContent.includes('Prescription Type : Reading')) { isReading = true; return; } if (isReading) { // Split the content by '
' to work with each line separately var lines = descriptionDiv.innerHTML.split('
'); // Trim 'OS Left' and 'OD Right' values to only include SPH. These are diopter strengths for(i=0; i'); return; } }); }); */ // UPDATED 1/5/26: Listener for Review Your Order screen // This enhances the existing logic to trim "| distance" (or any appended type) from PD while keeping PD visible for non-Reading Rx document.addEventListener('LensAdvizor:review:rendered', function() { // Select all elements that might contain the prescription information var laLabelDescriptions = document.querySelectorAll('.la-label-description'); var isReading = false; laLabelDescriptions.forEach(function(descriptionDiv) { // Check if the element's content contains 'Prescription Type : Reading' if (descriptionDiv.textContent.includes('Prescription Type : Reading')) { isReading = true; } if (isReading) { // Existing Reading Rx logic: trim OS/OD and hide PD + Intended Use var lines = descriptionDiv.innerHTML.split('
'); // Trim 'OS Left' and 'OD Right' values to only include SPH for (var i = 0; i < lines.length; i++) { if (lines[i].includes('OS Left:') || lines[i].includes('OD Right:')) { var trim_index = lines[i].indexOf('|'); if (trim_index !== -1) { lines[i] = lines[i].substring(0, trim_index).trim(); } } } // Filter out PD and Intended Use lines entirely for Reading var newLines = lines.filter(function(line) { return !(line.includes('PD:') || line.includes('Intended Use:')); }); descriptionDiv.innerHTML = newLines.join('
'); return; // Skip further processing for Reading block } // NEW/UPDATED: For non-Reading Rx, trim appended PD type but keep PD visible var lines = descriptionDiv.innerHTML.split('
'); for (var i = 0; i < lines.length; i++) { // Trim OS/OD if needed (your original code didn't do this for non-Reading, but adding for consistency) if (lines[i].includes('OS Left:') || lines[i].includes('OD Right:')) { var trim_index = lines[i].indexOf('|'); if (trim_index !== -1) { lines[i] = lines[i].substring(0, trim_index).trim(); } } // Trim any appended PD type (e.g., "| distance" or "| near") if (lines[i].includes('PD:')) { var parts = lines[i].trim().split('|'); if (parts.length >= 3) { // Reconstruct without the third+ parts var trimmed = parts.slice(0, 2).map(function(p) { return p.trim(); }).join(' | '); lines[i] = trimmed; } } } descriptionDiv.innerHTML = lines.join('
'); }); }); // This event listener is triggered at the 'Custom Engraving' and 'Engraving Text' screen document.addEventListener('LensAdvizor:addOns:rendered', function(e) { // Display input field for engraving text var engravingInputExists = document.getElementById('custom-engraving-text'); if (!engravingInputExists) { var inputField = document.createElement('input'); inputField.type = 'text'; inputField.id = 'custom-engraving-text'; inputField.placeholder = 'Enter your engraving text'; inputField.required = true; // Make the field required // Append the input field to the engraving option container var engravingOption = document.querySelector('.la-engraving-44768253837535'); if (engravingOption) { engravingOption.appendChild(inputField); } // Add event listener to capture input value inputField.addEventListener('input', function() { // Store the input value for later use. Here we're just logging it. console.log('Engraving Text:', this.value); LensAdvizor.customLensProperties['Engraving Text'] = this.value; }); } // Handle 'No Thanks' option click var noThanksOption = document.querySelector('.la-skip-add-on'); if (noThanksOption) { noThanksOption.removeAttribute('href'); // Remove the href attribute noThanksOption.style.cursor = 'pointer'; // Make it look clickable } noThanksOption.addEventListener('click', function() { // Logic to handle 'No Thanks' option // For navigating away or cleanup, if necessary }); });

Your cart is empty

Subtotal: $0.00