// ----- START Prescription Type Groups ----- document.addEventListener('LensAdvizor:prescriptionTypes:rendered', () => { const laContentWrapper = document.querySelector('.la-prescription-modal .la-choose-prescription-wrapper'); const flowMetafields = LensAdvizor?.options?.flowMetafields || []; const accordionGroups = {}; // build up your groups object flowMetafields.forEach(mf => { const match = mf.key.match(/^_ptgroup_(\d+)_(name|desc|img)$/i); if (!match) return; const [, groupID, field] = match; accordionGroups[groupID] = accordionGroups[groupID] || {}; accordionGroups[groupID][field.toLowerCase()] = mf.value; }); const targetWrapper = document.querySelector('.la-prescription-modal .la-choose-prescription-wrapper .la-label-wrapper'); Object.entries(accordionGroups).forEach(([groupID, groupData]) => { if (!groupData.name) return; // 1) create the wrapper element const accordionDiv = document.createElement('div'); accordionDiv.className = 'la-accordion-wrapper la-accordion-custom-wrapper'; accordionDiv.id = `la-custom-accordion-group-${groupID}`; accordionDiv.innerHTML = `

${groupData.img ? `

` : ''}

${groupData.name}

${groupData.desc ? `

${groupData.desc}

` : '' }

`; // 2) insert into the DOM targetWrapper.insertAdjacentElement('beforebegin', accordionDiv); // 3) grab the body *after* it’s in the DOM const accordionBody = accordionDiv.querySelector('.la-accordion-body'); // 4) move the matching prescription types into this group LensAdvizor.prescriptionTypes.forEach(pt => { const ptgroup = pt.metafields?.find(m => m.key === 'ptgroup'); if (ptgroup?.value === groupID) { // assuming pt.element is the DOM node you want to move: ptElement = document.querySelector(`#${pt.prescription_type}-${pt.id}`)?.parentElement accordionBody.appendChild(ptElement); } }); }); // 5) wire up accordion toggle const accordionHeads = document.getElementsByClassName("la-accordion-head"); Array.from(accordionHeads).forEach((accordionHead, index) => accordionHead.addEventListener("click", function (event) { let element = event.target; if (!element.classList.contains("la-label-btn")) { element = element.closest(".la-label-btn") } element.classList.toggle("active"); var accordionBody = element.nextElementSibling; var accordionBodyElements = Array.from(accordionBody.querySelectorAll('input[type="radio"], .la-label-btn .tooltip-span')); if (accordionBody.style.maxHeight) { accordionBody.style.maxHeight = null; accordionBodyElements.map((el) => el.setAttribute("disabled", true)) } else { accordionBody.style.maxHeight = accordionBody.scrollHeight + 150 + "px"; accordionBodyElements.map((el) => el.removeAttribute("disabled")) // add function to trap focus const lensAdvizorPrescriptionModal = document.querySelector("#lensadvizor-prescription-modal"); LensAdvizor.trapFocus(lensAdvizorPrescriptionModal, false); } })) }); // ----- END Prescription Type Groups ----- //# sourceURL=la_extrastuff.js

The Best Hiking Sunglasses

Join Our Newsletter