Best practices for developing Commerce Composer assets

If we are planning to create or use custom Commerce Composer assets, ensure that you review following best practices.

Creating widgets

Design and create custom widgets with a focus on the Management Center user

When we are designing a custom widget, consider how business users might want to use the functionality of a widget on a store page. Users might want to be able to control what objects or content the widget uses and displays. Users might also want to control how the widget displays on a store page. For instance users might want to control the orientation of the widget, the amount of content or objects that display within the widget, as well as how shoppers can cycle through the content or objects that display. To ensure that users can reuse our custom widget in multiple layouts, define properties for the widgets that users can configure. By including configurable properties for our custom widgets, users can configure the same widget to display differently and include different content or objects within a single layout. This flexibility ensures that users can reuse our custom widgets across multiple pages. By defining configurable properties for widgets, we can reduce the number of widgets you need to create for the store, since users can use a single widget to display the contents or functionality of a widget differently in separate layouts. If our custom widgets do not include configurable properties, users can require multiple widgets that provide the same functionality but display differently.

Design the CSS and storefront display of a widget to work on multiple store pages.

Since widgets are intended for reuse on multiple layouts for multiple pages, ensure that you design the storefront appearance of our custom widgets with reusability in mind. By designing the CSS for our custom widgets to match the CSS design of multiple store pages, we can reduce the number of widgets you need to create for the store. Avoid creating multiple widgets that display differently, but provide the same function. To have a widget display differently on separate pages, define separate CSS files and UI provider files to render the same widget differently on the storefront. Business users can then select the appropriate style for the widget within the Commerce Composer tool when they are including the widget in a layout for a page.

Updating WebSphere Commerce site-level widgets

By default, we cannot modify the source code for any Commerce Composer widget that is provided by WebSphere Commerce. The functionality of these widgets is provided as-is to help business users design pages for the store. We can however customize the appearance of these widgets on the store pages by changing the CSS for the store. The source code for widgets provided by WebSphere Commerce can be updated by future releases, such as required or recommended maintenance fixes. Any custom modifications to these default-provided widgets would be overwritten by such updates.

If you need a widget that provides almost the same functionality of a widget that is provided by WebSphere Commerce, the recommended best practice is to copy the assets for the provided widget. We can then use the copied assets to model our own custom widget that is a copy of the default-provided widget. With our custom version of the widget, we can then modify your widget to meet the store design and functionality requirements. For more information about copying an existing widget, see Copying WebSphere Commerce site-level widgets.

Creating layouts

Use widgets that always return content for display when you include widgets within tabbed layout template slots.

When a store page renders, the Commerce Composer framework checks whether tabbed slots in the layout include a widget, not whether the widget returns content. If any tabbed slot includes a widget, the tab displays on the store page, even when the widget does not display any content. When you include widgets in tabbed slots, consider including only widgets that always return content, such as default content, to ensure that the tabs on your page are not empty.

Loading assets with the Data Load utility

Before using the Data Load utility to load Commerce Composer assets into the WebSphere Commerce database, review the best practices for loading these assets. See . See Data Load utility best practices for Commerce Composer.

Copying Commerce Composer assets between WebSphere Commerce instances

If you need to have the same Commerce Composer assets in multiple instances, such as for testing purposes, use the Data Extract utility and Data Load utility to copy the asset data between instances. We can configure and run the Data Extract utility to extract widget, layout, template, and page data from one instance. Then, we can configure and run the Data Load utility to load the data into any other instance that needs to include the extracted data. By using these utilities to copy data between instances, business users do not need to manually re-create the same assets across multiple instances. See .See Extracting Commerce Composer data with the Data Extract utility.

Related concepts
Developing Commerce Composer assets
Commerce Composer widget architecture
Commerce Composer layout architecture
Commerce Composer layout template architecture

Related tasks
Creating Commerce Composer widgets
Creating Commerce Composer layout templates

Related reference
Commerce Composer page creation