For the people wiring it up.

Our goal is for every customer to be totally satisfied with their purchase. If this isn't the case, let us know and we'll do our best to work with you to make it right.

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

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

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

// ---Setup tracking of Virtual Pageviews for Google Analytics 4--- 
document.addEventListener('LensAdvizor:prescriptionTypes:rendered', function(){
    gtag('event', 'page_view', { 'page_path': '/lensadvisor/select_prescription_type' });
});
document.addEventListener('LensAdvizor:render:submissionMethods', function(){
    gtag('event', 'page_view', { 'page_path': '/lensadvisor/select_prescription_method' });
});
document.addEventListener('LensAdvizor:render:uploadForm', function(){
    gtag('event', 'page_view', { 'page_path': '/lensadvisor/enter_prescription_uploaded' });
});
document.addEventListener('LensAdvizor:render:manualEntryForm', function(){
    gtag('event', 'page_view', { 'page_path': '/lensadvisor/enter_prescription_manually' });
});
document.addEventListener('LensAdvizor:lens:rendered', function(){
    gtag('event', 'page_view', { 'page_path': '/lensadvisor/choose_lens' });
});
document.addEventListener('LensAdvizor:lensOptions:rendered', function(){
    gtag('event', 'page_view', { 'page_path': '/lensadvisor/choose_options' });
});
document.addEventListener('LensAdvizor:addOns:rendered', function(){
    gtag('event', 'page_view', { 'page_path': '/lensadvisor/choose_addons' });
});
document.addEventListener('LensAdvizor:review:rendered', function(){
    gtag('event', 'page_view', { 'page_path': '/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.

Metadata can be added to any object in LensAdvisor as a key:value pair. Metadata entry can
be found in the ( ⠇) sub menu to the right of each object in the flow.

This can be useful to pass data to the order for identification during fulfilment, or for custom code during the LensAdvisor flow.

For instance, one store uses a key of _hideIfCountryIs (with the value being the country code) in order to hide certain elements in the flow when the country matches.

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

Once the modal has loaded
Flow: LensAdvizor.options.flowMetafields
Prescription Type: LensAdvizor.prescriptionTypes[n].metafields
Example:
to get the current prescription type metadata >
LensAdvizor.prescriptionTypes.find(type => type.name === LensAdvizor.response.prescriptionType).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 keys that start with an underscore will not be shown in LensAdvisor > Orders.

Metadata can be added to any object in LensAdvisor as a key:value pair. Metadata entry can
be found in the ( ⠇) sub menu to the right of each object in the flow.

This can be useful to pass data to the order for identification during fulfilment, or for custom code during the LensAdvisor flow.

For instance, one store uses a key of _hideIfCountryIs (with the value being the country code) in order to hide certain elements in the flow when the country matches.

Lab Metadata

Lab Metadata is a series of key:value pairs.

This data will be used to modify the request to the selected lab's API.

Example:

Key: RELensMaterial
Value: PO-58-NONE-NONE-00

Calculating and Cascading Metadata

By default, if the same key exists at a lower level in the metadata chain, the value of the lower level will replace the value of the higher level for the same key.

Example:

Lens Level:
Key: RELensMaterial
Value: PO-58-NONE-NONE-00

Lens Option Level:
Key: RELensMaterial
Value: PO-67-POLR-BRWN-00

Final Result:
Key: RELensMaterial
Value: PO-67-POLR-BRWN-00

Using Variables in Metadata

Metadata can have variables where the lower level of metadata will instead replace parts of the higher level of metadata. This is accomplished by 'creating a variable' and 'setting a variable'.

Creating a Variable in a String

This is done by using the format of [variable=value].

Setting a Variable in a String

This is done by using the format of {{variable=value}}.

Example:

Lens Level:
Key: RELensMaterial
Value: PO-58-[lens_type=NONE]-[lens_color=NONE]-00

Lens Option Level:
Key: RELensMaterial
Value: {{lens_type=POLR}}{{lens_color=GREY}}

Final Result:
Key: RELensMaterial
Value: PO-67-POLR-GREY-00

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

document.addEventListener('LensAdvizor:render:manualEntryForm', function(){
  document.querySelector('[data-form=manually] .la-upload-wrapper').insertAdjacentHTML("afterend",`
    <div class='la-rx-verify'> 
      <input type='checkbox' id='la-rx-verify-checkbox' required> 
      <label for='la-rx-verify-checkbox' class='la-rx-verify-label'>
        I confirm I've entered my prescription correctly.
      </label>
    </div>
  `)
})

// First get the layout
let tooltipData = {
    "title":"Tooltip Title",
    "content": "Tooltip Content HTML <h1>awesome</h1>"
}
// imgSrc is optional. If omitted the default image will be used
customToolTipLayout = LensAdvizor.getToolTipLayout(tooltipData, '<imgSrc>')
// 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>'
})

 // Changing icons
document.addEventListener('LensAdvizor:init:complete', function(){
	LensAdvizor.svg.upload = '<svg code>'
})

Icons available to change:

• LensAdvizor.svg.upload
• LensAdvizor.svg.edit
• LensAdvizor.svg.email
• LensAdvizor.svg.attachment
• LensAdvizor.svg.check
• LensAdvizor.svg.tooltip
• LensAdvizor.svg.preview
• LensAdvizor.svg.doc
• LensAdvizor.svg.onfile
• LensAdvizor.svg.camera

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

 // Changing icons
document.addEventListener('LensAdvizor:init:complete', function(){
	LensAdvizor.svg.upload = '<svg code>'
})

Icons available to change:

• LensAdvizor.svg.upload
• LensAdvizor.svg.edit
• LensAdvizor.svg.email
• LensAdvizor.svg.attachment
• LensAdvizor.svg.check
• LensAdvizor.svg.tooltip
• LensAdvizor.svg.preview
• LensAdvizor.svg.doc
• LensAdvizor.svg.onfile
• LensAdvizor.svg.camera

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

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