Displaying product data in the UGC viewer

UGC allows you to display product information in the popup window that's shown when the user clicks on an image in a carousel or media wall. To make use of this feature you'll first need to enrich images with one or more SKUs, as explained on the enrichment page. You'll need to write some code to retrieve product information using the SKU and return this when requested by the UGC player. To do this you'll make use of the ecomm bridge, a library that connects the UGC player to your ecommerce system.

On this page we'll explain the steps required to make use of the product data feature.

Before you begin

Before you get started you will need to:

  • Set up a UGC feed to ingest assets. Enrich your chosen assets with one or more SKUs
  • Generate the player code. The example shown on this page will be added to the player code that you've generated.

The image below is enriched with two SKUs. When the user clicks on this image to display it in the popup window, you will be sent a request to return product information based on each of these SKUs.

An image enriched with two SKUs
An image enriched with two SKUs

An example of some product data is shown below, showing thumbnail images, price and placeholders for the product name (not set in this example). When the user clicks the "Buy Now" button your code will be sent the SKU of the product the user selected. You should then open the appropriate product details page allowing the user to get more information and purchase the product.

The window shown when the user clicks on an image
The window shown when the user clicks on an image

Setting up the ecomm bridge

In order to set up the link between the UGC player and your own code, you'll need to set up the ecomm bridge and some related objects.

Include the ecomm bridge code

Include the ecomm bridge code in the <head> section of your generated UGC player code.

<script type="text/javascript" src="http://s1.adis.ws/viewers/ecomm-bridge-generator-im/ecomm-bridge-generator-im.min.js"></script>

Initialize the ecomm bridge and site objects

You can set up the ecommBridge and ecommBridge.site objects as follows:

 if(!window.ecommBridge) {
        window.ecommBridge = {};
     }

 if(!window.ecommBridge.site){
        window.ecommBridge.site = {};
   }

Specify the viewer capabilities

The next step is to tell the UGC viewer that your code supports product data. You'll also want to support the "quickView" functionality, which allows the user to click "Buy Now" and be taken to the related product details page.

if(!window.ecommBridge.capability){

window.ecommBridge.capability = {

  'quickView':true,
  'getProduct':true,

   };
}

Define a function to retrieve product data

Define a JavaScript function that will be called by the UGC player when the user clicks on an image to display the popup window. The getProduct function is defined as follows:

ecommBridge.site.getProduct([{"id":"identifier"}], callback);

For each image that is enriched with a SKU, the ecomm bridge will call the specified getProduct method, passing in an array of SKUs in the format: "id":"identifier".

For example, when clicking on the image shown above which is enriched with two SKUs, this is the array sent to the getProduct method:

[{id: "23456b"}, {id: "345678c"}]

The callback will return an error code and an array of one or more product objects:

callback = function(error, [{products}])

An example product object is shown below.

{  
   "sku":"345678c",
   "name":"Example Product Name",
   "url":"http://www.example.com",
   "thumbnail":"https://i1.adis.ws/i/ampproduct/white-top?w=200",
   "image":"https://i1.adis.ws/i/ampproduct/white-top?w=500",
   "price":28.99,
   "priceCurrency":"GBP"
}

Note that not all these properties are used by the UGC viewer.

Assign your function to the getProduct field of ecommBridge.site:

window.ecommBridge.site.getProduct = getProductData;

Return the product data

An example getProduct function is shown below. It goes through the array of SKUs sent to the function as parameters and returns a product object for each one. You will need to add the code to retrieve product information from your ecommerce system given a SKU.

In the example, the product is populated with sample values.

function getProductData(products,callback){

        function getProduct(sku){
            // in here you would retrieve data from your ecommerce system for the product with the specified SKU
            // and use this to create a product

            // For this example, we generate and return a product with sample data

            return {                     
              "sku": sku,
              "name":"Example Product Name",
              "url":"http://www.example.com",
              "image": "https://i1.adis.ws/i/ampproduct/white-top?w=500",
              "thumbnail": "https://i1.adis.ws/i/ampproduct/white-top?w=200",
              "price": 9.99,
              "priceCurrency":"USD"
            }
        }
    var returnedProducts = [];

    // go through the array of SKUs and retrieve product data for each one
    // and add product data to the returnedProducts array

    for (var i=0;i<products.length;i++){
        returnedProducts.push(getProduct(products[i].id));
    }

   callback(null, returnedProducts);
}

The callback function will return the array of products to the viewer and the product information will be displayed.

Viewer interaction: launching a quickview

In order to be notified when the user clicks the "Buy Now" button, set up an interaction function:

if(!window.ecommBridge.interaction){
        window.ecommBridge.interaction = {
            'quickview':function(sku){

                // the user has clicked the Buy Now button
                // find the product details URL given this SKU
                // open the product details window                
            }
        };
    }

This function will sent the product SKU as a parameter. You can then find the product details URL given this SKU and launch this URL in a new window. You may want the values returned from the getProductData method, rather than retrieving the URL from your ecommerce system again.

Example

Click here to see an example that generates sample product data and displays it in the UGC viewer.

Enriching images with a URL

You can enrich an image with a URL rather than a SKU, as shown in the image below.

Enriching an image with a URL
Enriching an image with a URL

Only the "Buy Now" button will be displayed in the product popup window, without any product information. Clicking "Buy Now" will take the user to the URL that the image was enriched with.

Clicking Buy Now will launch the URL that the image was enriched with
Clicking Buy Now will launch the URL that the image was enriched with

results matching ""

    No results matching ""