(Developer)

Testing a custom layout template in Management Center

Test our custom layout templates before you deploy our custom assets to the staging or production environment for Management Center users to use. We can test your new layout templates in your development environment by composing a page layout within the Commerce Composer tool and previewing the layout in the store.


Procedure

  1. Start or restart the WebSphere Commerce Developer Test Server.

  2. Open the Commerce Composer tool..

  3. In the explorer view (left pane), click Content Pages.

  4. In the work area (right pane), right-click the page, and then click New Layout

  5. Start a layout that is based on your new custom layout template. In the New Layout Template Selection window, ensure that your template name, description, and wireframe display correctly.

    Select your new custom layout template, and click OK.

  6. Complete the following fields:

    Option Description
    Layout name Name for this layout, for example, HalloweenLandingPageLayout.
    Folder Specify one or more folders in which to include this layout. From the explorer view, drag a subfolder of the Layouts folder into this table. If you do not specify a folder, this layout is included only in the Layouts folder.
    Priority Assign a priority by entering a number between zero (lowest priority) and one thousand (highest priority). If more than one layout is assigned to or inherited by a page for a given time period, the layout with the highest priority is applied on the storefront.

    For example, the page might have an existing layout assigned indefinitely with a priority of 1. If we want this new layout to override the existing layout temporarily for a week, give this layout a priority of 2 and set the start date and end date for the target week. During the target week, this new layout will be displayed to customers instead of the existing layout.

    Start date Specify a start date and time for this layout assignment. If you do not specify a start date, the layout is assigned immediately.
    End date Specify an end date and time for this layout assignment. If you do not specify an end date, the layout is assigned indefinitely.

  7. Click the Design Layout tab so that we can see the wireframe that represents your layout template. Ensure that your template wireframe displays correctly.

  8. Add widgets to the slots within the layout template to test that your layout template can be edited.

    The wireframe shows the layout template that we selected. To add content to the layout, add widgets to one or more slots in the layout template. We can add more than one widget to a slot, and we can leave slots empty.

    1. In the wireframe, click any slot.

    2. Optional: Use the Filter by fields to filter the list of widgets. For example:

      • In the first Filter by field, type the first few letters of the widget name.

      • In the second Filter by field:

        • Select Category page widgets to display widgets that are suited to category pages.

        • Select Widgets for any page to display widgets that are suited to content pages.

    3. Select a widget and click OK.

    4. Set the widget properties, and define the widget content, if required.

  9. Add a title to the tabbed layout template slots.

    1. In the wireframe, click the area that is labeled Title [slot number]. Example: Title 2

      The Add Widgets to Slots window opens and lists only the Text Editor widget. Ensure that only this widget is available. If only this widget is available, the tabbed slot titles are restricted to include only widgets included within the WidgetForTabTitle widget restriction group.

    2. Click the Text Editor widget, and then click OK. The properties for the Text Editor widget are displayed.

    3. In the Display text field for the Text Editor widget, type the title to use for the tab. To override the default style for the tab title, we can format the text in the editor or enter HTML code.

  10. When we are finished with the layout, click Save.

  11. Click Open Store Preview Dialog. Review your layout to ensure that our custom layout template arranges the widgets correctly in the store.

Previous topic: Registering a Commerce Composer layout template


Related concepts
Layout assignments for category pages
Layout assignments for catalog entry pages
Layout assignments for search terms
Pages and page creation
Commerce Composer layout architecture
Layouts, layout templates, and default layouts
Commerce Composer layout template architecture


Related tasks
Registering a Commerce Composer layout template