Overview

Many sites offer "dynamic content" to be presented to the end user. By "dynamic content" we're referring to some action that the user can take that will change what information the site presents them with.

Common examples would be changing colours for the item on the product display page (PDP), or showing differents sizes of an item. These are dynamic changes that need to get picked up by the Eyekandy Service in order that the appropriate Eyekandy content is always present for your users.

This page covers how to handle circumstances where the UPI (Unique Product Identifier) was changed and the process of updating the Eyekandy script tags.

Important: Web Components are not affected by this issue as they will cascade any updates from their tags into the component - this means they will "automatically update".

Example: Changing a Product's Colour

Listed below you will find an example using changing color to help show what options Eyekandy offers for this common requirement.

Breakdown

There exists 1 product, "Home Speaker System 3000", and its 3 product variants: "Red", "Blue", and "Yellow". The variant currently visible on the site is the "Red" one.

The SKUs for this product are listed below:

• HSS3000-RED
• HSS3000-YELLOW
• HSS3000-BLUE

The user can change the product they are viewing by selecting one of the colour options in the dropdown.

When this happens, the site will update with the differing product variation, however the code that was used to include the AR content from Eyekandy via Script Tags did not know about this colour change and has not updated.

Solution

The solution to this issue is to update the value in the Script Tags on the page using the exposed Eyekandy API.

Updating Existing Eyekandy Script Tags

When the Eyekandy library is loaded it looks at the DOM to identify if there are any Eyekandy Script Tags present, if there are it then "watches" the Script Tags for changes.

When a change is detected, an event is emitted that signals to the Eyekandy content on the page that a value has changed and it will need to re-render the content in accordance with the new value.

Using the exposed API

There are a number of exposed methods that become available after loading the Eyekandy content onto the page, see the breakdown below for more information.

Breakdown