// START inject certain style only if the theme is correct: // 24 OCT 2024 if (Shopify.theme && Shopify.theme.schema_name === 'Release') { // Define your style rules in a variable var styleCode = ` lensadvizor-btn.la-select-lenses-btn { grid-column: span 7 / span 7; margin-top: 0px; } `; // Create a style element var styleElement = document.createElement('style'); styleElement.type = 'text/css'; // Check if the browser supports the styleSheet property (for IE) if (styleElement.styleSheet) { styleElement.styleSheet.cssText = styleCode; } else { styleElement.appendChild(document.createTextNode(styleCode)); } // Append the style element to the document head document.head.appendChild(styleElement); } // END inject certain style only if the theme is correct: // Set reading form PD values // 10 Apr 2024 - We need to do this because we don't yet allow setting values in the app admin document.addEventListener('LensAdvizor:component:WillMount', function(evt){ if (evt.detail.eventType == "LensAdvizor:render:readingForm") { LensAdvizor.options.fieldValues.singlePD = [] LensAdvizor.options.fieldValues.dualPD = [] LensAdvizor.updateFieldValues("singlePD", {max: 80, min: 50}, 0.5) LensAdvizor.updateFieldValues("dualPD", {max: 40, min: 25}, 0.5) } }) // Add dislaimer text document.addEventListener('LensAdvizor:prescriptionTypes:rendered', function(){ if(document.querySelector('.la-disclaimer') == null){ document.querySelector('#la_prescriptionSelect_title').insertAdjacentHTML('afterend',`

Prescription lenses are cut to order and non-refundable. If you are unsure about fit, order the standard sunglass frame without prescription first and we can ship your lenses later.
For more informatoion about our lens options, tap here.

`) } }) // HIDE THE CHAT document.addEventListener('LensAdvizor:selectLensModal:open', function(){ if (!document.querySelector('#dummy-chat-button-iframe')) { return } document.querySelector('#dummy-chat-button-iframe').style.zIndex = 10000 }) document.addEventListener('LensAdvizor:selectLensModal:close', function(){ if (!document.querySelector('#dummy-chat-button-iframe')) { return } document.querySelector('#dummy-chat-button-iframe').style.zIndex = 2147483647 }) document.addEventListener('theme:product-block-option:change', function(e) { const productId = e.detail.productId; const quickBuyBtn = document.querySelector('lensadvizor-quick-buy[data-la-product-id="' + productId + '"]') const variant = quickBuyBtn.productJSON.variants.find((variant) => variant[`option${e.detail.optionPosition}`] == e.detail.optionValue) if (variant) { quickBuyBtn.setAttribute("data-la-variant-id", variant.id) } }) // ---------- CHARGE $10 FOR DUAL PD ------------ // 10 APR 2024 - Removing at Harrison's request // LensAdvizor.Translation.translationJSON["en"]["Dual PD"] = "Two PD Numbers ($20)" var removeCustomAddOnStep = function(stepName){ const indx = LensAdvizor.customAddOns.findIndex(v => v.step === stepName); LensAdvizor.customAddOns.splice(indx, indx >= 0 ? 1 : 0); } // LensAdvizor.handlePDTypeChange = (function () { // var cached_function = LensAdvizor.handlePDTypeChange; // return function() { // output = cached_function.apply(this, arguments); // if (this.response.manually.pd.type == "Single PD") { // removeCustomAddOnStep("PD Step") // } else { // this.customAddOns.push({ // variantId: 39963765735542, // productId: 6831685304438, // productTitle: "PD - $10 Extra", // price: 10, // step: "PD Step", // properties: {} // }) // } // return output; // } // })(); // ---------- ADD PRESCRIPTION ON FILE OPTION TO PRESCRIPTION ENTRY SELECTION ------------ // LensAdvizor 2.0 way to add Rx On File Submission Method // 10 APR 2024 - Removing because this is now supported natively // document.addEventListener("LensAdvizor:prescriptionTypes:rendered", function () { // if (!this.submissionMethodsUpdated) { // this.prescriptionTypes.forEach(prescriptionType => { // if (["single_vision", "progressive"].includes(prescriptionType.prescription_type) && prescriptionType.title != "Readers") { // prescriptionType.settings.submissionMethods.push({ // "className": "la-submission-method", // "title": "Use Prescription from my Last Order", // "name": "onFile", // "icon": "this.svg.onFile", // "description": "", // "value": "onFile" // }) // } // }) // this.submissionMethodsUpdated = true // } // }.bind(LensAdvizor)) // document.addEventListener("LensAdvizor:render:submissionMethods", function() { // Object.keys(this.additionalInformations).forEach(elem => { // delete this.customLensProperties[elem] // }) // this.additionalInformations = {} // }.bind(LensAdvizor)) // LensAdvizor.getPrescriptionMethodDisplayName = function(submissionMethod) { // if (!submissionMethod) { // return undefined // } // if (this.additionalInformations["Submission Method"] == "Rx On File") { // return this.Translation.getTranslatedText("Rx On File") // } // return this.Translation.getTranslatedText(submissionMethod.title()) // } // LensAdvizor.selectSubmissionMethod = (function(e) { // var cached_function = LensAdvizor.selectSubmissionMethod; // return function(e) { // if (e && e.target.value == "onFile") { // this.response.method = "email_later" // this.additionalInformations["Submission Method"] = "Rx On File" // this.customLensProperties = {...this.customLensProperties, ...this.additionalInformations} // } // return cached_function.apply(this, arguments); // }; // })(); // LensAdvizor.svg.onFile = `` //# sourceURL=LensAdvizor/la_extrastuff.js // 10 APR 2024 - This appears to be repeated twice for "renderUploadForm", commenting out the first version of this function // LensAdvizor.renderUploadForm = function() { // this._component__WillMount('LensAdvizor:render:uploadForm', {method: "renderUploadForm"}) // this.updateState(this.renderUploadForm.bind(this), true) // const showPDOnUpload = this.options.prescriptionConfig.pdOnUpload !== "hidden" // const showSegmentHeight = this.options.prescriptionConfig.segmentHeightOnUpload !== "hidden" // const pdType = this.response.manually.pd.type // this.contentBox.innerHTML = `

${this.Translation.getTranslatedText("Upload Prescription")}

// //

${this.Translation.getTranslatedText("Please upload your prescription as a PNG, JPG or PDF file")}.

// // ${this.svg.attachment} // // ${this.response.prescription ? this.Translation.getTranslatedText("Change") : this.Translation.getTranslatedText("Choose File")} // // //

// ${this.response.prescription ? `${this.svg.check} ${this.response.prescription.originalName}` : ''} //

// ${showPDOnUpload ? '

' : ''} // ${showPDOnUpload ? `

${this.Translation.getTranslatedText("Pupillary Distance (PD)")}

// // ${this.Translation.getTranslatedText("Single PD")} //

// // ${this.Translation.getTranslatedText("Dual PD")} //

// ${pdType == "Single PD" ? `

// //

` : `

// ${this.Translation.getTranslatedText("Right")} // //

// ${this.Translation.getTranslatedText("Left")} // //

`} //

`: ''} // ${showSegmentHeight && this.response.prescriptionType === "progressive" ? `

${this.Translation.getTranslatedText("Segment Height")}

// //

` : ""} //

// // // ${this.Translation.getTranslatedText("Does your Rx have a prism value? ($19)")} // //

` // document.querySelector('input[name="la-prism-rx-field"]').addEventListener("change", this.handlePrismRxChange.bind(this)) // document.querySelectorAll('input[name="la-pd-field"]').forEach(input => input.addEventListener("change", this.handlePDTypeChange.bind(this))) // document.querySelectorAll('.la-form-select').forEach(select => select.addEventListener("change", this.handleFormSelectChange.bind(this))) // document.querySelector("#la-prescription-file").addEventListener("change", this.handlePrescriptionUpload.bind(this)) // document.querySelector("#la-prescription-form").removeEventListener("submit", this.handleFormSubmit.bind(this), true) // document.querySelector("#la-prescription-form").addEventListener("submit", this.handleFormSubmit.bind(this)) // this._component__DidMount('LensAdvizor:render:uploadForm', {method: "renderUploadForm"}) // } // 23 DEC 2024 - Removed because we can now inject the controls instead of re-rendering the entire block // LensAdvizor.renderUploadForm = function() { // this._component__WillMount('LensAdvizor:render:uploadForm', {method: "renderUploadForm"}) // this.updateState(this.renderUploadForm.bind(this), true) // const showPDOnUpload = this.options.prescriptionConfig.pdOnUpload !== "hidden" // const showSegmentHeight = this.options.prescriptionConfig.segmentHeightOnUpload !== "hidden" // const pdType = this.response.manually.pd.type // const selectedVariant = this.variants[this.selectedOrDefaultVariant]; // this.contentBox.innerHTML = `

${this.Translation.getTranslatedText("Upload Prescription")}

// ${selectedVariant.settings.layout.type == "horizontal-boxy" ? `

` : ''} //

// //

${this.Translation.getTranslatedText("Please upload your prescription as a PNG, JPG or PDF file")}.

// // ${this.svg.attachment} // // ${this.response.prescription ? this.Translation.getTranslatedText("Change") : this.Translation.getTranslatedText("Choose File")} // // //

// ${this.response.prescription ? `${this.svg.check} ${this.response.prescription.originalName}` : ''} //

// ${selectedVariant.settings.layout.type == "horizontal-boxy" ? `

` : ''} // ${selectedVariant.settings.layout.type !== "horizontal-boxy" ? // `${showPDOnUpload ? '

' : ''}` // : ''} // ${showPDOnUpload ? `${selectedVariant.settings.layout.type == "horizontal-boxy" ? `

` : ''} //

// ${selectedVariant.settings.layout.type !== "horizontal-boxy" ? ` //

${this.Translation.getTranslatedText("Pupillary Distance (PD)")}

// // ${this.Translation.getTranslatedText("Single PD")} //

// // ${this.Translation.getTranslatedText("Dual PD")} //

` : ''} // ${selectedVariant.settings.layout.type == "horizontal-boxy" ? `

${this.Translation.getTranslatedText("Pupillary Distance (PD)")}

` : ''} //

// ${pdType == "Single PD" ? `

// //

// ${this.options.showLunaPDTool ? `

// // Find your PD // //

` : ''}` : `

// ${this.Translation.getTranslatedText("Right")} // //

// ${this.Translation.getTranslatedText("Left")} // //

`} //

// ${selectedVariant.settings.layout.type == "horizontal-boxy" ? `

// // ${this.Translation.getTranslatedText("Have two PDs")} //

` : ''} //

// ${selectedVariant.settings.layout.type == "horizontal-boxy" ? `

` : ''}`: ''} // ${showSegmentHeight && this.response.prescriptionType === "progressive" ? `${selectedVariant.settings.layout.type !== "horizontal-boxy" ? `

` : ''} // ${selectedVariant.settings.layout.type == "horizontal-boxy" ? `

` : ''} //

// ${selectedVariant.settings.layout.type !== "horizontal-boxy" ? `

${this.Translation.getTranslatedText("Segment Height")}

` : ""} //

// ${selectedVariant.settings.layout.type == "horizontal-boxy" ? `

${this.Translation.getTranslatedText("Segment Height")}

` : ''} //

// //

// ${selectedVariant.settings.layout.type == "horizontal-boxy" ? `

` : ''} // ` : ""} //

// // // ${this.Translation.getTranslatedText("Does your Rx have a prism value? ($19)")} // //

// // // ${this.Translation.getTranslatedText("My prescription is for computer or intermediate use")} // //

` // document.querySelector('input[name="la-prism-rx-field"]').addEventListener("change", this.handlePrismRxChange.bind(this)) // document.querySelector('input[name="la-distance-rx"]').addEventListener("change", this.handleDistanceRxChange.bind(this)) // document.querySelectorAll('input[name="la-pd-field"]').forEach(input => input.addEventListener("change", this.handlePDTypeChange.bind(this))) // document.querySelectorAll('.la-form-select').forEach(select => select.addEventListener("change", this.handleFormSelectChange.bind(this))) // document.querySelector("#la-prescription-file").addEventListener("change", this.handlePrescriptionUpload.bind(this)) // document.querySelector("#la-prescription-form").removeEventListener("submit", this.handleFormSubmit.bind(this), true) // document.querySelector("#la-prescription-form").addEventListener("submit", this.handleFormSubmit.bind(this)) // if (this.options.showLunaPDTool && pdType == "Single PD") { // document.querySelector("#la-luna-pd-btn").addEventListener("click", this.Luna.handleGlassesOnOpen.bind(this)) // } // this._component__DidMount('LensAdvizor:render:uploadForm', {method: "renderUploadForm"}) // } // LensAdvizor.renderManualEntryForm = function() { // this._component__WillMount('LensAdvizor:render:manualEntryForm', {method: "renderManualEntryForm"}) // this.updateState(this.renderManualEntryForm.bind(this), true) // const prescriptionConfig = this.options.prescriptionConfig // const pdType = this.response.manually.pd.type // const showPD = prescriptionConfig.pdRequired !== "hidden" // const showSegmentHeight = prescriptionConfig.segmentHeight !== "hidden" // const showUpload = prescriptionConfig.uploadRequiredOnManualEntry !== "hidden" // this.contentBox.innerHTML = `

${this.Translation.getTranslatedText("Enter Your Prescription Manually")}

${this.Translation.getTranslatedText("OD (Right Eye)")}

// ${prescriptionConfig.showSPH ? `

// ${this.Translation.getTranslatedText("SPH")} // //

`: ''} // ${prescriptionConfig.showCYL ? `

// ${this.Translation.getTranslatedText("CYL")} // //

`: ''} // ${prescriptionConfig.showAXIS ? `

// ${this.Translation.getTranslatedText("AXIS")} // //

`: ''} // ${LensAdvizor.response.prescriptionType === "progressive" && prescriptionConfig.showADD ? `

// ${this.Translation.getTranslatedText("ADD")} // //

` : ''} //

${this.Translation.getTranslatedText("OS (Left Eye)")}

// ${prescriptionConfig.showSPH ? `

// ${this.Translation.getTranslatedText("SPH")} // //

` : ""} // ${prescriptionConfig.showCYL ? `

// ${this.Translation.getTranslatedText("CYL")} // //

` : ''} // ${prescriptionConfig.showAXIS ? `

// ${this.Translation.getTranslatedText("AXIS")} // //

` : ''} // ${LensAdvizor.response.prescriptionType === "progressive" && prescriptionConfig.showADD ? `

// ${this.Translation.getTranslatedText("ADD")} // //

` : ''} //

// ${showPD ? `

${this.Translation.getTranslatedText("Pupillary Distance (PD)")}

// // ${this.Translation.getTranslatedText("Single PD")} //

// // ${this.Translation.getTranslatedText("Dual PD")} //

// ${pdType == "Single PD" ? `

// //

` : `

// ${this.Translation.getTranslatedText("Right")} // //

// ${this.Translation.getTranslatedText("Left")} // //

`} //

`: ''} // ${showSegmentHeight && LensAdvizor.response.prescriptionType === "progressive" ? `

${this.Translation.getTranslatedText("Segment Height")}

// //

` : ""} //

// // // ${this.Translation.getTranslatedText("Does your Rx have a prism value? ($19)")} // //

// // // ${this.Translation.getTranslatedText("My prescription is for computer or intermediate use")} // //

// ${showUpload ? `

// //

// ${this.Translation.getTranslatedText("Upload your prescription for us to confirm that you have entered it correctly")} ${prescriptionConfig.uploadRequiredOnManualEntry ? "." : `(${this.Translation.getTranslatedText("Optional")}).`} //

// // ${this.svg.attachment} // // ${this.response.prescription ? this.Translation.getTranslatedText("Change") : this.Translation.getTranslatedText("Choose File")} // // //

// ${this.response.prescription ? `${this.svg.check} ${this.response.prescription.originalName}` : ''} //

` : ''} //

` // document.querySelectorAll('input[name="la-pd-field"]').forEach(input => input.addEventListener("change", this.handlePDTypeChange.bind(this))) // document.querySelector('input[name="la-distance-rx"]').addEventListener("change", this.handleDistanceRxChange.bind(this)) // document.querySelector('input[name="la-prism-rx-field"]').addEventListener("change", this.handlePrismRxChange.bind(this)) // document.querySelectorAll('.la-form-select').forEach(select => select.addEventListener("change", this.handleFormSelectChange.bind(this))) // document.querySelector("#la-prescription-form").removeEventListener("submit", this.handleFormSubmit.bind(this), true) // document.querySelector("#la-prescription-form").addEventListener("submit", this.handleFormSubmit.bind(this)) // const prescriptionFileInput = document.querySelector("#la-prescription-file") // if (prescriptionFileInput) { // prescriptionFileInput.addEventListener("change", this.handlePrescriptionUpload.bind(this)) // } // if (this.response.prescription) { // fetch(this.response.prescription.blob) // .then(r => r.blob()) // .then(function(blob){ // const fileField = document.querySelector("#la-prescription-file") // const dataTransfer = new DataTransfer() // const existingPrescriptionFile = new File([this.response.prescription.blob], this.response.prescription.originalName, { // type: this.response.prescription.type // }) // dataTransfer.items.add(existingPrescriptionFile) // fileField.files = dataTransfer.files // }.bind(this)); // } // this._component__DidMount('LensAdvizor:render:manualEntryForm', {method: "renderManualEntryForm"}) // } LensAdvizor.prismRxRequired = false document.addEventListener('LensAdvizor:render:uploadForm', function(){ this.extraRxFieldsHTML = `

${this.Translation.getTranslatedText("Does your Rx have a prism value? ($19)")}

${this.Translation.getTranslatedText("My prescription is for computer or intermediate use")}

` document.querySelector('#la-prescription-form').insertAdjacentHTML('beforeend', this.extraRxFieldsHTML) document.querySelector('input[name="la-prism-rx-field"]').addEventListener("change", this.handlePrismRxChange.bind(this)) document.querySelector('input[name="la-distance-rx"]').addEventListener("change", this.handleDistanceRxChange.bind(this)) }.bind(LensAdvizor)) document.addEventListener('LensAdvizor:render:manualEntryForm', function(){ this.extraRxFieldsHTML = `

${this.Translation.getTranslatedText("Does your Rx have a prism value? ($19)")}

${this.Translation.getTranslatedText("My prescription is for computer or intermediate use")}

` document.querySelector('.la-upload-wrapper').insertAdjacentHTML('beforebegin', this.extraRxFieldsHTML) document.querySelector('input[name="la-prism-rx-field"]').addEventListener("change", this.handlePrismRxChange.bind(this)) document.querySelector('input[name="la-distance-rx"]').addEventListener("change", this.handleDistanceRxChange.bind(this)) }.bind(LensAdvizor)) LensAdvizor.handlePrismRxChange = e => LensAdvizor.prismRxRequired = e.target.checked LensAdvizor.handleDistanceRxChange = e => { if(e.target.checked){ LensAdvizor.customLensProperties = {...LensAdvizor.customLensProperties, ...{'Computer or Intermediate': "Yes"}} } else { delete(LensAdvizor.customLensProperties['Computer or Intermediate']) } } LensAdvizor.parsePrescriptionSettings = (function () { var cached_function = LensAdvizor.parsePrescriptionSettings; return function() { var prescriptionSettings = cached_function.apply(this, arguments); if (this.response.manually.prismRequired) { prescriptionSettings.prismRequired = this.response.manually.prismRequired prescriptionSettings.prism_fields = this.response.manually.prism_fields } return prescriptionSettings; } })(); LensAdvizor.AddToCartHandler.prototype.parseUploadEntryInformation = (function() { var cached_function = LensAdvizor.AddToCartHandler.prototype.parseUploadEntryInformation; return function(properties, manualResponse) { properties = cached_function.apply(this, arguments); if (manualResponse.prismRequired) { const { od_right, os_left } = manualResponse.prism_fields properties["Prism OD"] = od_right.sph + " | " + od_right.cyl + " | " + od_right.axis + " | " + od_right.add properties["Prism OS"] = os_left.sph + " | " + os_left.cyl + " | " + os_left.axis + " | " + os_left.add } return properties; }; })(); document.addEventListener('LensAdvizor:component:WillMount', function(evt){ if (evt.detail.eventType == "LensAdvizor:review:rendered") { removeCustomAddOnStep("Prism Step") if (this.response.manually.prismRequired || LensAdvizor.prismRxRequired) { this.customAddOns.push({ productId: 6832841261174, // Change to Prism Product Id variantId: 39977324183670,// Change to Prism Product's variantId Id step: "Prism Step", productTitle: "Prism - $19 Extra", price: 19, properties: {} }) } } else if (evt.detail.eventType == "LensAdvizor:render:manualEntryForm") { if (this.response.prescriptionType == "progressive" && this.response.selectedPrescriptionType.title == "Readers") { this.options.prescriptionConfig = { ...this.options.prescriptionConfig, showSPH: false, showCYL: false, showAXIS: false, showADD: true } } else { this.options.prescriptionConfig = { ...this.options.prescriptionConfig, showSPH: true, showCYL: true, showAXIS: true, showADD: true } } } // Handle Rest event's here }.bind(LensAdvizor)) // 10 APR 2024 - No longer using AfterPay // LensAdvizor.updateAfterPayInformation = function (evt) { // let imageContainer = document.querySelector(".la-prescription-modal-image") // let afterPayContainer = document.querySelector("#la-afterpay-container") // if (!afterPayContainer) { // imageContainer.insertAdjacentHTML("beforeend", `

`) // afterPayContainer = document.querySelector("#la-afterpay-container") // } // afterPayContainer.innerHTML = `$${LensAdvizor.prices.subtotal} // ` // } document.addEventListener('LensAdvizor:component:DidMount', function(evt){ if (evt.detail.eventType == "LensAdvizor:review:rendered") { let quantityBox = document.querySelector("#la-review-quantity-box") if (!quantityBox.parentElement.querySelector("#la-insurance-field-required")) { let insuranceString = ` ${LensAdvizor.Translation.getTranslatedText("Add two years of 100% coverage on damaged frames and lenses with Lucyd Pro insurance. Includes 50% coverage for lost frames. ($99)")}

` quantityBox.insertAdjacentHTML("beforebegin", insuranceString) const insuranceField = document.querySelector("#la-insurance-field-required") insuranceField.addEventListener("change", function(e) { this.insuranceRequired = e.target.checked if (this.insuranceRequired) { this.customAddOns.push({ productId: 6833749196918, variantId: 39981367820406,// Change to Prism Product's variantId Id step: "Insurance", productTitle: "2-Year Lucyd Pro Insurance - $99 Extra", price: 99, properties: {} }) } else { removeCustomAddOnStep("Insurance") } this.renderReview() return this._component__DidMount('LensAdvizor:review:rendered', {method: "renderReview", reviewType: "default"}) }.bind(LensAdvizor)) } } // 10 APR 2024 - No longer using AfterPay // LensAdvizor.updateAfterPayInformation() }.bind(this)) //# sourceURL=LensAdvizor/la_renderUploadForm.js

Lyte Tutorial Video Available