Content and Experience Cloud and Oracle Commerce Cloud Integration - Part 2

In part 2 of this blog series, we will be developing a simple custom product image widget.

The product images are stored and managed in CEC and we will use the product ID in OCC to fetch the right image from CEC. When you are uploading the product images to CEC, you will need to make sure the name of the images within CEC must be exactly the same as the product ID in OCC.

In order to make it a generic widget, we will also develop a widget configuration screen which allow you to configure the hostname, access token and the image rendition you want to retrieve from the CEC.

In this demonstration, we will be using the CEC Content SDK. The Content SDK is a light-weight JavaScript wrapper on top of the Content REST APIs You can obtain the SDK using the following URL:

https://<CEC Server>/_sitescloud/sitebuilder/contentlayouts/content.js

This blog discusses the use of non-public Content SDK/API. The Content SDK/API might change without warning. The Content SDK/API might be published later as part of the Content & Experience Cloud.

Step 2: Creating widget folder structure and definition file

As described in OCC documentation, you will need to create the folder structure for your custom widget:

1. Create a Widget Root Folder ( for example C:\ ProductImage)

2. Decide on a name your for widget (for example “productimage”)

3. Under the widget root folder, create the following subfolder

   • <WidgetRoot>/widget/<WidgetName>

   • <WidgetRoot>/widget/<WidgetName>/config

   • <WidgetRoot>/widget/<WidgetName>/config/locales

   • <WidgetRoot>/widget/<WidgetName>/js

   • <WidgetRoot>/widget/<WidgetName>/less

   • <WidgetRoot>/widget/<WidgetName>/templates

Step 3: Creating widget view model

In this step, we will be creating a widget view model to

• Retrieve the widget configuration value.

• Call CEC Delivery API to search for an image using the CEC digital asset name field and the assess token. The asset name will be the product ID in OCC.

• Retrieve the ID of the image.

• Get the rendition URL of the published image and insert an image element using jQuery.

1. Download and copy the content.js file to <WidgetRoot>/widget/<WidgetName>/js/

2. Copy and paste the following code to <WidgetRoot>/widget/<WidgetName>/js/productimage.js:

define(
    //-------------------------------------------------------------------  
    // PACKAGE NAME  
    //-------------------------------------------------------------------  
    //-------------------------------------------------------------------  
    // DEPENDENCIES  
    //-------------------------------------------------------------------  
    ['jquery', './content.js'],
    //-------------------------------------------------------------------  
    // MODULE DEFINITION  
    //-------------------------------------------------------------------  
    function ($, contentSDK) {
        "use strict";
        var cecURL;
        var accessToken;
        var productID;
        var rendition;
        var renditionURL;
        return {
            onLoad: function (widget) {
                console.log("Getting widget configuration");
                cecURL = widget.cecServerURL();
                accessToken = widget.accessToken();
                rendition = widget.rendition();
                console.log("CEC Server URL : " + cecURL);
                console.log("CEC Access Token : " + accessToken);
            },
            beforeAppear: function (page) {
                var widget = this;
                productID = widget.product().id();
                console.log("Product ID : " + widget.product().id());
                console.log("Create a CEC SDK content delivery client ");
                var contentClient = contentSDK.createDeliveryClient({
                    'contentServer': cecURL,
                    'accessToken': accessToken
                });
                console.log("Calling CEC SDK getItems function");
                contentClient.getItems({
                    'search': 'field:name:startswith=' + productID
                }).then(function (data) {
                    if (data.count === 0) {
                        console.log("No image found");
                    } else {
                        console.log('Content ID : ' + data.items[0].id);
                        renditionURL = contentClient.getRenditionURL({
                            'itemGUID': data.items[0].id,
                            'type': rendition
                        });
                        console.log("Rendition URL : " + renditionURL);
                        $('#cecImage').prepend('');
                    }
                }, function (error) {
                    console.log('Content SDK Error getting data: ' + error);
                });
            }
        };
    });

Step 4: Creating the widget configuration

In this step, we will be creating a definition file and a resource bundle for the widget.  The widget configuration will have the following properties:

• CEC Server URL: The URL of CEC Instance

• Access Token: Access Token is unique to an instance of CEC, it can be retrieved via CEC API using your CEC username and password ( https:// <CEC Server>/documents/integration?IdcService=GET_ACCESSABLE_PUBLISH_TARGETS&IsJava=1)

• Rendition: Currently, CEC only support Default and Thumbnail rendition.

{
    "widgetDescriptorName": "Product Image Widget",
    "properties": [{
        "id": "cecServerURL",
        "type": "stringType",
        "name": "cecServerURL",
        "helpTextResourceId": "cecServerURLHelpText",
        "labelResourceId": "cecServerURLHelpTextLabel",
        "defaultValue": "",
        "required": true,
        "maxLength": 100,
        "minLength": 3
    }, {
        "id": "accessToken",
        "type": "stringType",
        "name": "accessToken",
        "helpTextResourceId": "accessTokenHelpText",
        "labelResourceId": "accessTokenHelpTextLabel",
        "defaultValue": "",
        "required": true,
        "maxLength": 100,
        "minLength": 3
    }, {
        "id": "rendition",
        "type": "optionType",
        "name": "rendition",
        "helpTextResourceId": "renditionHelpText",
        "labelResourceId": "renditionHelpTextLabel",
        "defaultValue": "default",
        "options": [{
            "id": "renditionDefault",
            "value": "default",
            "labelResourceId": "renditionDefaultLabel"
        }, {
            "id": "renditionThumbnail",
            "value": "thumbnail",
            "labelResourceId": "renditionThumbnailLabel"
        }]
    }]
}

1. Copy and paste the following code to <WidgetRoot>/widget/<WidgetName>/config /config.json

2. The widget configuration has the following resource bundle for label and help text. Copy and paste the following code to <WidgetRoot>/widget/<WidgetName>/config/locales/en.json.

{
    "resources": {
        "cecServerURLHelpText": "Please enter the CEC Server URL (http(s)://hostname:port)",
        "cecServerURLHelpTextLabel": "CEC Server URL",
        "accessTokenHelpText": "Access token to access the CEC DAM resource",
        "accessTokenHelpTextLabel": "Access Token",
        "renditionHelpText": "Please select the desired image rendition",
        "renditionHelpTextLabel": "Rendition",
        "renditionDefaultLabel": "Default",
        "renditionThumbnailLabel": "Thumbnail"
    }
}

Step 5: Creating widget configuration, template and style

{
    "name": "Product Image",
    "javascript": "productimage",
    "pageTypes": ["product"],
    "jsEditable": true,
    "config": {},
    "imports": ["product"]
}

<div id="cecImage"></div> 

1. Copy and paste the following code to <WidgetRoot>/widget/<WidgetName>/json

2. Copy and paste the following code to <WidgetRoot>/widget/<WidgetName>/templates/template

3. Copy and paste the following code to <WidgetRoot>/widget/<WidgetName>/less/widget.less

.h1 {     padding-top: 20px;     padding-left: 40px; } 

Step 6: Creating an extension configuration file
Before you can upload/install the OCC custom widget, you will need to create an extension ID in OCC and configure it in your custom widget.

1. Login to OCC and go to Settings->Extension->Developer tab

2. Click Generate ID button to create a new extension ID

3. Copy and paste the extension ID to /ext.json.

{
    "extensionID": "7bc07123-9a4f-4082-856b-aa30fe887749",
    "developerID": "999999",
    "createdBy": "Oracle Corp.",
    "name": "Product Image",
    "version": 1,
    "timeCreated": "2017-03-01",
    "description": "Product Images in CEC"
}

We have now completed Part 2, you are now ready to move on to Part 3 of this blog series to install and customize the OCC product detail page.