X

Best Practices from Oracle Development's A‑Team

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

Derek Kam
Consulting Solutions Architect

In the final part of this blog series, we will be first, installing the custom product image widget that you have developed in Part 2 and secondly, customizing the OCC storefront product details layout page using the custom widget.

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 7: Creating widget installation package

  1. Zip the Widget Configuration folders and files in the WidgetRoot Folder. The zipped file should contain the ext.json and widget folder (including all subfolders).

    cec_occ_8

  2. Upload the zipped file using OCC->Settings->Extensions->Installed->Upload Extension

    cec_occ_9

Step 8: Changing OCC storefront product page

Note: Access token can be retrieved using Postman or SOAPUI using this API with you CEC username and password:  For example:  https://<CEC Server>/documents/integration?IdcService=GET_ACCESSABLE_PUBLISH_TARGETS&IsJava=1

The sample custom widget for this demonstration can be downloaded from this link: ProductImage.zip

  1. After the widget installation, go to Design->Collapse Menu->Product->Product Layout

    cec_occ_10

  2. Change to Grid View

    cec_occ_11

  3. Click to expand the Components tab, and you will see the product image widget you have just installed appear in the list of components.

    cec_occ_12

  4. Resize the product Details Widget, and drag the product image widget to the page and paste it next to the Product Details Widget. A Widget instance creation page will appear.  Click on Create New Widget Instance and give your widget a name (e.g. CEC Product Image Widget).

    cec_occ_13

  5. Click the cec_occ_14to open up your widget configuration page and enter the following information:

    • Server URL

    • Access Token

    • Rendition

  6. Then click Save to save the configuration.

    cec_occ_15-1

  7. Click the Preview button to preview your image product page.

    cec_occ_16
    cec_occ_1

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