Commerce Composer Customizations

Introduction
PFB the four main components of the online catalog navigation pages designed by the commerce composer architecture-
1. Page
2. Template
3. Layout
4. Widget

1. Page
We need to choose the targeted or create the new page.


2. Template 
We can make use of the OOB templates built on fluid grid system to fit in the intended UI structure.
If not addressed by the OOB template then we can create our own template by following below steps-

a. Defining the storefront assets for Commerce Composer layout templates
b. Registering a Commerce Composer layout template
c. Testing a custom layout template in Management Center


3. Layout
By leveraging the OOB/custom template underneath, we can fit in the custom/OOB widgets on the layout.

4.Commerce Composer Widgets
Depending upon the need we might have to create a fresh widget or customize the OOB widget by creating a replica or using the pure OOB widget.

Please find below the high level steps to create a custom commerce composer widget-
Create Widget's Template base xml & base files generation
A. Create a temporary project which will hold the template assets for the newly creates widget,
B. Create a XML pattern input file in it with below format and supply the entries in it  as per the need-
e.g.
<pageLayout vendor="myCompany" targetFolder="NewWidgetProject">
  <widget>
    <widgetDef identifier="myNewContentRecommendationWidget" 
     UIObjectName="myNewContentRecommendationWidgetObject"
     displayName="My New Content Recommendation Widget"
     description="This widget displays marketing content, such as ads, on a store page"
     widgetDisplayGroups="AnyPage,SearchPage"
     widgetRestrictionGroups="AnyPage,SearchPage" >
      <property name="widgetOrientation"   
       displayName="Widget Orientation"/>
      <property name="numberOfContentToDisplay"   
       displayName="Maximum number of content to display"/>
    </widgetDef>
    </widget>
</pageLayout>

C. Select the modified xml and run the JET transfarmation on it. In the Transformation section, select com.ibm.commerce.toolkit.internal.pattern.pageLayout.
D. Store,LOBTools and Dataload related material is generated

Customize the generated widget JSP files
Copy the generated JSPs into Store project and customize the JSPs as per the need-
myNewContentRecommendationWidget_Data.jspf
myNewContentRecommendationWidget_UI.jspf
myNewContentRecommendationWidget.jsp
mywidgettext_en_US.properties
mywidgettext.properties

Register the Widget through Dataload
To register a widget, use the Data Load utility to load the widget identifier and definition XML into the PLWIDGETDEF database table. Copy the registerWidgetdef.csv and subscribeWidgetDef.csv and modify them accordingly for registering and subscribing to the widget through dataload-
registerWidgetdef.csv
subscribeWidgetDef.csv
wc-dataload-widget.xml
wc-dataload-env.xml   
wc-loader-registerWidgetdef.xml   
wc-loader-subscribeWidgetdef.xml

Add CMC support for the custom Widget
Update the Management Center framework to support displaying your custom widget in the Commerce Composer tool-
WidgetObjectDefinition.def
WidgetPropertiesView.def
mycompanyPageLayoutResourceBundle.lzx
PageLayoutLOB_en_US.properties
PageLayoutLOB.properties