// Utils object for helper functions const Utils = {}; Utils.uuidv4 = () => { return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); } Utils.formPrescriptionTypes = ["single_vision", "progressive", "reading"]; document.addEventListener('LensAdvizor:render:submissionMethods', function(){ document.querySelector('.la-wrapper-heading').insertAdjacentHTML('afterend',"

Each prescription frame is custom made and will take 10-15 business days. All sales final on prescription frames. We apologize for any inconvenience at this time we only take prescriptions for powers +/-4.

") }) // ---- START Custom JS for rendering frame product options ---- //Custom development for Mohala Eyewear starts from here LensAdvizor.isProductOptionsRendered = false; LensAdvizor.resetUserResponseCustom = function() { this.response = { prescriptionType: null, prescription: null, lens: '', lensVariant: null, method: "", addOns: {}, manually: '' } this.lenses = [] this.prices.lens = null this.prices.addons = null this.customAddOns = [] this.response.prescription = null this.response.selectedPrescriptionType = null this.response.orderNote = "" this.navigationSteps = undefined this.setDefaultManualResponse() } LensAdvizor.resetUserResponse = (function() { var cached_function = LensAdvizor.resetUserResponse; return function() { this.isProductOptionsRendered = false; var result = cached_function.apply(this, arguments); return result }; })(); LensAdvizor.handleButtonDisplay = function() { let selectedVariant = this.variants[this.selectedOrDefaultVariant] let selectedVariantOptions = []; // Show select lens button if any variant is present with that particular color option // The new PDP (window.MohalaPdpSelectsOptions) keeps the customer's variant, even if it is not assigned if (!selectedVariant && !window.MohalaPdpSelectsOptions) { selectedVariant = this.variantsJSON.find(variant => variant.id == this.selectedOrDefaultVariant); const selectedVariantColorOption = selectedVariant.option1; selectedVariantOptions = this.variantsJSON.filter(variant => variant.option1 == selectedVariantColorOption); if (selectedVariantOptions.length) { this.selectedOrDefaultVariant = selectedVariantOptions.find(option => option.available).id } } if (!this.addToCartButtons.length) { this.addStyle('form[action*="/cart/add"] [type=submit]', 'display', 'initial !important') } if (selectedVariant) { if (selectedVariant.settings) { if (selectedVariant.settings.showAddToCartButton) { this.addToCartButtons.forEach(button => { button.style.display = 'unset' button.classList.remove("la-visiblity-hidden") }) } else { this.addToCartButtons.forEach(button => { button.style.display = 'none' button.classList.add("la-visiblity-hidden") }) } } this.selectLensButtons.forEach(button => { button.style.display = 'block'; button.setAttribute("data-la-variant-id", this.selectedOrDefaultVariant) }) this.collectionId = selectedVariant.collection_id this.prices.frame = selectedVariant.price } else { this.selectLensButtons.forEach(button => button.style.display = 'none') this.addToCartButtons.forEach(button => { button.style.display = 'unset' button.classList.remove("la-visiblity-hidden") }) this.collectionId = null } } LensAdvizor.getProductOptions = function() { this.noseBridgeTypes = []; this.noseBridgeEdTypes = ['Low Nose Bridge', 'Medium Nose Bridge', 'Tall Nose Bridge']; this.frameWidths = []; // The new PDP (window.MohalaPdpSelectsOptions) selects Nose Bridge and Frame Width on the product page if (this.productOptions && !window.MohalaPdpSelectsOptions) { this.productOptions.map(option => { if (option.name.toLowerCase() == 'Nose Bridge'.toLowerCase()) { this.noseBridgeTypes.push(...option.values) } if (option.name.toLowerCase() == 'Frame Width'.toLowerCase()) { this.frameWidths.push(...option.values) } }) } if (this.noseBridgeTypes.length > 0) { this.filterNoseBridgeOptions(); return this.renderNoseBridge(); } this.isProductOptionsRendered = true; return this.renderPrescriptionTypes() } LensAdvizor.filterNoseBridgeOptions = function() { const selectedVariant = LensAdvizor.variants[LensAdvizor.selectedOrDefaultVariant] let firstSelectedOption = LensAdvizor.variantsJSON.filter(variant=> variant.option1 == selectedVariant.json.option1) let availableOptionsJSON = firstSelectedOption.filter(json => { if (json.option3) { return json.available && json.option3 == selectedVariant.json.option3 } else { return json.available } }) if (LensAdvizor.selectLensButtons[0].productJSON.options.length > 2) { this.noseBridgeTypes = [...new Set(availableOptionsJSON.map(option => option.option2))] } else { this.noseBridgeTypes = [...new Set(availableOptionsJSON.map(option => option.option1))] } } LensAdvizor.renderPrescriptionTypes = function() { this._component__WillMount('LensAdvizor:prescriptionTypes:rendered', {method: "renderPrescriptionTypes"}) this.loader.style.display = "" if (!this.noseBridgeTypes) { this.resetUserResponse() } else { this.resetUserResponseCustom() } if (!this.isProductOptionsRendered) { return this.getProductOptions(); } const selectedVariant = LensAdvizor.variants[LensAdvizor.selectedOrDefaultVariant] if (LensAdvizor.productFeaturedImage) { LensAdvizor.setDefaultMatrixImage(selectedVariant.image) } this.variantTitleContainer.classList.remove("la-prescription-modal-title-left"); this.variantTitleContainer.innerHTML = selectedVariant.json.name function handlePrescriptionResponse () { const html = this.prescriptionTypes.map(prescriptionType => this.getButtonLayout({ title: prescriptionType.title, image: prescriptionType.image, name: `${prescriptionType.name}-${prescriptionType.id}`, value: prescriptionType.id, description: prescriptionType.description, tooltip: prescriptionType.metafield && prescriptionType.metafield.toolTip ? prescriptionType.metafield.toolTip : undefined })).join("") this.contentBox.innerHTML = `

${this.Translation.getTranslatedText("Choose Your Lenses")}

${html}

` document.querySelectorAll('.la-tap-select').forEach(btn => btn.addEventListener("click", this.handlePrescriptionTypeChange.bind(this))) this.updateState(this.renderPrescriptionTypes.bind(this)) this.formBtn.style.display = 'none' if (!this.options.settings.layout.includes("subtotal")) { this.formBtn.parentElement.style.display = 'none' } if (this.options.showBranding && !this.poweredByAdded) { this.poweredByAdded = true this.contentBox.insertAdjacentHTML("afterend", this.poweredBy) } this._component__DidMount('LensAdvizor:prescriptionTypes:rendered', {method: "renderPrescriptionTypes"}) } if (this.prescriptionTypes && this.prescriptionTypes.length > 0 && !this.options.variantConfig.skipIfOnePrescriptionType) { this.isContactLensFlow = this.prescriptionTypes.find(obj => obj.prescription_type === 'contact_lenses'); if (this.isContactLensFlow) { return this.getProductDetails() } return handlePrescriptionResponse.call(this) } if (this.prescriptionTypes && this.prescriptionTypes.length == 1 && this.options.variantConfig.skipIfOnePrescriptionType) { return this.handlePrescriptionTypeChange() } // product_id and shopify_collection_id are needed for the Matrix Image frame images const params = new URLSearchParams({ api_version: 2, product_id: this.productId }) if (this.shopifyCollectionId) params.set('shopify_collection_id', this.shopifyCollectionId) fetch(`${this.API_URL}/collection/${this.collectionId}/prescription-types/?${params}`) .then(res => res.json()) .then(function(response) { this.prescriptionTypes = response.prescriptionTypes.filter(obj => obj.checked); this.frameVariantsMatrixImages = response.frameVariantsMatrixImages this.isContactLensFlow = this.prescriptionTypes.find(obj => obj.prescription_type === 'contact_lenses'); if (this.prescriptionTypes.length == 1 && this.options.variantConfig.skipIfOnePrescriptionType) { return this.handlePrescriptionTypeChange() } if (this.isContactLensFlow) { return this.getProductDetails() } handlePrescriptionResponse.call(this) }.bind(this)) } LensAdvizor.handlePrescriptionTypeChange = function(e) { if (!this.noseBridgeTypes) { this.resetUserResponse() } else { this.resetUserResponseCustom() } var selectedPrescription = null; if (this.prescriptionTypes.length == 1 && this.options.variantConfig.skipIfOnePrescriptionType) { selectedPrescription = this.prescriptionTypes[0] } else { selectedPrescription = this.prescriptionTypes.find(obj => obj.id === e.target.value) } this.response.selectedPrescriptionType = selectedPrescription this.response.prescriptionType = selectedPrescription.name this.previousStep = this.currentStep this.options.prescriptionConfig = selectedPrescription.settings const { pdRequired, pdOnUpload } = this.options.prescriptionConfig this.options.showLunaPDTool = this.enableLunaPdTool && Utils.formPrescriptionTypes.includes(selectedPrescription.name) && (pdRequired !== "hidden" || pdOnUpload !== "hidden") if (this.options.showLunaPDTool) { this.Luna.init(this) } this.options.showFittingBoxTool = this.enableFittingBox && Utils.formPrescriptionTypes.includes(selectedPrescription.name) && (pdRequired !== "hidden" || pdOnUpload !== "hidden"); this.updateState(this.renderPrescriptionTypes.bind(this)) this.options.fieldValues = { singlePD: [], dualPD: [], sph: [], cyl: [], add: [], axis: Array.from({length: 181}, (_, i) => i), segmentHeight: Array(45 - 12 + 1).fill().map((_, idx) => 12 + idx), prismValues: [], diopters: [] } function updateFieldValues(fieldName, data, step) { min = parseFloat(data.min) max = parseFloat(data.max) while (min <= max) { LensAdvizor.options.fieldValues[fieldName].push(min) min += step } } updateFieldValues("singlePD", selectedPrescription.settings.fieldOptions.pd, 1) updateFieldValues("dualPD", selectedPrescription.settings.fieldOptions.dualPd, 0.5) updateFieldValues("sph", selectedPrescription.settings.fieldOptions.sph, 0.25) updateFieldValues("cyl", selectedPrescription.settings.fieldOptions.cyl, 0.25) updateFieldValues("add", selectedPrescription.settings.fieldOptions.add, 0.25) updateFieldValues("diopters", selectedPrescription.settings.diopters, parseFloat(selectedPrescription.settings.diopters.steps)) updateFieldValues("prismValues", {min: 0, max: 5}, 0.25) this.lensDisplayMethod = "renderLensGroup" if (selectedPrescription.settings.lensGroupDisplayType === "hidden") { this.lensDisplayMethod = "renderLenses" } else if (selectedPrescription.settings.lensGroupDisplayType === "header") { this.lensDisplayMethod = "renderHeaderLenses" } else if (selectedPrescription.settings.lensGroupDisplayType === "accordion") { this.lensDisplayMethod = "renderAccordionLenses" } if (["single_vision", "progressive"].includes(this.response.prescriptionType)) { if (selectedPrescription.settings.prescriptionEntryFormLocation == "before-review") { this.currentStep = this.lensDisplayMethod if (this.prescriptionTypes.length == 1 && this.options.variantConfig.skipIfOnePrescriptionType) { this.updateState(this[this.lensDisplayMethod].bind(this)) } return this.getItemGroups(this[this.currentStep].bind(this)) } else { this.currentStep = "renderSubmissionMethods"; if ((this.prescriptionTypes.length == 1 && this.options.variantConfig.skipIfOnePrescriptionType) && (this.options.prescriptionConfig.submissionMethods.length == 1 && this.options.prescriptionConfig.skipPrescriptionMethod)) { this.updateState(this[this.lensDisplayMethod].bind(this)) } else if (this.prescriptionTypes.length == 1 && this.options.variantConfig.skipIfOnePrescriptionType) { this.updateState(this.renderSubmissionMethods.bind(this)) } else if (this.options.prescriptionConfig.submissionMethods.length == 1 && this.options.prescriptionConfig.skipPrescriptionMethod && !this.options.variantConfig.skipIfOnePrescriptionType) { if (this.options.prescriptionConfig.submissionMethods.find(submissionMethod => submissionMethod.value == "entered_manually")) { this.updateState(this.renderManualEntryForm.bind(this)) } else { this.updateState(this[this.lensDisplayMethod].bind(this)) } } } } else if (this.response.prescriptionType == 'reading') { if (selectedPrescription.settings.prescriptionEntryFormLocation == "before-review") { this.currentStep = this.lensDisplayMethod if (this.prescriptionTypes.length == 1 && this.options.variantConfig.skipIfOnePrescriptionType) { this.updateState(this[this.lensDisplayMethod].bind(this)) } return this.getItemGroups(this[this.currentStep].bind(this)) } else { this.currentStep = "renderReadingForm"; if (this.prescriptionTypes.length == 1 && this.options.variantConfig.skipIfOnePrescriptionType) { this.navigationSteps = ["bound renderReadingForm"] this.navigation = { 1: this.renderReadingForm.bind(this) } } } } else if (this.response.prescriptionType == 'non_prescription') { if (this.options.prescriptionConfig.lensGroupDisplayType === "button") { this.currentStep = this.lensDisplayMethod } else { this.currentStep = this.lensDisplayMethod } if (this.prescriptionTypes.length == 1 && this.options.variantConfig.skipIfOnePrescriptionType) { this.navigationSteps = [`bound ${this.lensDisplayMethod}`] this.navigation = { 1: this[this.lensDisplayMethod].bind(this) } } return this.getItemGroups(this[this.currentStep].bind(this)) } else if (this.response.prescriptionType == "frame_only"){ return this.handleFrameOnly() } this.getItemGroups() if (this.prescriptionTypes.length == 1 && this.options.variantConfig.skipIfOnePrescriptionType && !this.options.prescriptionConfig.skipPrescriptionMethod) { this.stepIndex = this.navigationSteps.length; } return this[this.currentStep]() } LensAdvizor.updateStateCustom = function(navigation, navigationName, displayFormBtn, forceUpdate) { document.querySelector("#la-prescription-modal-wrapper").style.flexDirection = "unset" document.querySelector("#la-prescription-modal-wrapper").style.flexDirection = "" document.querySelector(".la-prescription-modal-wrapper").scrollTop = 0 this.updatePictureMatrix(navigation.name.replace("bound ", "")) this.formBtn.style.display = 'none' if (!this.navigationSteps) { this.navigationSteps = [] this.navigation = {} } const boxyFooterContainer = this.formBtn.closest(".la-prescription-boxy-footer") if (!this.navigationSteps.includes(navigationName) || forceUpdate) { this.navigationSteps.push(navigationName) this.stepIndex = this.navigationSteps.length; this.navigation[this.stepIndex] = navigation } this.updateProgressBar(); if (displayFormBtn) { this.formBtn.style.display = '' this.formBtn.parentElement.style.display = '' this.formBtn.firstElementChild.innerHTML = this.Translation.getTranslatedText("Save and Continue") if (boxyFooterContainer) { boxyFooterContainer.classList.add("la-btn-active") } } else { this.formBtn.style.display = 'none' if (!this.options.layout.includes("subtotal")) { this.formBtn.parentElement.style.display = 'none' } if (boxyFooterContainer) { boxyFooterContainer.classList.remove("la-btn-active") } } if (this.options.showBranding && !this.poweredByAdded) { this.poweredByAdded = true this.contentBox.insertAdjacentHTML("afterend", this.poweredBy) } } LensAdvizor.preloadImage = function(url) { var img=new Image(); img.src=url; } // Helper to normalize bridge names to lookup keys LensAdvizor.getNoseBridgeKey = function(name) { let key = name.toLowerCase().replace(/[^\w\s]/g, '').trim().replaceAll(" ", "_"); const keyMap = { 'traditional_nose_bridge': 'tall_nose_bridge', 'medium_flexfit_bridge': 'medium_flexfit_bridge', 'medium_gripbridge': 'medium_gripbridge', 'contourbridge': 'contourbridge', }; return keyMap[key] || key; } LensAdvizor.renderNoseBridge = function() { LensAdvizor.loader.style.display = "none"; LensAdvizor.updateStateCustom(LensAdvizor.renderNoseBridge, 'bound renderNoseBridge'); // Hide dotted line for next steps if (document.querySelector('.la-width-line')) { document.querySelector('.la-width-line').style.display = "none"; } const noseBridgeDetails = { 'low_nose_bridge_img': 'https://cdn.shopify.com/s/files/1/0413/1160/0808/files/low.png?v=1686723655', 'medium_nose_bridge_img': 'https://cdn.shopify.com/s/files/1/0413/1160/0808/files/medium.png?v=1686723655', 'tall_nose_bridge_img': 'https://cdn.shopify.com/s/files/1/0413/1160/0808/files/tall.png?v=1686723655', 'contourbridge_img': 'https://cdn.shopify.com/s/files/1/1191/9350/files/low-nose-1.webp?v=1738710224', 'medium_flexfit_bridge_img': 'https://cdn.shopify.com/s/files/1/0413/1160/0808/files/medium.png?v=1686723655', 'medium_gripbridge_img': 'https://cdn.shopify.com/s/files/1/0413/1160/0808/files/medium.png?v=1686723655', 'low_nose_bridge_main_img': 'https://cdn.shopify.com/s/files/1/0413/1160/0808/files/LOW_NOSE_WT_1.png?v=1687261043', 'medium_nose_bridge_main_img': 'https://cdn.shopify.com/s/files/1/0413/1160/0808/files/MEDIUM_NOSE_WT_1.png?v=1687261043', 'tall_nose_bridge_main_img': 'https://cdn.shopify.com/s/files/1/0413/1160/0808/files/TALL_NOSE_WT_1.png?v=1687261043', 'contourbridge_main_img': 'https://cdn.shopify.com/s/files/1/1191/9350/files/low-nose-2.webp?v=1738710224', 'medium_flexfit_bridge_main_img': 'https://cdn.shopify.com/s/files/1/0413/1160/0808/files/MEDIUM_NOSE_WT_1.png?v=1687261043', 'medium_gripbridge_main_img': 'https://cdn.shopify.com/s/files/1/0413/1160/0808/files/MEDIUM_NOSE_WT_1.png?v=1687261043', 'low_nose_bridge_desc': `For nose bridges flatter between the eyes, try our Low Nose Bridge size or our ContourBridge\u2122 (Patent Pending) in select styles only.`, 'medium_nose_bridge_desc': `For nose bridges in between a flatter nose bridge and a taller nose bridge try our Medium, Low, or ContourBridge\u2122 (Patent Pending) in select styles only.`, 'tall_nose_bridge_desc': `For nose bridges taller in height you can wear any of our four nose bridge sizes: Traditional, Medium, Low, or ContourBridge\u2122 (Patent Pending).`, 'contourbridge_desc': `For nose bridges flatter between the eyes, try our ContourBridge\u2122. It's perfect for long lashes, higher cheekbones, or fuller cheeks.`, 'medium_flexfit_bridge_desc': `Our Medium FlexFit Bridge offers a flexible, comfortable fit for medium nose bridges.`, 'medium_gripbridge_desc': `Our Medium GripBridge provides a secure, non-slip fit for medium nose bridges.`, } LensAdvizor.noseBridgeEdTypes = LensAdvizor.noseBridgeEdTypes.map((type,index) => { if (type.id) { return type; } const typeDetails = {}; const noseBridgeKey = type.toLowerCase().replaceAll(" ", "_"); //Preloading image to reduce load time let preloadedImage = new Image() preloadedImage.src = noseBridgeDetails[`${noseBridgeKey}_main_img`] typeDetails.id = Utils.uuidv4() typeDetails.name = type; typeDetails.desc = noseBridgeDetails[`${noseBridgeKey}_desc`]; typeDetails.img = noseBridgeDetails[`${noseBridgeKey}_img`]; typeDetails.main_img = preloadedImage.src; return LensAdvizor.noseBridgeEdTypes[index] = typeDetails; }) LensAdvizor.noseBridgeTypes = LensAdvizor.noseBridgeTypes.map((type,index) => { if (type.id) { return type; } const typeDetails = {}; let noseBridgeKey = LensAdvizor.getNoseBridgeKey(type); //Preloading image to reduce load time let preloadedImage = new Image() preloadedImage.src = noseBridgeDetails[`${noseBridgeKey}_main_img`] typeDetails.id = Utils.uuidv4() typeDetails.name = type; typeDetails.desc = noseBridgeDetails[`${noseBridgeKey}_desc`]; typeDetails.img = noseBridgeDetails[`${noseBridgeKey}_img`]; typeDetails.main_img = preloadedImage.src; return LensAdvizor.noseBridgeTypes[index] = typeDetails; }) if (LensAdvizor.noseBridgeTypes[0] && LensAdvizor.noseBridgeTypes[0].main_img && LensAdvizor.productFeaturedImage.src != LensAdvizor.noseBridgeTypes[0].main_img) { LensAdvizor.productFeaturedImage.src = LensAdvizor.noseBridgeTypes[0].main_img } LensAdvizor.variantTitleContainer.innerHTML = LensAdvizor.noseBridgeTypes[0].name LensAdvizor.variantTitleContainer.classList.add("la-prescription-modal-title-left"); const renderBridgeHtml = LensAdvizor.noseBridgeEdTypes.map(type => LensAdvizor.getButtonLayout({ title: type.name, image: type.img, name: `${type.name.toLowerCase().replaceAll(" ", "_")}-${type.id}`, value: type.id, description: type.desc })).join("") const chooseBridgeHtml = LensAdvizor.noseBridgeTypes.map(type => LensAdvizor.getButtonLayout({ title: type.name, name: `${type.name.toLowerCase().replace(/[^\w\s]/g, '').trim().replaceAll(" ", "_")}`, value: type.id, description: "" })).join("") const selectedVariant = LensAdvizor.variants[LensAdvizor.selectedOrDefaultVariant] LensAdvizor.contentBox.innerHTML = `

${selectedVariant.json.name}

${LensAdvizor.Translation.getTranslatedText("Nose Bridge Fit Guide")}

${renderBridgeHtml}

${LensAdvizor.Translation.getTranslatedText("Available Nose Bridges - Click to Select")}

${chooseBridgeHtml}

`; document.querySelectorAll('.la-render-nose-bridge .la-tap-select').forEach(btn => btn.addEventListener("click", LensAdvizor.handleFeaturedImageChange.bind(this))) document.querySelectorAll('.la-choose-bridge-wrapper .la-tap-select').forEach(btn => btn.addEventListener("click", LensAdvizor.handleNoseBridgeTypeChange.bind(this))) } LensAdvizor.handleNoseBridgeTypeChange = function(e) { LensAdvizor.response.selectedNoseBridge = LensAdvizor.noseBridgeTypes.find(obj => obj.id === e.target.value); LensAdvizor.updateVariant(); if (LensAdvizor.frameWidths.length > 0) { LensAdvizor.filterFrameWidthOptions(); return LensAdvizor.renderFrameWidth(); } LensAdvizor.isProductOptionsRendered = true; return LensAdvizor.renderPrescriptionTypes() } LensAdvizor.filterFrameWidthOptions = function() { const selectedNoseBridge = LensAdvizor.response.selectedNoseBridge; const selectedVariant = LensAdvizor.variants[LensAdvizor.selectedOrDefaultVariant]; let firstSelectedOption = LensAdvizor.variantsJSON.filter(variant => variant.option1 == selectedVariant.json.option1) if (LensAdvizor.selectLensButtons[0].productJSON.options.length > 2) { firstSelectedOption = LensAdvizor.variantsJSON.filter(variant => variant.option1 == selectedVariant.json.option1 && variant.option2 == LensAdvizor.response.selectedNoseBridge.name) } let availableOptionsWithNoseBridgeJSON = firstSelectedOption.filter(json => json.available) if (LensAdvizor.selectLensButtons[0].productJSON.options.length > 2) { this.frameWidths = [...new Set(availableOptionsWithNoseBridgeJSON.map(json => json.option3))] } else { this.frameWidths = [...new Set(availableOptionsWithNoseBridgeJSON.map(json => json.option2))] } } LensAdvizor.handleFeaturedImageChange = function(e) { const currentNoseBridge = LensAdvizor.noseBridgeEdTypes.find(obj => obj.id === e.target.value); if (LensAdvizor.productFeaturedImage.src != currentNoseBridge.main_img) { LensAdvizor.productFeaturedImage.src = currentNoseBridge.main_img } LensAdvizor.variantTitleContainer.innerHTML = currentNoseBridge.name const currentNoseBridgeSelector = `${currentNoseBridge.name.toLowerCase().replaceAll(" ", "_")}-${currentNoseBridge.id}`; document.querySelectorAll(`.la-tap-select:not(#${currentNoseBridgeSelector})`).forEach(el => el.checked = false) } LensAdvizor.renderFrameWidth = function() { LensAdvizor.updateStateCustom(LensAdvizor.renderFrameWidth, 'bound renderFrameWidth'); const frameWidthDetails = { 'narrow': '', 'medium': '', 'wide': '', 'featured_img': 'https://cdn.shopify.com/s/files/1/0413/1160/0808/files/SUNGLASS_WIDTH_WT.png?v=1686723614' } const selectedVariant = LensAdvizor.variants[LensAdvizor.selectedOrDefaultVariant] if (LensAdvizor.productFeaturedImage) { LensAdvizor.productFeaturedImage.src = selectedVariant.image; const frameWidthDashedImage = `

`; LensAdvizor.productFeaturedImage.insertAdjacentHTML("afterend", frameWidthDashedImage); } // if (LensAdvizor.productFeaturedImage.src != frameWidthDetails.featured_img) { // LensAdvizor.productFeaturedImage.src = frameWidthDetails.featured_img // } LensAdvizor.variantTitleContainer.classList.remove("la-prescription-modal-title-left"); // LensAdvizor.variantTitleContainer.innerHTML = `Select your frame width ${selectedVariant.json.name}` LensAdvizor.variantTitleContainer.innerHTML = `${selectedVariant.json.name}` LensAdvizor.frameWidths = LensAdvizor.frameWidths.map((width,index) => { if (width.id) { return width; } const widthDetails = {}; const frameWidthKey = width.toLowerCase(); widthDetails.id = Utils.uuidv4() widthDetails.title = width; widthDetails.desc = frameWidthDetails[`${frameWidthKey}`]; return LensAdvizor.frameWidths[index] = widthDetails; }) const html = LensAdvizor.frameWidths.map(width => LensAdvizor.getButtonLayout({ title: width.title, name: `${width.title.toLowerCase()}-${width.id}`, value: width.id, description: width.desc })).join("") LensAdvizor.contentBox.innerHTML = `

${LensAdvizor.Translation.getTranslatedText("Select your frame width")}

${html}

`; document.querySelectorAll('.la-tap-select').forEach(btn => btn.addEventListener("click", LensAdvizor.handleFrameWidthChange.bind(this))) } LensAdvizor.handleFrameWidthChange = function(e) { LensAdvizor.response.selectedFrameWidth = LensAdvizor.frameWidths.find(obj => obj.id === e.target.value); LensAdvizor.updateVariant(); LensAdvizor.isProductOptionsRendered = true; // Hide dotted line for next steps document.querySelector('.la-width-line').style.display = "none"; return LensAdvizor.renderPrescriptionTypes() } // Find the index of a product option by its name (e.g., "Nose Bridge", "Frame Width") LensAdvizor.getOptionIndexByName = function(name) { if (!LensAdvizor.productOptions) return -1; return LensAdvizor.productOptions.findIndex(opt => opt.name.toLowerCase() == name.toLowerCase()); } LensAdvizor.updateVariant = function() { const currentVariant = LensAdvizor.variantsJSON.find(variant => variant.id == LensAdvizor.selectedOrDefaultVariant) const noseBridgeOptionIndex = LensAdvizor.getOptionIndexByName('Nose Bridge'); const frameWidthOptionIndex = LensAdvizor.getOptionIndexByName('Frame Width'); const selectedVariantOptions = currentVariant.options.map((option, index) => { if (LensAdvizor.response.selectedNoseBridge && index === noseBridgeOptionIndex) { return LensAdvizor.response.selectedNoseBridge.name; } if (LensAdvizor.response.selectedFrameWidth && index === frameWidthOptionIndex) { return LensAdvizor.response.selectedFrameWidth.title } return option }) const selectedVariantName = selectedVariantOptions.join(' / '); const updatedVariant = LensAdvizor.variantsJSON.find(variant => variant.title == selectedVariantName) LensAdvizor.selectedOrDefaultVariant = updatedVariant.id; } LensAdvizor.handleFrameOnly = function() { this.loader.style.display = '' if (this.response?.selectedPrescriptionType?.title?.toLowerCase() == "try before you buy") { this.customBaseProductProperties["tbybEnabled"] = this.selectedOrDefaultVariant } if (this.response.selectedPrescriptionType?.metafield?.addon_flow) { return this.getAddOnsForFrameOnly() } return new this.AddToCartHandler(this).performOperation() } // ---- END Custom JS for rendering frame product options ---- //# sourceURL=la_extrastuff.js

Frames for medium face widths