Identifying the Commerce Composer widget to update

In this lesson, you identify the widget that you want to update by using store preview and reviewing the Apparel > Boys > Pants category.

Procedure

  1. Open the Management Center.
  2. From the Management Center menu, select the Commerce Composer tool.
  3. Select your custom store to work with.
  4. Select File > Store Preview, or click Open Store Preview dialog on the toolbar.
  5. Review the default values and click Launch Store Preview. The preview store opens in a separate window.

    When you are previewing a store from within a workspace, attempting to process an order in the previewed store might cause errors that prevent you from completing the order.

  6. In the storefront, go to the Apparel > Boys > Pants category.
    The category page is displayed:
    Boys Pants category page
  7. Click the Show Layout Information button in the preview toolbar.
    The layout information is displayed, showing that the default layout is being used:
    Layout Information
    Scroll down to the layout evaluation details, showing that the SubCategoryPageLayout layout is being used:
    Detailed layout Information
  8. Close the layout information dialog and click the Show Page Information button in the preview toolbar.
    All the widgets that are used on the page are displayed, including the page area that you want to work with:
    Page Layout Information
  9. Click the Show Information button on the widget that is marked in the previous step.
    The widget information is displayed, showing that the widget being used is called CatalogEntryListWidget:
    Widget Information
  10. Close the widget information dialog and exit store preview.
  11. Open the Commerce Composer tool.
  12. Click the Layouts folder in the left sidebar.
  13. Double-click the SubCategoryPageLayout and open the Design Layout tab:
    Design Layout tab
  14. The design layout is displayed, showing the wireframe for how all the widgets are positioned on the page. Each number corresponds to a predefined slot in the layout, where one or more widgets can be placed:
    Widget slots
    The widget to slot mapping is shown as a table on the page:
    Widget slot values

Results

The CatalogEntryWidget is placed in slot 6 on the category page, which represents the CatalogEntryListWidget found in the widget details. This is the widget that will be customized in this tutorial to display the manufacturer name, in addition to the information it already displays.

The CatalogEntryListWidget widget is site-level and available for use in all stores. All site-level widgets are available in the crs-web/WebContent/Widgets_801 directory. In this example, the file path is com.ibm.commerce.store.widgets.CatalogEntryList.