Background

This widget swap script will allow an Olapic client to render a category widget to show category-level photos if a product widget has zero user photos assigned. At the moment, a client can surface category-level photos for only one category.

For example, let's say there is a product called "Rad T-Shirt" with product id '999'. This product has been associated to a category called 'T-shirts' in your Olapic product feed and that category has an id of '999-tshirt'. If the "Rad T-shirt" stream in Olapic has 0 photos then code below can show photos from the category called 'T-shirts'. If a product has more than one category assigned then you would have to select one category to show photos from. In addition, if a product and a category associated with the product has 0 photos assigned, then Olapic will render the category widget with 0 photos, which you can customize to show as an empty widget (Example of an empty widget).

Prerequisites

A product feed with category level information (some changes might be required if you are not on an Olapic compliant feed)
You must be on the latest Olapic framework (Current Version: V2)

Instructions

In Olapic, create two widget instances: One instance using dynamic-stream and another using dynamic-category under the 'Source' section
Remove all previous Olapic widget code from the page first
Place the Olapic build file in a script tag
Once the above step has been completed, please paste the script below in a separate file and include in the page you would like to render the Olapic widgets and please make sure this script is after the build file from the above step
Place this div after the build file and the swap script: <div id="olapic_specific_widget"></div>

Notes

[olapic_category_instance_id] = your Olapic category widget instance ID (Screenshot)
[olapic_product_instance_id] = your Olapic product widget instance ID (Screenshot)

var protocol = window.location.protocol,
    baseURL = protocol + '//photorankapi-a.akamaihd.net',
    authToken = '[your_olapic_api_key]',
    apiVersion = 'v2.2',
    customerID = [your_olapic_account_id],
    productID = '[product_id]',
    categoryID = '[category_id]';function onOlapicLoad(){
    OlapicSDK.conf.set('apikey', authToken);
    window.olapic = window.olapic || new OlapicSDK.Olapic(function(o){
        window.olapic = o;
        oQuery.ajax({
            url: baseURL+'/customers/'+customerID+'/streams/bytag/'+productID+'?auth_token='+authToken+'&version='+apiVersion,
            dataType: 'jsonp',
            type: 'GET',
            success: function(response){
                oQuery.ajax({
                    url: protocol+response.data._embedded['media:recent']._links.self.href+'?auth_token='+authToken+'&version='+apiVersion,
                    dataType: 'JSON',
                    type: 'GET'
                }).error(function(error){
                    window.olapic.prepareWidget({'id':'[olapic_category_instance_id]', 'wrapper':'olapic_specific_widget', 'tags' : categoryID}, {'renderNow' : true});
                }).success(function(result){
                    window.olapic.prepareWidget({'id':'[olapic_product_instance_id]', 'wrapper':'olapic_specific_widget', 'tags' : productID}, {'renderNow' : true});
                });
            }
        });
    });
}

Configure a Category Swap Widget

Instructions