Developer Documentation

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(){})

// 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>")
})

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
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
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
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
}
})

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)    
})

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