X

Best Practices from Oracle Development's A‑Team

Render CEC Content Item in Oracle Commerce Cloud

Derek Kam
Consulting Solutions Architect

In my previous blog, I described how to render digital assets (images) in Oracle Commerce Cloud (OCC) using custom widget. In this blog, I will show you how to render content item with content layout component in OCC. This is a good use case when you have a promotion item that you want to display in OCC.

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.

In this blog, I will show and guide you on how to:
1. Upload images.
2. Create/Import the content layout component for the promo content type.
3. Create a collection
4. Create the promo content type.
5. Create one or more content item using the promo content type.
6. Create an OCC widget.
7. Upload and using the OCC widget.

Step 1: Upload the images to your CEC instance
Download the images from this link and unzip it to your local folder. Drag and drop all images to the Content->Digital Assets screen.

CECContentItem_Picture1

Step 2: Import the Content Layout Component into your CEC instance
You will need to download the components used in this demonstration from this link.

Next, navigate to the Experience->Components screen, then click on the Create->Import Component menu.

CECContentItem_Picture2

Click the upload button to select the component zip file to upload or drag the downloaded component zip file onto the “Pick A File” screen, select the component zip file to import the content layout component.

CECContentItem_Picture3

After you have imported the content layout component, you will need to publish the component. Select the component first, then select the publish link to publish the component. Please make sure you publish both Promo-Default and Promo-Details components.

CECContentItem_Picture4

Step 3: Create a collection
Navigate to Content->Collections, then click the “Create” button to create a new collection called Promotion.
CECContentItem_Picture18

Step 4: Create the Promo Content Type
Navigate to Content->Content Items->Manage Types, then click the “Create” button to create a new content type.

CECContentItem_Picture5

You will be able to create the promo content type using the following attributes:

Content Type Name: Promo

Name: Image Banner 1440x720
Data Field: Media
Id: promo_image_banner
Documents: Unselected

Name: Image Mobile Header 415x254
Data Field: Media
Id: promo_image_mobile_header
Documents: Unselected

Name: Image Mobile Thumbnail 115x85
Data Field: Media
Id: promo_image_mobile_thumbnail
Documents: Unselected

Name: Summary
Data Field: Large Text
Text area: Rich-text editor

Name: Content
Data Field: Large Text
Text area: Rich-text editor

Name: TextPosition
Data Field: Text
Single text box: Single-select menu
Options: Left
Center
Right

Name: TextColor
Data Field: Text
Single text box: Single-select menu
Options: Light
Dark

Layout Styles:
Default: Promo-Default
Details: Promo-Details

CECContentItem_Picture6

Step 5: Create and publish a content item using the Promo Content Type
In Step 4, you will be able to create a content item using the promo content type that you have created in the previous step. Navigate to Content->Content Items, then click the "Create" button to create a new content item using the promo content type.
CECContentItem_Picture16
CECContentItem_Picture17

Collection: Promotion
Name: Buy 1 Get 1 Free!
Description: Bring a friend, on us
Image Banner (1440x720): Promo_Banner_1_1440x720.jpg
Image Mobile Header (410x254): Promo_Mobile_Header_1_415x254.jpg
Image Mobile Thumbnail (115x85): Promo_Mobile_Thumb_1_115x85.jpg

Summary:
We brew our special Aroma Roast coffee every day in our coffee shops. A dynamic cup; both deep and pleasantly bright. Smooth cream balanced with chocolate and dark cherry, with just a touch of caramel. Crafted from the major coffee growing regions, each element is roasted individually, then blended together after roasting.

Purchase a cup of our special brew and get one free for a friend.

Content:
We brew our special Aroma Roast coffee every day in our coffee shops. A dynamic cup; both deep and pleasantly bright. Smooth cream balanced with chocolate and dark cherry, with just a touch of caramel. Crafted from the major coffee growing regions, each element is roasted individually, then blended together after roasting.
TextPosition: Right
TextColor: Light

Step 6: Create a OCC Widget
In my previous blog, I have demonstrated to you on how to create an OCC widget. To recap, below are the steps:

  1. Create a Widget Root Folder ( for example C:\ CECContentItem)
  2. Decide on a name your for widget (for example “contentItem”)
  3. Under the widget root folder, create the following subfolder
    • /widget/
    • /widget/config
    • /widget/config/locales
    • /widget/js
    • /widget/less
    • /widget/templates
  4. Creating widget view model
  5. Creating the widget configuration
  6. Creating widget configuration, template and style
  7. Creating an extension configuration file
  8. Creating widget installation package

You can download the OCC Custom Widget used in this demonstration here <>. In the widget, you will find the following widget view model, template, style and configuration files:

  1. config.js: This JavaScript is used to setup the required JavaScript libraries for the customer widget. To render the content item with content layout component in this demonstration, you will need to import few required libraries, for example: Mustache, Jquery, jquery-ui etc…
  2. CECContentItem_Picture7

  3. content.js: This is the CEC content SDK.
  4. contentitem.js: This is the main JavaScript file for this widget, it contains all the logic to render the content item in OCC.
  5. CECContentItem_Picture8

  6. config.json: This is the widget instance configuration definition file.
  7. CECContentItem_Picture9

  8. widget.less: This is the stylesheet for the widget
  9. display.template: This is the HTML template for the widget.
  10. widget.json: The widget configuration file.
  11. CECContentItem_Picture10

  12. ext.json: This is the widget extension configuration file. It is required when you import your custom widget into OCC. You will need to generate the extensionID for this widget to use in your OCC instance.'

CECContentItem_Picture11

Step 7: Upload and using the widget
Follow the steps in my previous blog to upload and install the widget to your OCC instance. Once you finish the widget installation, navigate to OCC designer page. In this demonstration, we will insert the widget in the “Home” page layout. Drag the CEC Content Item widget component to the Home page, and give it a name, for example “Promotion Content Item Widget”.

CECContentItem_Picture12

Enter your CEC environment information into the widget instance configuration screen:

CECContentItem_Picture13

Click the preview button to preview the page

CECContentItem_Picture14

CECContentItem_Picture15

You can download the widget sample code from this link

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha

Recent Content