Intro to SDK Load Method

Our default widget code is built to be loaded into DOM on actual browser page load. To load our widget programmatically, we provide an alternate load method to suit the different types of integrations.

This method also allows for better flexibility in the widget load in the load stack of your page since it gives you better control of when to load the widget.

Note that the loading of the <script> will determine the widget load sequence on your page when utilizing this method.

Namespacing

Function name olapic must be reserved for widget script. Please do not write any functions with this name in your page. For example, adding something like function olapic(){ //do something } in your code will break our widget.

Option 1: Using the callback

To load our widget via a function and to make sure that it injects the content, we have to use our SDK-JS.

Step 1. Place the <div>

Place the <div> anywhere you want the JS to inject the content into.

<div id="olapic_specific_widget"></div>

Step 2. Load in the build.min.js

This is the main build file that we use. Place this tag at your desired location (e.g., before <body>, or after/before other script tags that you want to bypass in the <head> tag.

<script type="text/javascript" src="//photorankstatics-a.akamaihd.net/81b03e40475846d5883661ff57b34ece/static/frontend/latest/build.min.js" async="async"></script>

Step 3. Place the doRender() function

The following doRender() function will be used by the callback function on the build script load.

function doRender(options){
  window.olapic.prepareWidget(options, {
      'renderNow' : true, // required
      'force' : true|false // optional - overwrites the widget index on load
  });
};

Important Note: Please set the force param to the desired boolean value.

Step 4. Include the callback function JS

Include the callback function & modify the key values using the reference guide below:

API_KEY required - string
- Place your Olapic API key in this key value
INSTANCE_ID required - string
- Place your Widget Instance ID in this key value (can be found in the "Widget Instances" tab in the Olapic Admin)
DIV_ID required - string
- Place the id of the <div> that the SDK should be injecting the content.
DYNAMIC_PRODUCT_ID optional - string
- Place the id of the <div> that the SDK should be injecting the content.
LANG_CODE optional - string
- Place the language code for the translation engine
useOpi optional - boolean
- Use a boolean value to turn on/off the #opi hash used by the media lightbox

onOlapicLoad() is a method that is invoked on the "load" of Olapic build.min.js file. This prepares the olapic object and invokes the doRender() on the SDK load event.

Please note that onOlapicLoad() is a callback function, which cannot be invoked directly calling the function in your code.

<script type="text/javascript">
function onOlapicLoad() {
    OlapicSDK.conf.set('apikey', 'API_KEY');
    window.olapic = window.olapic || new OlapicSDK.Olapic( function(o){
        window.olapic = o;        doRender({
            'id':'INSTANCE_ID', //required
            'wrapper':'DIV_ID', //required
            'tags':'DYNAMIC_PRODUCT_ID', //optional - only used when using "Dynamic" Instance Source
            'lang':'LANG_CODE', //optional - only used when using translation engine
            'useOpi':true|false //optional - only used to disable #opi hash used by media lightbox
        });
    });
};
</script>

Taking doRender() outside of the callback

doRender() can be taken outside of the onOlapicLoad() to place into user interaction event (e.g., click() method. This will require the olapic object on the page in order to work.

onclick Example:

<script type="text/javascript">
function onOlapicLoad() {
    OlapicSDK.conf.set('apikey', 'API_KEY');
    window.olapic = window.olapic || new OlapicSDK.Olapic( function(o){
        window.olapic = o;
    });
};
</script>
...
<a href="#" onclick="doRender(...)">Load Widget!</a>

Turning on Development mode

Place the following line after the apikey gets set:

OlapicSDK.conf.set('mode', 'development');

Full HTML example

See below for an example HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
    function doRender(options){
        window.olapic.prepareWidget(options, {
            'renderNow' : true,
            'force' : true // optional - overwrites the widget index on load
        });
    };
    function onOlapicLoad() {
        OlapicSDK.conf.set('apikey', 'XXXX');
        window.olapic = window.olapic || new OlapicSDK.Olapic( function(o){
            window.olapic = o;            doRender({
                'id':'XXXX',
                'wrapper':'olapic_specific_widget'
            });
        });
    };
    </script></head>
<body>    <div id="olapic_specific_widget"></div>    <script type="text/javascript" src="//photorankstatics-a.akamaihd.net/81b03e40475846d5883661ff57b34ece/static/frontend/latest/build.min.js" async="async"></script></body>
</html>

SDK Widget Load Method