Best practices for developing Commerce Composer assets

If you 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 you 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 your custom widget in multiple layouts, define properties for the widgets that users can configure. By including configurable properties for your 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 your custom widgets across multiple pages. By defining configurable properties for widgets, you can reduce the number of widgets you need to create for your store, since users can use a single widget to display the contents or functionality of a widget differently in separate layouts. If your 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 your custom widgets with reusability in mind. By designing the CSS for your custom widgets to match the CSS design of multiple store pages, you can reduce the number of widgets you need to create for your store. Avoid creating multiple widgets that display differently, but provide the same function. If you want 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 HCL Commerce site-level widgets

By default, you cannot modify the source code for any Commerce Composer widget that is provided by HCL Commerce. The functionality of these widgets is provided as-is to help business users design pages for your store. You can however customize the appearance of these widgets on your store pages by changing the CSS for your store. The source code for widgets that are provided by HCL 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 HCL Commerce, the recommended best practice is to copy the assets for the provided widget. You can then use the copied assets to model your own custom widget that is a copy of the default-provided widget. With your custom version of the widget, you can then modify your widget to meet your store design and functionality requirements. For more information about copying an existing widget, see Copying HCL 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 you use the Data Load utility to load Commerce Composer assets into your HCL Commerce database, review the best practices for loading these assets. For more information, see . For more information, see Data Load utility best practices for Commerce Composer.

Copying Commerce Composer assets between HCL 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. You can configure and run the Data Extract utility to extract widget, layout, template, and page data from one instance. Then, you 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. For more information, see .For more information, see Extracting Commerce Composer data with the Data Extract utility.