// ============================================= // 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) // Rx Validation: trigger setup from the reliable existing DidMount handler if (typeof julboSetupRxValidation === 'function') { setTimeout(julboSetupRxValidation, 250) } 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 = '' }) // ============================================= // Julbo Rx Validation — Per-Frame Prescription Limits // ============================================= // Reads rxValidation from prescriptionConfig (via product metafield lensadvisor.options). // Reorders PD first, disables invalid dropdown options, blocks submission on invalid combos. // All functions prefixed with julboRx to avoid global namespace collisions. // // Validation model (asymmetric, signed, matches French RX lab rules): // 1. MPD → which pdRange applies (5 ranges per frame). // 2. pdRange defines allowed SPH range (sphMin, sphMax). // 3. Governing total-power constraint: // positiveLimit = rules.totalPowerLimit (e.g. 6.00 unifocal, 7.50 progressive) // negativeLimit = rules.totalPowerLimitNegative (e.g. 6.00 for BOTH unifocal and progressive) // (falls back to 6.00 for progressive / totalPowerLimit for unifocal if unset) // // -negativeLimit ≤ SPH + CYL + ADD ≤ +positiveLimit // // For progressives, the positive side gets +1.5 of extra headroom (7.50 vs 6.00) to // accommodate the ADD contribution. The negative side is the same as the unifocal // distance-power limit (6.00) — ADD cannot push the lens below -6.00 total power. // // Rearranging for the CYL bounds (both sides clamp to the frame-level maxCyl): // CYL_max = min(frameMaxCyl, positiveLimit - SPH - ADD) // CYL_min = max(-frameMaxCyl, -negativeLimit - SPH - ADD) // // And for ADD (progressive only): // ADD_max = min(frameMaxAdd, positiveLimit - SPH - CYL) // // For unifocal (ADD = 0, positiveLimit = negativeLimit = 6.0) this reduces to the // symmetric rule SPH + CYL ∈ [-6, +6]. // ============================================= var julboRxErrorMsg = 'This frame is not available with the prescription entered'; var julboRxPdMsg = 'Please enter your PD to continue'; var julboRxObserver = null; var julboRxPending = false; function julboRxGetRules() { var type = LensAdvizor.response && LensAdvizor.response.prescriptionType; if (!type) return null; // The rxValidation block can land at any of these paths depending on how the // merchant's Options JSON is nested in the LensAdvisor admin metafield. // Check them in preference order and use the first match. var candidates = [ LensAdvizor.options && LensAdvizor.options.prescriptionConfig && LensAdvizor.options.prescriptionConfig.rxValidation, LensAdvizor._options && LensAdvizor._options.prescriptionConfig && LensAdvizor._options.prescriptionConfig.rxValidation, LensAdvizor.options && LensAdvizor.options.rxValidation, LensAdvizor._options && LensAdvizor._options.rxValidation ]; for (var i = 0; i < candidates.length; i++) { if (candidates[i] && candidates[i][type]) return candidates[i][type]; } return null; } function julboRxParseVal(str) { if (!str || str === '') return NaN; return parseFloat(String(str).replace('+', '')); } // Resolve the [negativeLimit, positiveLimit] pair for the current prescription type. // Supports an optional `totalPowerLimitNegative` metafield for full configurability; // falls back to 6.0 for progressive (lab convention) or totalPowerLimit for unifocal. function julboRxGetPowerLimits(rules, isProgressive) { var posLimit = rules.totalPowerLimit; var negLimit = rules.totalPowerLimitNegative; if (typeof negLimit !== 'number') { negLimit = isProgressive ? 6.00 : rules.totalPowerLimit; } return { pos: posLimit, neg: negLimit }; } function julboRxGetMonocularPd() { var form = document.querySelector('#la-prescription-form'); if (!form) return { right: null, left: null }; var singleRadio = form.querySelector('#la-pd-field-single'); var isSinglePd = singleRadio && singleRadio.checked; if (isSinglePd) { var singleSelect = form.querySelector('#la-pd-value'); var val = singleSelect ? julboRxParseVal(singleSelect.value) : NaN; if (isNaN(val)) return { right: null, left: null }; var mpd = val / 2; return { right: mpd, left: mpd }; } var rightSelect = form.querySelector('[name="la-pd-right"]'); var leftSelect = form.querySelector('[name="la-pd-left"]'); return { right: rightSelect ? (julboRxParseVal(rightSelect.value) || null) : null, left: leftSelect ? (julboRxParseVal(leftSelect.value) || null) : null }; } function julboRxFindPdRange(rules, mpd) { if (mpd === null || isNaN(mpd)) return null; var ranges = rules.pdRanges; // Both bounds inclusive, first match wins (so PD=30 hits 27.5-30, not 30-32.5) for (var i = 0; i < ranges.length; i++) { var r = ranges[i]; if (mpd >= r.pdMin && mpd <= r.pdMax) return r; } return null; } function julboRxDisableOptions(selectEl, min, max) { if (!selectEl) return; selectEl.querySelectorAll('option').forEach(function(opt) { if (opt.value === '') return; var val = julboRxParseVal(opt.value); if (isNaN(val)) return; opt.disabled = (val < min || val > max); }); } function julboRxIsInvalid(selectEl) { if (!selectEl || selectEl.value === '') return false; var selected = selectEl.querySelector('option:checked'); return selected && selected.disabled; } function julboRxMarkInvalid(selectEl, invalid) { if (!selectEl) return; if (invalid) { selectEl.classList.add('julbo-rx-invalid'); selectEl.setCustomValidity(julboRxErrorMsg); } else { selectEl.classList.remove('julbo-rx-invalid'); selectEl.setCustomValidity(''); } } function julboRxShowError(form) { var el = form.querySelector('#julbo-rx-error-banner'); if (!el) { el = document.createElement('div'); el.id = 'julbo-rx-error-banner'; el.innerHTML = '

' + julboRxErrorMsg + '

'; var leftContainer = form.querySelector('.la-left-rx-container'); if (leftContainer && leftContainer.parentElement) { leftContainer.parentElement.insertBefore(el, leftContainer.nextSibling); } else { form.appendChild(el); } } el.style.display = 'block'; } function julboRxHideError(form) { var el = form.querySelector('#julbo-rx-error-banner'); if (el) el.style.display = 'none'; } function julboRxShowPdMsg(form) { var el = form.querySelector('#julbo-pd-required-msg'); if (!el) { el = document.createElement('div'); el.id = 'julbo-pd-required-msg'; el.innerHTML = '

' + julboRxPdMsg + '

'; var rightContainer = form.querySelector('.la-right-rx-container'); if (rightContainer) { rightContainer.parentElement.insertBefore(el, rightContainer); } } el.style.display = 'block'; } function julboRxHidePdMsg(form) { var el = form.querySelector('#julbo-pd-required-msg'); if (el) el.style.display = 'none'; } function julboRxValidate() { var rules = julboRxGetRules(); if (!rules) return; var form = document.querySelector('#la-prescription-form'); if (!form) return; var mpd = julboRxGetMonocularPd(); var isProgressive = LensAdvizor.response.prescriptionType === 'progressive'; var limits = julboRxGetPowerLimits(rules, isProgressive); var hasError = false; var anyPdEntered = (mpd.right !== null || mpd.left !== null); if (!anyPdEntered) { julboRxShowPdMsg(form); } else { julboRxHidePdMsg(form); } var eyes = [ { key: 'od_right', mpd: mpd.right }, { key: 'os_left', mpd: mpd.left } ]; eyes.forEach(function(eye) { var sphSelect = form.querySelector('#la-' + eye.key + '-sph'); var cylSelect = form.querySelector('#la-' + eye.key + '-cyl'); var axisSelect = form.querySelector('#la-' + eye.key + '-axis'); var addSelect = form.querySelector('#la-' + eye.key + '-add'); julboRxMarkInvalid(sphSelect, false); julboRxMarkInvalid(cylSelect, false); if (addSelect) julboRxMarkInvalid(addSelect, false); if (eye.mpd === null) { if (sphSelect) { sphSelect.disabled = true; sphSelect.classList.add('julbo-rx-locked'); } if (cylSelect) { cylSelect.disabled = true; cylSelect.classList.add('julbo-rx-locked'); } if (axisSelect) { axisSelect.disabled = true; axisSelect.classList.add('julbo-rx-locked'); } if (addSelect) { addSelect.disabled = true; addSelect.classList.add('julbo-rx-locked'); } return; } var pdRange = julboRxFindPdRange(rules, eye.mpd); if (!pdRange) { hasError = true; if (sphSelect) { sphSelect.disabled = true; sphSelect.classList.add('julbo-rx-locked'); } if (cylSelect) { cylSelect.disabled = true; cylSelect.classList.add('julbo-rx-locked'); } if (axisSelect) { axisSelect.disabled = true; axisSelect.classList.add('julbo-rx-locked'); } if (addSelect) { addSelect.disabled = true; addSelect.classList.add('julbo-rx-locked'); } return; } // --- Step 1: SPH bounded by MPD-derived SPH range --- if (sphSelect) { sphSelect.disabled = false; sphSelect.classList.remove('julbo-rx-locked'); julboRxDisableOptions(sphSelect, pdRange.sphMin, pdRange.sphMax); if (julboRxIsInvalid(sphSelect)) { julboRxMarkInvalid(sphSelect, true); hasError = true; } } var currentSph = sphSelect ? julboRxParseVal(sphSelect.value) : NaN; // Pre-read current ADD (progressive only) — needed for CYL calculation. // Treated as 0 for unifocal and when not yet selected, so the math degenerates // to the unifocal form naturally. var currentAddForCyl = 0; if (isProgressive && addSelect) { var addVal = julboRxParseVal(addSelect.value); if (!isNaN(addVal)) currentAddForCyl = addVal; } // --- Step 2: CYL bounded asymmetrically by signed total-power equation --- // -negLimit ≤ SPH + CYL + ADD ≤ +posLimit // → CYL_max = posLimit - SPH - ADD // → CYL_min = -negLimit - SPH - ADD // Both sides are then clamped to the frame-level ±maxCyl cap. if (cylSelect) { cylSelect.classList.remove('julbo-rx-locked'); cylSelect.disabled = false; var cylMin = -rules.maxCyl; var cylMax = rules.maxCyl; if (!isNaN(currentSph)) { var cylMathMax = limits.pos - currentSph - currentAddForCyl; var cylMathMin = -limits.neg - currentSph - currentAddForCyl; cylMax = Math.min(rules.maxCyl, cylMathMax); cylMin = Math.max(-rules.maxCyl, cylMathMin); // Guard: if the derived range collapses (min > max), force CYL = 0 only. if (cylMin > cylMax) { cylMin = 0; cylMax = 0; } } julboRxDisableOptions(cylSelect, cylMin, cylMax); if (julboRxIsInvalid(cylSelect)) { julboRxMarkInvalid(cylSelect, true); hasError = true; } } var currentCyl = cylSelect ? julboRxParseVal(cylSelect.value) : NaN; // --- Step 3: ADD bounded by remaining positive-side power budget (progressive only) --- // From SPH + CYL + ADD ≤ posLimit → ADD ≤ posLimit - SPH - CYL // (The negative-side bound gives a lower bound on ADD rather than an upper bound, // and ADD ≥ 0 is already enforced by the dropdown values, so we only apply the // upper bound here.) if (isProgressive && addSelect) { addSelect.classList.remove('julbo-rx-locked'); addSelect.disabled = false; var maxAddAllowed = rules.maxAdd; if (!isNaN(currentSph) && !isNaN(currentCyl)) { var addBudget = limits.pos - currentSph - currentCyl; maxAddAllowed = Math.min(rules.maxAdd, Math.max(0, addBudget)); } else if (!isNaN(currentSph)) { // SPH entered but CYL not yet: bound against SPH alone. var addBudgetSphOnly = limits.pos - currentSph; maxAddAllowed = Math.min(rules.maxAdd, Math.max(0, addBudgetSphOnly)); } julboRxDisableOptions(addSelect, 0, maxAddAllowed); if (julboRxIsInvalid(addSelect)) { julboRxMarkInvalid(addSelect, true); hasError = true; } } if (axisSelect) { axisSelect.classList.remove('julbo-rx-locked'); } }); if (hasError) { julboRxShowError(form); } else { julboRxHideError(form); } } function julboSetupRxValidation() { var rules = julboRxGetRules(); if (!rules) return; var form = document.querySelector('#la-prescription-form'); if (!form) return; form.dataset.julboRxValidation = 'active'; julboRxValidate(); var observerConfig = { childList: true, subtree: true, attributes: true, attributeFilter: ['value'] }; if (julboRxObserver) julboRxObserver.disconnect(); julboRxObserver = new MutationObserver(function() { if (!julboRxPending) { julboRxPending = true; requestAnimationFrame(function() { julboRxObserver.disconnect(); julboRxValidate(); julboRxObserver.observe(form, observerConfig); julboRxPending = false; }); } }); julboRxObserver.observe(form, observerConfig); form.addEventListener('submit', function(e) { julboRxValidate(); var banner = form.querySelector('#julbo-rx-error-banner'); if (banner && banner.style.display !== 'none') { e.preventDefault(); e.stopImmediatePropagation(); return false; } }, true); } //# sourceURL=la_julbo_custom.js

Julbo Rx Event Sign Up

SUNGLASSES

GOGGLES

ACCESSORIES

Cart

Select options