Developer Documentation
Collapsible content
LensAdvizor V2 Events
document.addEventListener('LensAdvizor:init:start', function(){})
document.addEventListener('LensAdvizor:init:complete', function(){})
document.addEventListener('LensAdvizor:init:error', function(){})
document.addEventListener('LensAdvizor:variant:change', function(){})
document.addEventListener('LensAdvizor:lensVariant:change', function(){})
document.addEventListener('LensAdvizor:selectLensModal:open', function(){})
document.addEventListener('LensAdvizor:selectLensModal:close', function(){})
document.addEventListener('LensAdvizor:prescriptionTypes:rendered', function(){})
document.addEventListener('LensAdvizor:render:contactLens', function(){})
document.addEventListener('LensAdvizor:render:submissionMethods', function(){})
document.addEventListener('LensAdvizor:render:uploadForm', function(){})
document.addEventListener('LensAdvizor:render:readingForm', function(){})
document.addEventListener('LensAdvizor:render:manualEntryForm', function(){})
document.addEventListener('LensAdvizor:lens:rendered', function(){})
document.addEventListener('LensAdvizor:lens:rendered', function(e){})
// check e.detail.method for step
document.addEventListener('LensAdvizor:lens:rendered', function(e){
if(e.detail.method == 'renderLensGroup'){}
if(e.detail.method == 'renderLenses'){}
})
document.addEventListener('LensAdvizor:lensOptions:rendered', function(){})
document.addEventListener('LensAdvizor:lensOption1:rendered', function(){})
document.addEventListener('LensAdvizor:lensOption2:rendered', function(){})
document.addEventListener('LensAdvizor:lensOption3:rendered', function(){})
document.addEventListener('LensAdvizor:addOns:rendered', function(){})
document.addEventListener('LensAdvizor:review:rendered', function(){})
document.addEventListener('LensAdvizor:action:exception', function(){})
document.addEventListener('LensAdvizor:addToCart:success', function(){})
document.addEventListener('LensAdvizor:addToCart:error', function(){})
document.addEventListener('LensAdvizor:prescription:updated', function(){})
// post add to cart this is fired
document.addEventListener('LensAdvizor:toolTip:open', function(){})
document.addEventListener('LensAdvizor:Cart:Stable', function(){})
document.addEventListener('LensAdvizor:Cart:Updated', function(){})
Adding text next to PD dropdows
// ADD PD TEXT
document.addEventListener('LensAdvizor:render:uploadForm', function(){
document.querySelector("#la-pd-fields-container").insertAdjacentHTML("afterend", "<br><p>Inserted Custom HTML</p>")
})
document.addEventListener('LensAdvizor:render:readingForm', function(){
document.querySelector("#la-pd-fields-container").insertAdjacentHTML("afterend", "<br><p>Inserted Custom HTML</p>")
})
document.addEventListener('LensAdvizor:render:manualEntryForm', function(){
document.querySelector("#la-pd-fields-container").insertAdjacentHTML("afterend", "<br><p>Inserted Custom HTML</p>")
})
Send customer straight to checkout
Note: this requires the "Add to Cart Custom Event" setting in LensAdvizor App > Settings to be turned on.
LensAdvizor.postAddToCart = () => {
setTimeout(function(){
window.location.href = "/checkout"
}, 100)
}
Creating custom tooltips
// CREATING CUSTOM TOOLTIPS
document.addEventListener('LensAdvizor:render:submissionMethods', function(){
// First get the layout
let tooltipData = {
"title":"Tooltip Title",
"content": "Tooltip Content HTML <h1>awesome</h1>"
}
customToolTipLayout = LensAdvizor.getToolTipLayout(tooltipData, <imgSrc>)
// insert the tooltip into the HTML
document.querySelector('.some-class').insertAdjacentHTML('afterend', customToolTipLayout)
})
// <imgSrc> is optional. If omitted, the default "info" image will be used.
Change the default back and close buttons
// Change the default back and close buttons
document.addEventListener('LensAdvizor:prescriptionTypes:rendered', function(){
document.querySelector('.la-steeper-back img').src = '<imgURL>'
document.querySelector('.la-prescription-modal-close img').src = '<imgURL>'
})
Make ADD Required
// Make ADD Required
document.addEventListener('LensAdvizor:render:manualEntryForm', function(){
if (LensAdvizor.response.prescriptionType == "progressive") {
document.querySelector('[name=la-odright-add]').required = true
document.querySelector('[name=la-odleft-add]').required = true
}
})
Custom properties
It's possible to add custom properties. This is data that will be added to the Lens product's properties. Any HTML input with 'la-properties[name]', where 'name' is any name that you choose, will be added to the Lens as a custom property.
document.addEventListener('LensAdvizor:prescriptionTypes:rendered', function(){ // When the Prescription Types are created, add in the hidden input(s) hiddenInputText = ` <input id="hiddenTryOnProperty" type="hidden" name='la-properties[Try On]' value="Yes" > ` wrapper = document.querySelector('.la-prescription-modal-wrapper') wrapper.insertAdjacentHTML('beforeend', hiddenInputText) })
API Access
We expose both a Customer and Orders API.
First generate an Access Token by going to your LensAdvizor App > Settings and scroll down to the bottom to generate the Access Token.
Then, read our API Documentation to use our Customer and Orders API