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
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).
Upload the zipped file using OCC->Settings->Extensions->Installed->Upload Extension
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
After the widget installation, go to Design->Collapse Menu->Product->Product Layout
Change to Grid View
Click to expand the Components tab, and you will see the product image widget you have just installed appear in the list of components.
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).
Then click Save to save the configuration.
Click the Preview button to preview your image product page.