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(){})
document.addEventListener('LensAdvizor:toolTip:open', function(){})
document.addEventListener('LensAdvizor:Cart:Stable', function(){})
document.addEventListener('LensAdvizor:Cart:Updated', function(){})

The following is an example of integrating Google Analytics, which can be adapted for any analytics software.

Copy and paste this code into LensAdivosr App > Settings > Advanced: Custom JS

// ---Setup tracking of Virtual Pageviews for Google Analytics--- 
document.addEventListener('LensAdvizor:prescriptionTypes:rendered', function(){
    ga('send', 'pageview', '/lensadvisor/select_prescription_type')
})
document.addEventListener('LensAdvizor:render:submissionMethods', function(){
    ga('send', 'pageview', '/lensadvisor/select_prescription_method')
})
document.addEventListener('LensAdvizor:render:uploadForm', function(){
    ga('send', 'pageview', '/lensadvisor/enter_prescription_uploaded')  
})
document.addEventListener('LensAdvizor:render:manualEntryForm', function(){
    ga('send', 'pageview', '/lensadvisor/enter_prescription_manually')  
})
document.addEventListener('LensAdvizor:lens:rendered', function(){
    ga('send', 'pageview', '/lensadvisor/choose_lens')
})
document.addEventListener('LensAdvizor:lensOptions:rendered', function(){
    ga('send', 'pageview', '/lensadvisor/choose_options')
})
document.addEventListener('LensAdvizor:addOns:rendered', function(){
    ga('send', 'pageview', '/lensadvisor/choose_addons')
})
document.addEventListener('LensAdvizor:review:rendered', function(){
    ga('send', 'pageview', '/lensadvisor/review_selection')
})

As the customer goes through the LensAdvisor flow, we add information to the LensAdvizor.response object. You can use this object to view what the customer has already chosen in order to run custom code.

You can find metadata that has been set in the flows editor in the following storefront objects.

Once the modal has loaded
Flow: LensAdvizor.options.flowMetafields
Prescription Type: LensAdvizor.prescriptionTypes[n].metafields

Once lenses have loaded
Lens Group: LensAdvizor.lensGroups[n].metafields
Lens: LensAdvizor.lenses[n].metafields
  (or through the LensAdvizor.lensesByGroups object)
Lens Option: LensAdvizor.lenses[n].raw_options[n].metafields
Add Ons: LensAdvizor.lenses[n].add_ons_products[n].metafields

---

Note: Metadata that starts with an underscore will only be shown on the storefront and will not be shown in the Orders section.

// ADD PD TEXT
// Upload Form
document.addEventListener('LensAdvizor:render:uploadForm', function(){
	document.querySelector("#la-pd-fields-container").insertAdjacentHTML("afterend", "<br><p>Inserted Custom HTML</p>")
})
// Reading Form
document.addEventListener('LensAdvizor:render:readingForm', function(){
	document.querySelector("#la-pd-fields-container").insertAdjacentHTML("afterend", "<br><p>Inserted Custom HTML</p>")
})
// Manual Entry Form
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>"
	}
	// <imgSrc> is optional. If omitted, the default "info" image will be used.
	customToolTipLayout = LensAdvizor.getToolTipLayout(tooltipData, '<imgSrc>(optional)')
	// insert the tooltip into the HTML
	document.querySelector('.some-class').insertAdjacentHTML('afterend', customToolTipLayout)
})

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

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

You can add custom properties by adding key: value pairs to the following objects in Javascript.

Frame:
LensAdvizor.customBaseProductProperties

Lenses:
LensAdvizor.customLensProperties

Add-Ons:
LensAdvizor.customAddOnsProperties

It is possible to add custom Add On Products to the response via custom code

 // ADD A Custom Add On product 
	LensAdvizor.customAddOns.push({
		productId: 12345678901234, // Change to desired Product ID
		variantId: 12345678901234,// Change to desired variant ID of Product
		step: "Example Step",
		productTitle: "Example - $19 Extra",
		price: 19,
		properties: {}
	})

This is a helper function to remove a custom Add On step by step name.

 // Helper fuction to remove step by name
 var removeCustomAddOnStep = function(stepName){
    const indx = LensAdvizor.customAddOns.findIndex(v => v.step === stepName);
    LensAdvizor.customAddOns.splice(indx, indx >= 0 ? 1 : 0);
  }

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