Implementing Multiple widgets on single page

In order to load two widgets on a same page, you can implement the Olapic widget code using two different ways:

SDK Load Method
Multiple <div> method

SDK Load Method

First, we'll go over how to load two Olapic widgets on a single page using the SDK load method:

Code Example:

<div id="WRAPPER_ID_FIRST_INSTANCE"></div> //Container for the first widget
<div id="WRAPPER_ID_SECOND_INSTANCE"></div> //Container for the second widget
...//Include initiai build script - PATH_TO_BUILD can be found in the code output from the Widgets tab in the admin.
<script type="text/javascript" src="PATH_TO_BUILD" ></script> //Snippet to utilize JavaScript SDK
<script type="text/javascript">
    function onOlapicLoad(){
        OlapicSDK.conf.set('apikey', 'CLIENT_APIKEY'); //Grab your API key from the settings tab        window.olapic = window.olapic || new OlapicSDK.Olapic( function(o){
            window.olapic = o;
            //first Widget
            renderWidget({'id':'WIDGET_INSTANCE_ID', 'wrapper':'WRAPPER_ID_FIRST_INSTANCE'}); //Reference to the container of first widget
            //second Widget
            renderWidget({'id':'WIDGET_INSTANCE_ID', 'wrapper':'WRAPPER_ID_SECOND_INSTANCE'}); //Reference to the container of first widget
        });
    };    function renderWidget(options){
        var settings = {
            wrapper: options.wrapper,
            id : options.id // instance's hash
        };
        window.olapic.prepareWidget(settings, { 'renderNow' : true });
    }
</script>

Note: Please know that renderWidget function is written to provide more clarity in the code syntax. As long as you call window.olapic.prepareWidget({INSTANCE_SETTINGS}, {'renderNow' : true }) with the right INSTANCE_SETTINGS argument (this needs to be inside the window.olapic object) , you're good to go.

See below for a way to load 2 widgets without the renderWidget function:

Code Example:

function onOlapicLoad(){
    OlapicSDK.conf.set('apikey', 'CLIENT_APIKEY'); //Grab your API key from the settings tab    window.olapic = window.olapic || new OlapicSDK.Olapic( function(o){
        window.olapic = o;
        //first Widget
        window.olapic.prepareWidget({'id':'WIDGET_INSTANCE_ID', 'wrapper':'WRAPPER_ID_FIRST_INSTANCE'}, { 'renderNow' : true });        //second Widget
        window.olapic.prepareWidget({'id':'WIDGET_INSTANCE_ID', 'wrapper':'WRAPPER_ID_SECOND_INSTANCE'}, { 'renderNow' : true });
    });
};

SDK Load Method References:

PATH_TO_BUILD
- url to the latest SDK build (this can be created / found in the Widgets tab)
WIDGET_INSTANCE_ID
- instance's hash (this can be created / found in the Widgets tab)
WRAPPER_ID_FIRST_INSTANCE, WRAPPER_ID_SECOND_INSTANCE
- <div> container id. You can set this to whatever you want.
{ 'renderNow' : true/false }
- flag to let the SDK know if it should display the widget.

Multiple <div> Method

Multiple <div> method allows you to load two widgets without the "verbose" SDK Load Method.

Full code Example:

<div id="{FIRST_WRAPPER_ID}" 
        data-olapic-widget="{FIRST_WIDGET_INSTANCE_ID}" 
        data-use-opi="{true/false}"
        data-lang="{LANG}"
        data-tags="{TAGS}"></div>//Container for the second widget
<div id="{SECOND_WRAPPER_ID}" 
        data-olapic-widget="{SECOND_WIDGET_INSTANCE_ID}" 
        data-use-opi="{true/false}"
        data-lang="{LANG}"
        data-tags="{TAGS}"></div><script 
    type="text/javascript" 
    src="{PATH_TO_BUILD}"
    data-apikey="{CLIENT_APIKEY}"
    data-olapic-search-divs="true"
    async="async"></script>

Step 1. Place the <divs>

First, place the <div> codes with the additional data attributes. These data attributes will give the <script> tag (which gets added later on) information about what this <div> will contain.

<div id="{FIRST_WRAPPER_ID}" 
        data-olapic-widget="{FIRST_WIDGET_INSTANCE_ID}" 
        data-use-opi="{true/false}"
        data-lang="{LANG}"
        data-tags="{TAGS}"></div>//Container for the second widget
<div id="{SECOND_WRAPPER_ID}" 
        data-olapic-widget="{SECOND_WIDGET_INSTANCE_ID}" 
        data-use-opi="{true/false}"
        data-lang="{LANG}"
        data-tags="{TAGS}"></div>

See the following div tag attribute information:

data-olapic-widget required - string
- ID of the widget instance. This value can be found in the Widget Instances page of Olapic admin
data-use-opi optional - boolean
- Toggle to enable/disable the #opi hash that gets added to the URL for deeplinking media lightbox.
- Note: All the boolean values should be in lowercase. For example, data-olapic-search-divs should be true, not TRUE.
data-lang optional - string
- Value for defining region.
- The naming convention for the language's name is based on the ISO-639 language code (e.g. pt for Portuguese) followed by the ISO-3166 country code (e.g. _PT for Portugal or _BR for Brazil).
data-tags optional - string
- Value for product identifier
- This attribute must be present for widgets that show product/page specific content.

Step 2. Place the <script>

After the <divs> are created, go ahead and put in the <script> that will hold Olapic's build file.

<script 
    type="text/javascript" 
    src="{PATH_TO_BUILD}"
    data-apikey="{CLIENT_APIKEY}"
    data-olapic-search-divs="true"
    async="async"></script>

See the following script tag attribute information:

src - required
- Location of the Olapic build file. This value can be found in the Widget Instances page of Olapic admin.
data-apikey - required
- Your Olapic API key. This value can be found in the Widget Instances or the Settings page of Olapic admin.
data-olapic-search-divs - required
- This attribute is required only if you are using this method to load multiple widgets on a page.