Tutorial: Creating a site-level Commerce Composer widget

Feature Pack 7 or later In this tutorial, you create a reusable site-level widget that can be used by Management Center users to compose store pages with the Commerce Composer tool. Your new widget can be reused on multiple store pages and shared across stores.

This tutorial uses the Aurora starter store Shopping Cart page as an example for demonstrating how to create a site-level widget for a store page. You use the JSP file for this existing page to model your new widget and then update the page JSP file to use your new widget.

Attention: This tutorial is based on Feature Pack 7 Aurora starter stores JSPs. The Feature Pack 8 Aurora starter store is updated to use REST services instead of the getData tag. If you are using the Feature Pack 8 Aurora starter store, you can still use this tutorial as a guide to help you create widgets for your store. However, the code samples that are included in this tutorial might not work for your store.

A Commerce Composer widget is an interchangeable building block that a Management Center user can use to compose page layouts for store pages. You can create reusable widgets, which Management Center users can then use within page layouts. Widgets are independent user interface modules that retrieve and display a specific type of data on a store page. Widgets can display the same data in different UI styles, depending on the UI providers that are defined for the widget. Widgets are composed of multiple components, including storefront and Management Center components.

Site-level widgets are widgets that can be shared between stores. By default, all Commerce Composer widgets are registered at the site-level. Stores must subscribe to a widget before the widget can be included on a page for that store.

You can gain the following benefits by creating Commerce Composer widgets for use in composing page layouts:

Business users can use the widgets to design and configure store pages without the need for IT assistance.
Cleaner organization of code.
Separation of data and presentation.
Ease of reuse of code. For example, a Header widget and Footer widget can be easily used in the layout for all store pages.

For more information about widgets, see Commerce Composer widget architecture.

Note: This tutorial uses the Apache Derby database and Aurora starter store Shopping Cart page as examples. The focus of the tutorial is to demonstrate the procedure for creating a custom widget for use within the Commerce Composer tool.

Learning objectives

After completing this tutorial, you should be able to do the following tasks:

Create a site-level widget for use on a store page
Use an existing store JSP as a model for creating a site-level widget
Use the Data Load utility to register a new widget with the Commerce Composer framework
Customize Management Center to support the use of a custom widget when a user is composing a store page with the Commerce Composer tool
Use the Data Load utility to load a Commerce Composer template and Commerce Composer layout for use in the Commerce Composer tool for a content page
Update an existing store JSP to include Commerce Composer widgets

Time required

Expect this tutorial to take 2 - 3 hours to complete. The tutorial can take longer if you explore concepts that relate to this tutorial.

Skill level

This tutorial is intended for advanced WebSphere Commerce developers who are responsible for customizing store pages. To complete this tutorial, ensure that you are familiar with the following terms and concepts:

Commerce Composer tool
Commerce Composer framework
Commerce Composer widgets and widget definition
Commerce Composer templates
Commerce Composer layouts
Responsive web design
Management Center framework
Web services
Data Load utility
OpenLaszlo
Nouns
XML
XPath
CSS
Rational Application Developer
JSP and JSPF files
Java Emitter Template (JET) pattern tool

System requirements

Before you begin this tutorial, ensure that you complete the following tasks:

Install WebSphere Commerce Developer Version 7
Install WebSphere Commerce Developer Feature Pack 7

Tutorial resources

You can download and review a compressed file that contains code samples similar to the code that is used in this tutorial. Download and extract this file to a temporary directory, such as C:\Temp.

createsitewidget.zip.