// ============================================================ // Apex Lenses (me81mm-yw) - LensAdvisor customizations // // "Frame Details" step, shown as its own step immediately after // the customer picks a prescription type and before "Choose Your // Lenses". It uses the widget's native step markup/classes so it // inherits the store's modal styling. // // Two values are collected onto the order line item (and onto the // LensAdvisor prescription request): // Frame Model - typed brand / model name or number // _Frame Photo - photo of the inside of the frame. The file is // sent to the store's Shopify Files and the // property holds the resulting file URL. // // The photo key is deliberately underscore-prefixed, which makes it // an internal property: the customer never sees the raw URL (Shopify // hides "_" properties in cart/checkout, and the widget's review // list skips them - core.js renderReviewDetails). The customer gets // a thumbnail of their photo on the review step instead, added by // apexInsertReviewPhoto below. Staff still see the URL: the review // filter does not apply to the LensAdvisor order detail, which // renders frameProperties as-is (web/Components/Orders/LineItems/ // BaseProduct.js). // // Both are written to hidden la-properties[...] inputs that live // outside the modal content, so they survive every step change and // are still in the DOM when the customer adds to cart. This store // adds a single lens line (no separate frame line), and that line // is built from the la-properties fields - see getProperties() in // add-to-cart.js. They are mirrored onto customBaseProductProperties // as well so they would still land if a frame line is ever enabled. // // Both are optional by default (APEX_FRAME_STEP.field.required / // .photo.required) so a customer who cannot find the model can // continue and send it later. Flip either to true to block the // Continue button until it is filled in. // // Dropping the leading underscore from photo.key would make the raw // URL visible to the customer in the review list and in cart. // ============================================================ // The widget injects this script once per widget instance on the // page (updateCustomJSandCss has several call sites), so everything // here must survive re-execution: listeners register on first run // only, and the collected values live on LensAdvizor. var APEX_FIRST_RUN = !window.__apexFrameStepLoaded; window.__apexFrameStepLoaded = true; function apexOn(eventName, handler, options) { if (APEX_FIRST_RUN) document.addEventListener(eventName, handler, options); } // ---------------- configuration ---------------- var APEX_FRAME_STEP = { title: 'Frame Details', description: 'Please share the exact brand and model name or number of your frame. You can usually find this on the inside of the temple arm. This helps us confirm whether we can custom cut your lenses. If there is no name or identifying number, please give us a brief description of your glasses.' + '

At this time, we are not able to cut lenses for one piece shield frames that do not have separate left and right lenses.', uploadNote: 'To verify the information is accurate and correct, please upload a photo of the inside of your frame showing the model name/number. This makes sure we cut the exact lens for your frame. If you do not know it or are unsure, you can continue and send this to us later.', continueLabel: 'Continue', // typed frame name -> line item property "Frame Model" field: { key: 'Frame Model', label: 'Frame Name', placeholder: 'i.e. Oakley Holbrook 0090755', required: false }, // uploaded photo -> internal line item property "_Frame Photo" // (file URL). Shown to the customer as a thumbnail on the review // step, never as a URL - see the note at the top of this file. photo: { key: '_Frame Photo', title: 'Upload File', accept: 'image/png, image/jpeg, image/heic, image/webp', maxMB: 15, required: false, reviewLabel: 'Frame Photo' } }; // Native "Upload File" icon from the Add Your Prescription step var APEX_UPLOAD_ICON = ''; // ---------------- state ---------------- LensAdvizor.customBaseProductProperties = LensAdvizor.customBaseProductProperties || {}; LensAdvizor.customFieldData = LensAdvizor.customFieldData || {}; LensAdvizor._apexFrame = LensAdvizor._apexFrame || { model: '', photoUrl: '', photoName: '', uploading: false }; // ---------------- value persistence ---------------- // The step panel is thrown away on every step change, so the values // are held in hidden inputs parked on the page instead. The widget // re-reads every la-properties[...] input on each step change // (core.js updateState) and again when the order is placed. function apexPropertyStore() { var store = document.getElementById('apex-frame-properties'); if (store) return store; store = document.createElement('div'); store.id = 'apex-frame-properties'; store.style.display = 'none'; store.innerHTML = '' + ''; document.body.appendChild(store); return store; } function apexSetProperty(key, value) { var store = apexPropertyStore(); var input = store.querySelector('input[name="la-properties[' + key + ']"]'); if (input) input.value = value || ''; if (value) { LensAdvizor.customFieldData[key] = value; LensAdvizor.customBaseProductProperties[key] = value; } else { // customFieldData accumulates across steps, so a cleared field // has to be removed explicitly or the old value would stick delete LensAdvizor.customFieldData[key]; delete LensAdvizor.customBaseProductProperties[key]; } } // ---------------- helpers ---------------- function apexEscapeHtml(value) { return String(value == null ? '' : value) .replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); } function apexT(text) { return LensAdvizor.Translation ? LensAdvizor.Translation.getTranslatedText(text) : text; } // The panel carries .la-prescription-wrapper so it picks up the // native step styling, so it has to be excluded here or it would // match as the widget's own step content. function apexContentWrapper() { return (LensAdvizor.contentBox || document).querySelector( '.la-choose-prescription-wrapper:not(#apex-frame-step), .la-prescription-wrapper:not(#apex-frame-step)' ); } function apexFrameReady() { var cfg = APEX_FRAME_STEP; var state = LensAdvizor._apexFrame; if (state.uploading) return false; if (cfg.field.required && !state.model) return false; if (cfg.photo.required && !state.photoUrl) return false; return true; } function apexSyncContinue() { var btn = document.querySelector('.apex-frame-continue'); if (!btn) return; if (apexFrameReady()) { btn.removeAttribute('disabled'); } else { btn.setAttribute('disabled', 'disabled'); } } function apexSetPhotoStatus(text, state) { var status = document.querySelector('.apex-frame-photo-status'); if (status) status.textContent = text || ''; var card = document.querySelector('.apex-frame-upload'); if (!card) return; card.classList.toggle('apex-frame-upload--busy', state === 'busy'); card.classList.toggle('apex-frame-upload--done', state === 'done'); card.classList.toggle('apex-frame-upload--error', state === 'error'); } // ---------------- the step ---------------- function apexShowFrameStep(wrapper) { if (!wrapper || document.getElementById('apex-frame-step')) return; var cfg = APEX_FRAME_STEP; var state = LensAdvizor._apexFrame; wrapper.style.display = 'none'; var panel = document.createElement('div'); panel.id = 'apex-frame-step'; panel.className = 'la-prescription-wrapper apex-frame-step'; panel.innerHTML = '

' + apexEscapeHtml(apexT(cfg.title)) + '

' + '

' + cfg.description + '

' + '

' + '' + apexEscapeHtml(apexT(cfg.field.label)) + '' + '' + '

' + '

' + cfg.uploadNote + '

' + '

' + '' + '' + '

' + APEX_UPLOAD_ICON + '

' + '

' + apexEscapeHtml(apexT(cfg.photo.title)) + '

' + '

' + '' + '

' + '

' + ''; wrapper.insertAdjacentElement('beforebegin', panel); panel.querySelector('#apex-frame-model').addEventListener('input', function (evt) { apexSetFrameModel(evt.target.value); }); panel.querySelector('#apex-frame-photo').addEventListener('change', apexHandleFramePhoto); panel.querySelector('.apex-frame-continue').addEventListener('click', function () { if (!apexFrameReady()) return; apexHideFrameStep(); }); if (state.photoUrl) { apexSetPhotoStatus((state.photoName || apexT('Photo')) + ' ' + apexT('attached'), 'done'); } apexSyncContinue(); } function apexHideFrameStep() { var panel = document.getElementById('apex-frame-step'); if (panel) panel.remove(); var wrapper = apexContentWrapper(); if (wrapper) wrapper.style.display = ''; } function apexSetFrameModel(value) { var model = String(value || '').trim(); LensAdvizor._apexFrame.model = model; apexSetProperty(APEX_FRAME_STEP.field.key, model); apexSyncContinue(); } async function apexHandleFramePhoto(evt) { var cfg = APEX_FRAME_STEP.photo; var state = LensAdvizor._apexFrame; var file = evt.target.files && evt.target.files[0]; if (!file) return; if (cfg.maxMB && file.size > cfg.maxMB * 1024 * 1024) { evt.target.value = ''; apexSetPhotoStatus(apexT('That photo is too large, please choose one under') + ' ' + cfg.maxMB + 'MB', 'error'); return; } state.photoUrl = ''; state.photoName = file.name; state.uploading = true; apexSetProperty(cfg.key, ''); apexSyncContinue(); apexSetPhotoStatus(apexT('Uploading') + ' ' + file.name + '...', 'busy'); try { var url = await apexUploadToShopifyFiles(file); state.photoUrl = url; apexSetProperty(cfg.key, url); apexSetPhotoStatus(file.name + ' ' + apexT('attached'), 'done'); } catch (err) { evt.target.value = ''; state.photoName = ''; apexSetPhotoStatus(apexT('Upload failed, please try again'), 'error'); } state.uploading = false; apexSyncContinue(); } // 1. ask the API for a staged upload target // 2. PUT the file to that target // 3. save it to the store's Shopify Files, polling while Shopify // is still processing it, and return the file URL async function apexUploadToShopifyFiles(file) { var stagedResponse = await fetch(LensAdvizor.BASE_URL + '/api/generate-staged-upload', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ shop: Shopify.shop, files: [{ filename: file.name, mimeType: file.type, resource: 'IMAGE' }] }) }); if (!stagedResponse.ok) throw new Error('could not get a staged upload target'); var staged = (await stagedResponse.json())[0]; var putResponse = await fetch(staged.url, { method: 'PUT', headers: { 'Content-Type': file.type }, body: file }); if (!putResponse.ok) throw new Error('could not send the file to the staged target'); var uploadResponse = await fetch(LensAdvizor.BASE_URL + '/api/upload-to-shopify/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ shop: Shopify.shop, target_url: staged.resourceUrl.trim() }) }); if (!uploadResponse.ok) throw new Error('could not save the file to Shopify Files'); var uploaded = await uploadResponse.json(); var tries = 0; while (!uploaded.url && uploaded.file_id && tries < 15) { await new Promise(function (resolve) { setTimeout(resolve, 1000); }); var statusResponse = await fetch( LensAdvizor.BASE_URL + '/api/file-status?file_id=' + encodeURIComponent(uploaded.file_id) + '&shop=' + encodeURIComponent(Shopify.shop) ); uploaded = await statusResponse.json(); tries++; } if (!uploaded.url) throw new Error('the file never became ready'); return uploaded.url.trim(); } // ---------------- review step thumbnail ---------------- // "_Frame Photo" is internal, so the widget leaves it out of the // review summary. Put the photo back in front of the customer as a // thumbnail so they can confirm they attached the right one, with // the full image a click away. function apexInsertReviewPhoto() { var cfg = APEX_FRAME_STEP.photo; var url = LensAdvizor._apexFrame.photoUrl; if (!url) return; if (document.getElementById('apex-review-photo')) return; var review = document.querySelector('.la-render-review'); if (!review) return; // the properties list sits in the last description block of the // lens review item, right under "Frame Model" var left = review.querySelector('.la-review-item .la-review-left'); if (!left) return; var descriptions = left.querySelectorAll('.la-label-description'); var anchor = descriptions.length ? descriptions[descriptions.length - 1] : left; // la-label-description makes the label match the other property // lines exactly (the review scopes its own size/colour to it) var row = document.createElement('div'); row.id = 'apex-review-photo'; row.className = 'la-label-description apex-review-photo'; row.innerHTML = '' + apexEscapeHtml(apexT(cfg.reviewLabel)) + ':' + '' + '

' + apexEscapeHtml(apexT('Photo of your frame')) + '

' + ''; anchor.insertAdjacentElement('afterend', row); } apexOn('LensAdvizor:review:rendered', function () { setTimeout(apexInsertReviewPhoto, 0); }); // ---------------- step routing ---------------- // The lens step is the one the widget renders straight after a // prescription type is chosen, so the frame panel goes in front of // it. Arming on the types step (and on modal open, in case the // flow skips the types step) means the panel only appears on the // way forward, not when the customer navigates back into the lens // step from a later one. apexOn('LensAdvizor:selectLensModal:open', function () { LensAdvizor._apexArmed = true; }); apexOn('LensAdvizor:prescriptionTypes:rendered', function () { LensAdvizor._apexArmed = true; }); apexOn('LensAdvizor:lens:rendered', function () { setTimeout(function () { var wrapper = apexContentWrapper(); if (!wrapper) return; LensAdvizor._apexOnLensStep = true; if (!LensAdvizor._apexArmed) return; LensAdvizor._apexArmed = false; apexShowFrameStep(wrapper); }, 0); }); // the panel lives next to the step content, so drop it whenever the // widget renders a different step apexOn('LensAdvizor:component:WillMount', function () { var panel = document.getElementById('apex-frame-step'); if (panel) panel.remove(); LensAdvizor._apexOnLensStep = false; }); // Back-button routing around the custom step: // - on the frame step, back falls through to the widget, which // returns to the prescription types step // - on the lens step, back returns INTO the frame step apexOn('click', function (evt) { var backBtn = evt.target.closest && evt.target.closest('.la-steeper-back'); if (!backBtn) return; if (document.getElementById('apex-frame-step')) { apexHideFrameStep(); return; } if (LensAdvizor._apexOnLensStep) { evt.preventDefault(); if (evt.stopImmediatePropagation) evt.stopImmediatePropagation(); else evt.stopPropagation(); apexShowFrameStep(apexContentWrapper()); } }, true); //# sourceURL=la_apex_frame_details_step.js

Shop

Quick Links