Summary

The elements that Eyekandy adds to your page are Web Components, these exist in two parts:

• Light DOM
• Shadow DOM

The "Light DOM" behaves exactly as expected for something that inherits from the HTMLElement base class, however elements/events within the "Shadow DOM" must be queried/observed by targetting the "Shadow DOM" and querying the element/event from there.

As this is impractical for use, Eyekandy provides a straightforward system of events that are emitted against the document.documentElement DOM entry, see below for more information on this.

Event Types

eyekandy-button-click

• Emitted when an Eyekandy button is clicked.

eyekandy-delivery

• Emitted when a delivery of an Eyekandy button completes.

eyekandy-add-to-cart

• Emitted when Eyekandy detects an add to cart event.

eyekandy-ar-start

• Emitted when a user launchers into AR on an AR-compatible device.

Observing the Events

To observe these events, add something similar to the code below.

Note, this must be added before the Eyekandy code is loaded otherwise events may be lost

document.documentElement.addEventListener("eyekandy-button-click", (event) => {console.warn(event)})
document.documentElement.addEventListener("eyekandy-delivery", (event) => {console.warn(event)})
document.documentElement.addEventListener("eyekandy-add-to-cart", (event) => {console.warn(event)})
document.documentElement.addEventListener("eyekandy-ar-start", (event) => {console.warn(event)})

The syntax of the event is shown below, note only the useful keys are shown:

{
  "detail": {
    "arid": "700200060",
    "detail": "button",
    "ean": null,
    "mpn": null,
    "service": "ar-models",
    "sku": "31664"
  }
}

Example Code

A complete example is shown below, note some sections are removed for ease of reading.

//
//  :page-load:
//  Add our event handler for button clicks.
let eyekandyEventCallback = (event) => {
  //
  //  Do something with the event.
  console.warn(event)
  console.warn(`eyekandy event emitted: '${event.type}' for the '${event.detail.service}' service, sku: '${event.detail.sku}', arid: '${event.detail.arid}'`)
}
document.documentElement.addEventListener("eyekandy-button-click", eyekandyEventCallback)

//
//  :adding-eyekandy:
//  Add the eyekandy library to the DOM
//  <script tags> or <web components>
// ...

//
//  :runtime:
//  The user clicks the button, and the handler will print it out to the console.
//  Event information is now in the console.