Creating custom widget in IBM WCS

 

Widgets are the interchangeable building blocks that a Management Center user can use to compose layouts for store pages. Widgets are independent user interface modules that retrieve and display a specific type of data on a store page.

Generating Commerce Composer widget source code

 Create a temporary project in your WebSphere Commerce Developer workspace. This project is used as the target location where the Java Emitter Template (JET) Transformation generates the source code files for creating your widget.

a.Right-click within the Enterprise Explorer view. Select New > Project.

b.In the New Project wizard, expand General. Select Project. Click Next.

c.For the Project name field, enter a name for the temporary project. For example, NewWidgetProject.

d.Click Finish.

In temporary NewWidgetProject project, create an XML file to use as a pattern input file for the JET Transformation.

1.Right-click the temporary NewWidgetProject project. Select New > File.

2.In the New File wizard, ensure that your temporary project is selected as the parent folder. Enter a File name for the pattern input XML file. For example, NewWidgetPatternInputFile.xml.

3.Click Finish.

<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>

 

Use the JET Transformation to generate the source code files for creating your custom widget. 

 a.Right-click your pattern input XML file. Select Run As > Run Configurations.

 b.In the Run Configurations wizard, double-click JET Transformation from the list of filters. The configuration options for the JET Transformation display.

 c.Ensure that the value of the Name field is the name of your pattern input XML file.

 d.In the Main tab, ensure that the value of the Transformation Input field is the filepath within your workspace to the pattern input XML file. For example, NewWidgetProject\NewWidgetPatternInputFile.xml

 e.In the Transformation section, select com.ibm.commerce.toolkit.internal.pattern.pageLayout for the value of the ID field.

 f.Optional: Specify the severity level for the Display Message logging. The default value is information.

 g.Click Apply > Run. The JET Transformation generates the file directories and files for your custom widget at the location you specified in the targetFolder parameter in the pattern input XML file.

 h.Verify that the JET Transformation created the following directories and files.

 

After running the JET three project will create under “targetFolder”

 

  •Management Center - LOBTools

 •Storefront - Stores

 •Data Load utility - DataLoad.

 

 

 

If you are creating a custom site-level widget, create the following directory, if the directory does not exist:

  •WCDE_installdir\workspace\Stores\WebContent\Widgets-vendor

If you are creating a custom store-level widget, create a store-specific directory that contains the Widgets-vendor directory, if the directory does not exist:

  •WCDE_installdir\workspace\Stores\WebContent\store\Widgets-vendor

 

Copy the generated source code files for your widget storefront assets from your project folder to the appropriate location within the default Stores project.

a.        Expand your new project directory, go to Stores\WebContent.

b.        Right-click the Widgets-vendor directory. Select to Copy the directory.

c.        Go to the default Stores\WebContent directory.

d.        Paste the copied Widgets-vendor directory within the default WebContent directory.

Load widget into the database by using Data load utility

Use the Data Load utility to register your widget in the Commerce Composer framework and have your store subscribe to your widget. Update db details in wc-dataload-wideget-env.xml file.

·         Go to the WCDE_installdir\bin directory.

·         Run the following command to load the input CSV files to register your widget and have a store subscribe to your widget:

Dataload.bat workspace_dir\NewWidgetProject\DataLoad\widget\wc-dataload-widget.xml

Tables updated will be : PLWIDGETDEF, PLWIDGETDEFDESC, PLSTOREWIDGET, PLWIDGETNVP

 Extending the resource bundle and properties files

 Add the text for your widget within a properties file to ensure that the Management Center properties and list views for your widget display text.

Copy the generated resource bundle and properties files into your default workspace directory structure.

   1.Copy the generated resource bundle and properties files into your default workspace directory structure.

   a.In a File Manager, go to the com directory within your new widget project directory.

workspace_dir\NewWidgetProject\LOBTools\src\com.

    b.Copy the Widgets-vendor directory.

  c.Go to the workspace_dir\LOBTools\Java Resources\src directory.

  d.Paste your copied Widgets-vendor directory within the LOBTools\Java Resources\src directory.

  e.Right-click the LOBTools directory within your default workspace directory structure. Click Refresh.

  1.Define the translatable text for your new widget.

   a. In the Enterprise Explorer view, go to the LOBTools\Java Resources\src directory. Expand thecom.mycompany.commerce.pagelayout.client.lobtools.properties package. Open the PageLayoutLOB.propertiesand PageLayoutLOB_en_US.properties files for editing. The following generated code is included within the files:

# Widget properties view

widgetNamePrompt=Widget Name

widgetPropertiesPrompt=Widget Properties

widgetContentPrompt=Widget Content

ShoppingCartDetailPageWidgetContent = this widget displays the orders you add into your shopping cart

    b.Define any additional translatable text for your widget by adding code into both files.

  c.Save any changes and close the files.

  2.Copy the generated resource bundle extension into your default workspace directory structure and register your properties files.

   a.In your new project directory, go to the lzx directory. For example, the file path to the lzx directory can be NewWidgetProject\LOBTools\WebContent\WEB-INF\src\lzx.

  b.Copy the Widgets-vendor  directory.

  c.Go to the LOBTools\WebContent\WEB-INF\src\lzx directory.

  d.Paste your copied Widgets-vendor directory within the LOBTools\WebContent\WEB-INF\src\lzx directory.

  3.Update the default Commerce Composer resource bundle library to include your new resource bundle extension.

   a.In your new project directory, go to the directory. For example, the filepath to the lzx directory, can be NewWidgetProject\LOBTools\WebContent\WEB-INF\src\lzx\commerce\pagelayout.

  b.Open the PageLayoutExtensionsLibrary.lzx file to view the source code.

  c.Copy the generated code that includes your widget resource bundle. For example, the generated code can resemble the following code:

<library>

 <!-- Include the file to add any custom libraries. -->

  <include href="../../mycompany/pagelayout/mycompanyPageLayoutResourceBundle.lzx"/>

</library>

    d.Go to the LOBTools\WebContent\WEB-INF\src\lzx\commerce\pagelayout directory within your default workspace directory structure.

  e.Open the PageLayoutExtensionsLibrary.lzx file for editing.

  f.Paste your copied code within the PageLayoutExtensionsLibrary.lzx file.

  g.Save and close the file.

  Define the object definition for widget:

The object definition adds support for your widget object within the Management Center framework.

  1.In the Enterprise Explorer view, copy the generated object definition files for your widget into your default workspace directory structure.

  a.In your new project directory, go to the WebContent\config directory. For example, NewWidgetProject\LOBTools\WebContent\config.

 b.Copy the Widgets-vendor directory.

 c.Go to the LOBTools\WebContent\config directory in your default workspace directory structure.

 d.Paste the Widgets-vendor directory within the LOBTools\WebContent\config directory.

 2. In your default workspace directory structure, go to theLOBTools\WebContent\config\mycompany\pagelayout\widgetDefinitions\widgetName directory.

 3.Open the WidgetObjectDefinition.def file for editing. 

 4.Update the object definition file to change any of the default generated values or add more definition properties for your widget. Ensure that you update the file to specify an icon for your widget. For more information

 5.Save and close the file

Testing new widget in Management Center

·    Open CMC and create a new layout.

·    Assign a page to layout and add a widget to any slot in layout.  You will get custom widget in widget list.

 ·   Click on save and preview.

·   Click on show information. It will show widget details.

 

Enabling Commerce Composer widget caching in WebSphere Commerce Developer

 By default it is not enabled.

Open wc-server.xml

Add the following map:

 

<map className="com.ibm.commerce.dynacache.filter.DeviceFormatIdCallBack"

display="false"

dynacacheAttributeName="DC_deviceFormatId"

methodName="setDeviceFormatId"

name="setDeviceFormatId"/>

 Refrences : Creating a site-level Commerce Composer widget, Creating Commerce Composer widgets , Commerce Composer widget caching and invalidation, Video Link