02 · Events Run code when the lens flow changes LensAdvisor dispatches JavaScript events on document. Use these events to track flow steps or customize the interface.
Listen for a flow step Add your JavaScript in LensAdvisor under Settings, then Advanced: Custom JS.
This example runs when LensAdvisor shows the prescription type selector.
js Copy
document.addEventListener('LensAdvizor:prescriptionTypes:rendered', () => {
// Add your code for this step here.
});
Connect a cart drawer To keep customers on the product page, connect LensAdvisor to your theme’s cart drawer.
In LensAdvisor settings, turn on Advanced: Add to Cart Custom Event. Define LensAdvizor.postAddToCart in your custom JavaScript. Use your theme’s cart methods inside the function to refresh and open the drawer. LensAdvisor calls this function after adding the selected products to the cart.
js Copy
LensAdvizor.postAddToCart = async () => {
// Refresh and open the cart drawer using your theme's methods.
};
Note
Keep the LensAdvizor spelling in event names and JavaScript objects. The code identifiers use a “z”.
Storefront event reference Listen for the event that matches the step you need. The lens-rendered event includes the step name in e.detail.method.
js Copy
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') {
// handle renderLensGroup
}
if (e.detail.method == 'renderLenses') {
// handle 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() {});
document.addEventListener('LensAdvizor:toolTip:open', function() {});
document.addEventListener('LensAdvizor:Cart:Stable', function() {});
document.addEventListener('LensAdvizor:Cart:Updated', function() {}); 