(Developer)

Create Commerce Composer widgets

We can create a custom Commerce Composer widget that Management Center users can use to compose store pages. We must define your widget functionality, content, and presentation. Then, we must register your widget in the Commerce Composer framework, and subscribe one or more stores to use the widget.

Before beginning

Ensure that we are familiar with the terms and concepts that are described in the following topics:

• Pages and page creation

• Layouts, layout templates, and default layouts

• Developing Commerce Composer assets

• Commerce Composer widget architecture

Ensure that you complete the following prerequisite tasks:

• Publish the Aurora starter store.

• Install the Java Emitter Template (JET) package

• Determine the functionality and behavior of the widget to create. By default WebSphere Commerce provides various widgets to display store content, and marketing activities. Review the available Commerce Composer widgets before you begin creating our own widget so that we are not creating a widget that duplicates the functionality of an existing widget. For more information about the widgets available by default, see Commerce Composer widget library.

• Determine whether we must create a widget from scratch, or if we can base your widget on the definition of an existing widget. If our custom widget is similar to an existing widget, use the existing widget definition to help you modify the generated code to meet your requirements.

• Determine whether you require a site-level or store-level widget. For more information about each type of widget, see Commerce Composer widget architecture.

• Add support for managing the page with the Commerce Composer framework if your widget is for a page that is not managed with the Commerce Composer tool. For more information see, Pages and page creation

Best Practices

When we are creating a widget, ensure that you follow the best practices for creating a Commerce Composer widget. For more information about these tips and guidelines, see Best practices for developing Commerce Composer assets.

Note: If you need to copy a Commerce Composer widget from one instance to another instance, we can use the Data Extract and Data Load utilities. Use the Data Extract utility to extract the widget registration and subscription data and then use the Data Load utility to load the extracted data into the target instance. See Extracting Commerce Composer data with the Data Extract utility.

Procedure

1. Generating Commerce Composer widget source code
   Use the Java Emitter Template (JET) PageComposer Resource pattern to generate source code files that we can use as a starting point for creating a custom Commerce Composer widget. To use this pattern, we must create a pattern input file containing the information required to generate the source code files.

2. Defining storefront assets for a Commerce Composer widget
   Create the JSP files, user interface provider files, and data provider files for our Commerce Composer widget. These storefront assets define the appearance and content of your widget.

3. Registering a Commerce Composer widget
   Use the Data Load utility to register your widget in the Commerce Composer framework and have the store subscribe to your widget.

4. Adding Management Center support for a Commerce Composer widget
   Update the Management Center framework to support displaying our custom widget in the Commerce Composer tool. By adding support for our widget, Management Center users can access and use our custom widget in the Commerce Composer tool. Users can then specify properties for the widget, associate content with the widget, and use the widget in page layouts.

5. Updating a widget to create a responsive widget
   We can create responsive widget content so that they are optimized for web browsers on desktop, tablet, and mobile devices.

6. Updating a widget to create a responsive widget
   We can create responsive widget content so that they are optimized for web browsers on desktop, tablet, and mobile devices.

Related concepts
Commerce Composer overview
Widgets for Commerce Composer
Commerce Composer widget library
Commerce Composer widget caching and invalidation

Related tasks
Creating Commerce Composer widget groups

Related reference
registerWidgetdef input file
subscribeWidgetdef input file
registerWidgetdefdesc input file
widgetnvp input file
layoutWidgetRelationship input file