// ============================================= // Julbo Custom Code // ============================================= // ----- Loading overlay to smooth auto-selection steps ----- function julboShowOverlay() { var modal = document.querySelector('#lensadvizor-prescription-modal .la-prescription-modal-content') if (!modal || modal.querySelector('#julbo-loading-overlay')) return modal.style.position = 'relative' var overlay = document.createElement('div') overlay.id = 'julbo-loading-overlay' overlay.innerHTML = '

Loading...' modal.appendChild(overlay) // Safety: auto-remove after 8s to prevent permanent stuck state setTimeout(function() { julboHideOverlay() }, 8000) } function julboHideOverlay() { var overlay = document.querySelector('#julbo-loading-overlay') if (!overlay) return overlay.classList.add('julbo-fade-out') setTimeout(function() { if (overlay.parentElement) overlay.parentElement.removeChild(overlay) }, 200) } // ----- Helper: Read PDP selections ----- // Collects values from all checked radio inputs on the PDP. // Used to auto-select matching options inside the LensAdvisor modal. function getJulboPdpSelections() { var values = [] document.querySelectorAll('input[type="radio"]:checked').forEach(function(inp) { values.push(inp.value.trim()) }) return values } // ----- Helper: Click first radio whose value matches any PDP value ----- function julboClickMatchingRadio(selector, pdpValues) { if (!pdpValues.length) return false var clicked = false document.querySelectorAll(selector).forEach(function(radio) { if (clicked) return var radioVal = radio.value.trim() for (var i = 0; i < pdpValues.length; i++) { if (radioVal === pdpValues[i]) { radio.click() clicked = true return } } }) return clicked } // ----- Show overlay before prescription type step renders ----- document.addEventListener('LensAdvizor:component:WillMount', function(evt) { if (evt.detail.eventType !== 'LensAdvizor:prescriptionTypes:rendered') return var pdpValues = getJulboPdpSelections() if (!pdpValues.length) return julboShowOverlay() }) // ----- Main DidMount handler for all auto-selection and form customization ----- document.addEventListener('LensAdvizor:component:DidMount', function(evt) { var step = evt.detail.eventType switch (step) { // 1. Skip Prescription Type step — auto-select matching type case 'LensAdvizor:prescriptionTypes:rendered': { var pdpValues = getJulboPdpSelections() if (!pdpValues.length) return var matchingType = (LensAdvizor.prescriptionTypes || []).find(function(pt) { return pdpValues.indexOf(pt.title.trim()) !== -1 }) if (matchingType) { LensAdvizor._onPrescriptionTypeChange({ target: { value: matchingType.id } }) } else { // Fallback: click the matching radio by label text document.querySelectorAll('.la-choose-prescription-wrapper .la-tap-select').forEach(function(radio) { var label = radio.nextElementSibling || radio.parentElement var title = label ? label.querySelector('.la-label-title') : null if (title && pdpValues.indexOf(title.textContent.trim()) !== -1) { radio.click() } }) } return } // 2. Auto-select Lens Option 1 case 'LensAdvizor:lensOption1:rendered': { var pdpValues = getJulboPdpSelections() if (!pdpValues.length) return setTimeout(function() { julboClickMatchingRadio('.la-render-options .la-tap-select', pdpValues) }, 150) return } // 3. Auto-select Lens Option 2 + filter invalid combinations case 'LensAdvizor:lensOption2:rendered': { var pdpValues = getJulboPdpSelections() var selectedOption1 = LensAdvizor.response.lensOptionsSelected['option1'] if (!selectedOption1) return // Filter to only lens types valid for the selected option1 var variants = LensAdvizor.response.lens.variants var validTypes = {} variants.forEach(function(v) { if (v.option1 === selectedOption1) { validTypes[v.option2.trim()] = true } }) document.querySelectorAll('.la-render-options .la-label-btn-wrapper').forEach(function(wrapper) { var radio = wrapper.querySelector('.la-tap-select') if (radio && !validTypes[radio.value.trim()]) { wrapper.style.display = 'none' } }) if (pdpValues.length) { setTimeout(function() { julboClickMatchingRadio('.la-render-options .la-tap-select', pdpValues) }, 150) } return } // 4. Manual entry form: hide overlay + back arrow + PD/usage fixes + expiration validation + line item properties case 'LensAdvizor:render:manualEntryForm': { julboHideOverlay() // Hide back arrow — previous steps were auto-skipped document.querySelectorAll('.la-steeper-back').forEach(function(btn) { btn.style.display = 'none' }) // Force single PD and hide the toggle row // var singlePdRadio = document.querySelector('#la-pd-field-single') // if (singlePdRadio) { // var radioRow = singlePdRadio.closest('.la-flex.la-column-gap-1-5') // if (radioRow) radioRow.style.display = 'none' // if (!singlePdRadio.checked) singlePdRadio.click() // } // Prescription Expiration: require future date setTimeout(function() { var expiryInput = document.querySelector('input[data-field="expirationDate"]') if (expiryInput) { var tomorrow = new Date() tomorrow.setDate(tomorrow.getDate() + 1) expiryInput.setAttribute('min', tomorrow.toISOString().split('T')[0]) if (!expiryInput.parentElement.querySelector('.julbo-expiry-error')) { expiryInput.insertAdjacentHTML('afterend', '') } expiryInput.addEventListener('change', function() { var errorMsg = expiryInput.parentElement.querySelector('.julbo-expiry-error') if (expiryInput.value && expiryInput.value < expiryInput.getAttribute('min')) { if (errorMsg) errorMsg.style.display = 'block' expiryInput.value = '' LensAdvizor.response.manually.provider.expirationDate = '' } else { if (errorMsg) errorMsg.style.display = 'none' } }) } }, 100) // Inject hidden la-properties inputs so Customer Name and Prescription Expiration // appear as Shopify line item properties on the order setTimeout(function() { var form = document.querySelector('#la-prescription-form') || document.querySelector('.la-prescription-wrapper') if (!form) return if (!form.querySelector('input[name="la-properties[Customer Name]"]')) { var nameInput = document.createElement('input') nameInput.type = 'hidden' nameInput.name = 'la-properties[Customer Name]' form.appendChild(nameInput) var patientField = document.querySelector('input[data-field="customerName"]') if (patientField) { nameInput.value = patientField.value || '' patientField.addEventListener('input', function() { nameInput.value = patientField.value }) } } if (!form.querySelector('input[name="la-properties[Prescription Expiration]"]')) { var expiryHidden = document.createElement('input') expiryHidden.type = 'hidden' expiryHidden.name = 'la-properties[Prescription Expiration]' form.appendChild(expiryHidden) var expiryField = document.querySelector('input[data-field="expirationDate"]') if (expiryField) { expiryHidden.value = expiryField.value || '' expiryField.addEventListener('change', function() { expiryHidden.value = expiryField.value }) } } }, 150) // Add support link below confirmation checkbox setTimeout(function() { var checkbox = document.querySelector('#la-upload-confirmation') if (!checkbox) return var wrapper = checkbox.closest('.la-prescription-fields-wrapper') if (!wrapper || wrapper.querySelector('.julbo-support-link')) return wrapper.insertAdjacentHTML('beforeend', '

' + 'Having trouble deciding? Learn more about our RX lab and processes HERE.' + '

') }, 100) return } // 5. Restore back arrow on steps after manual entry case 'LensAdvizor:lens:rendered': case 'LensAdvizor:lensOptions:rendered': case 'LensAdvizor:addOns:rendered': case 'LensAdvizor:review:rendered': { document.querySelectorAll('.la-steeper-back').forEach(function(btn) { btn.style.display = '' }) return } } }) // ----- Hide overlay on error ----- document.addEventListener('LensAdvizor:action:exception', function() { julboHideOverlay() }) // ----- Add support link on PDP near Select Lenses button ----- document.addEventListener('LensAdvizor:init:complete', function() { setTimeout(function() { document.querySelectorAll('[id="la-select-lenses-btn"]').forEach(function(btn) { var parent = btn.parentElement if (!parent || parent.querySelector('.julbo-pdp-support-link')) return parent.insertAdjacentHTML('beforeend', '

' + 'Having trouble deciding? Learn more about our RX lab and processes HERE.' + '

') }) }, 200) }) // ----- Hide Gorgias chat when LensAdvisor opens, show on close ----- document.addEventListener('LensAdvizor:selectLensModal:open', function() { var chat = document.querySelector('#gorgias-chat-container') if (chat) chat.style.display = 'none' }) document.addEventListener('LensAdvizor:selectLensModal:close', function() { var chat = document.querySelector('#gorgias-chat-container') if (chat) chat.style.display = '' }) //# sourceURL=la_julbo_custom.js

Heritage Sunglasses

SUNGLASSES

GOGGLES

ACCESSORIES

Cart

Select options