Sample: Loading Commerce Composer layouts

This sample demonstrates how to load Commerce Composer layouts for use in the Commerce Composer tool and on the storefront.

Before you begin

This sample requires a published store that is based on the Aurora starter store and the Commerce Composer tool. Ensure that the following tasks are complete:

Review the Commerce Composer data load best practices. Follow these best practices when you load Commerce Composer assets with the Data Load utility.

About this sample

A Commerce Composer layout is an arrangement of layout widgets within a layout template that is used to render a store page. A layout contains one or more widgets that are placed in specific slots in the template. The properties (name-value pairs) of each widget are set to specific values. To create a layout, you can use the Data Load utility to load the layout information into the HCL Commerce database.

When you load the input files within this sample, you load information to create a layout, including the layout template, layout template container, slots, and assign widgets into the slots. Specifically, this sample loads five layouts

SampleHomePageLayout
SampleStaticContentLayout
SampleDepartmentPageLayout
SampleContentPageLayout
SampleDefaultContentPageLayout

The SampleDefaultContentPageLayout is loaded as a default layout for pages that are viewed on desktop, notebook, and tablet computers. This layout does not display within Management Center and cannot be edited. When a user creates a content page, the page is automatically assigned the SampleDefaultContentPageLayout layout until the user assigns a different layout to the page. The other four layouts in this sample are not default layouts and can be used for any page.

For more information about Commerce Composer layouts and the components that make up a layout, see Commerce Composer layout architecture.

You can load the information for this sample in both CSV or XML formatted input files. The following procedure, however, loads only the CSV input files. If you prefer to work with the data within the XML formatted files, you can edit the sample configuration files to use the XML files. The sample input files are located within the following directory:

utilities_root/samples/DataLoad/CommerceComposer/layout
WCDE_installdir\samples\DataLoad\CommerceComposer\layout

This sample also loads input files that are included as part of the sample for loading Commerce Composer layout templates. The input files for that sample are located within the following directory:

utilities_root/samples/DataLoad/CommerceComposer/template
WCDE_installdir\samples\DataLoad\CommerceComposer\template

For more information about the sample for loading Commerce Composer layout templates, see Sample: Loading Commerce Composer layout templates.

If you are using this sample to help you load Commerce Composer layout information that exists in another instance, you can use the Data Extract utility to generate the input files for loading your layout data. You can use the Data Extract utility to extract the existing layout data. Then, you can edit configuration files for this sample to load the files that are generated by the Data Extract utility. For a sample that demonstrates how to use the Data Extract utility to extract layout data, see Sample: Extracting Commerce Composer layouts.

Input source files for loading Commerce Composer layouts. This table also lists the business object mediators that are used by the Data Load utility to load the layout data.
Sample input file	Description
CSV layout.csv XML layout.xml For more information about the data that is included in this file, see layout input file	The Data Load utility uses this sample input file to load layout templates and layouts into a store so that Management Center users can use the layouts in the Commerce Composer tool The Data Load utility loads the information within the input file into the PAGELAYOUT, and PLTEMPLATEREL database tables. The Data Load utility uses the following business object mediator and business object configuration file to load the data within this input file: Business object mediator com.ibm.commerce.pagelayout.dataload.mediator.LayoutMediator Business object configuration file `utilities_root/samples/DataLoad/CommerceComposer/wc-loader-pagelayout.xml` `WCDE_installdir\samples\DataLoad\CommerceComposer\wc-loader-pagelayout.xml`
CSV layoutWidgetRelationship.csv XML layoutWidgetRelationship.xml For more information about the data that is included in this file, see layoutWidgetRelationship input file	This sample input file loads a layout template container and adds widgets into the layout template slots to create a layout. The Data Load utility loads the information within the input file into the PLWIDGET, and PLWIDGETREL database tables. The Data Load utility uses the following business object mediator and business object configuration file to load the data within this input file: Business object mediator com.ibm.commerce.pagelayout.dataload.mediator.WidgetMediator Business object configuration file `utilities_root/samples/DataLoad/CommerceComposer/wc-loader-widget.xml` `WCDE_installdir\samples\DataLoad\CommerceComposer\wc-loader-widget.xml`
CSV subscribeWidgetdef.csv XML subscribeWidgetdef.xml For more information about the data that is included in this file, see subscribeWidgetdef input file	This sample input file loads information to subscribe widgets and template containers to a store. To subscribe a store to a widget, the widget must be registered within the HCL Commerce database and Commerce Composer framework. A store must subscribe to specific widgets and containers so that these objects can be used in the Commerce Composer tool for that store. The widgets that are used in this sample are registered by default when you enable the Commerce Composer tool. This sample loads two subscribeWidgetdef.csv files: The subscribeWidgetdef.csv file within the layout directory loads the information to subscribe widgets to a store. The subscribeWidgetdef.csv file within the template directory loads the information to subscribe a layout template to a store. This subscribeWidgetdef.csv file is also loaded as part of the sample for loading a Commerce Composer layout template. The order that the Data Load utility loads the information within these input files is defined within the wc-dataload-layout.xml load order configuration file. The subscribeWidgetdef.csv file within the template loads before the file within the layout directory. The Data Load utility loads the information within the input file into the PLSTOREWIDGET database table. The Data Load utility uses the following business object mediator and business object configuration file to load the data within this input file: Business object mediator com.ibm.commerce.pagelayout.dataload.mediator.SubscribeWidgetDefinitionMediator Business object configuration file `utilities_root/samples/DataLoad/CommerceComposer/wc-loader-subscribeWidgetdef.xml` `WCDE_installdir\samples\DataLoad\CommerceComposer\wc-loader-subscribeWidgetdef.xml`
CSV widgetnvp.csv XML widgetnvp.xml For more information about the data that is included in this file, see widgetnvp input file	This sample input file loads information to set the properties of the widgets that included in the slots for the layout that you are loading with this sample. The Data Load utility loads the information within the input file into the PLWIDGETNVP database table. The Data Load utility uses the following business object mediator and business object configuration file to load the data within this input file: Business object mediator com.ibm.commerce.pagelayout.dataload.mediator.WidgetNVPMediator Business object configuration file `utilities_root/samples/DataLoad/CommerceComposer/wc-loader-widgetnvp.xml` `WCDE_installdir\samples\DataLoad\CommerceComposer\wc-loader-widgetnvp.xml`
CSV registerWidgetdef.csv XML registerWidgetdef.xml For more information about the data that is included in this file, see registerWidgetdef input file	This sample input file loads information to register a new widget or template container for use in the Commerce Composer tool. In this sample, the input file loads information to register the template containers for the layout. This input file is also loaded as part of the sample for loading a Commerce Composer layout template. The Data Load utility loads the information within the input file into the PLWIDGETDEF, and PLWIDGETDEFDESC database tables. The Data Load utility uses the following business object mediator and business object configuration file to load the data within this input file: Business object mediator com.ibm.commerce.pagelayout.dataload.mediator.registerWidgetdefMediator Sample business object configuration file for loading this information: `utilities_root/samples/DataLoad/PageComposer/wc-loader-registerWidgetdef.xml` `WCDE_installdir\samples\DataLoad\PageComposer\wc-loader-registerWidgetdef.xml`
CSV template.csv XML template.xml For more information about the data that is included in this file, see template input file	This sample input file loads information that defines a template that can be used to create a layout. This input file is also loaded as part of the sample for loading a Commerce Composer layout template. The Data Load utility loads the information within the input file into the PAGELAYOUT database table. The Data Load utility uses the following business object mediator and business object configuration file to load the data within this input file: Business object mediator com.ibm.commerce.pagelayout.dataload.mediator.WidgetMediator Business object configuration file `utilities_root/samples/DataLoad/CommerceComposer/wc-loader-template.xml` `WCDE_installdir\samples\DataLoad\CommerceComposer\wc-loader-template.xml`
CSV slotDefinition.csv XML slotDefinition.xml For more information about the data that is included in this file, see slotDefinition input file	This sample input file loads information to define the slots within a container for a specific template. Each slot is defined with x and y coordinates. This input file is also loaded as part of the sample for loading a Commerce Composer layout template. The Data Load utility loads the information within the input file into the PLWIDGETSLOT database table. The Data Load utility uses the following business object mediator and business object configuration file to load the data within this input file: Business object mediator com.ibm.commerce.pagelayout.dataload.mediator.WidgetSlotsMediator Business object configuration file `utilities_root/samples/DataLoad/CommerceComposer/wc-loader-widgetslot.xml` `WCDE_installdir\samples\DataLoad\CommerceComposer\wc-loader-widgetslot.xml`

Procedure

On a command line, go to the WCDE_installdir\bin directory.
Open a command line in the . Change the directory to utilities_root/bin directory. For information about entering and leaving containers, see Running utilities from the Utility server Docker container.
Enter the following command to run the sample data load order file for a Commerce Composer layout and load the information for this sample:
- ./dataload.sh ../samples/DataLoad/CommerceComposer/layout/wc-dataload-layout.xml
- dataload ..\samples\DataLoad\CommerceComposer\layout\wc-dataload-layout.xml
The load order configuration file identifies the order that the Data Load utility loads the sample CSV files. The load order file also identifies the appropriate business object configuration file to use to load each input file. For more information about load order configuration files, Configuring the data load order.
For more information about configuring and running the Data Load utility, see Configuring and running the Data Load utility.

Verifying results

Verify that the Commerce Composer tool layout information is loaded by reviewing the data load summary report. For more information about the location and contents of this summary report, see Verifying the results of the data load.

You can also verify that the sample data is loaded by running the following SQL statements against your WebSphere Commerce database:

select * from PLWIDGETDEF where IDENTIFIER like 'Sample%';
select * from PLWIDGETDEFDESC where PLWIDGETDEF_ID in (select PLWIDGETDEF_ID from PLWIDGETDEF where IDENTIFIER 
like 'Sample%');
select * from PLSTOREWIDGET where PLWIDGETDEF_ID in (select PLWIDGETDEF_ID from PLWIDGETDEF where IDENTIFIER 
like 'Sample%');
select * from PAGELAYOUT where name like 'Sample%';
select * from PLTEMPLATEREL where PAGELAYOUT_ID in (select PAGELAYOUT_ID from PAGELAYOUT where NAME 
like 'Sample%');
select * from PLWIDGET where PAGELAYOUT_ID in (select PAGELAYOUT_ID from PAGELAYOUT where name 
like 'Sample%');
select * from PLWIDGETREL where PLWIDGET_ID_CHILD in (select PLWIDGET_ID 
from PLWIDGET where PAGELAYOUT_ID in (select PAGELAYOUT_ID 
from PAGELAYOUT where name like 'Sample%'));
select * from PLWIDGETSLOT where PAGELAYOUT_ID in (select PAGELAYOUT_ID from PAGELAYOUT where name
like 'Sample%');
select * from PLWIDGETNVP where PLWIDGET_ID in (select PLWIDGET_ID
from PLWIDGET where PAGELAYOUT_ID in (select PAGELAYOUT_ID from PAGELAYOUT where NAME like 'Sample%'));

Ensure that the data within the sample input files exists within the appropriate database tables.

In Management Center, verify that users can use the layouts in the Commerce Composer tool by viewing the list of available layouts. Ensure that the layouts you loaded are in the Layouts - Layout List grid. The following image shows the new layouts.
Layout List that contains sample layouts

Layout List that contains sample layouts

Open a layout for editing and in the Layout Assignments section, add an entry into the Pages table to assign the layout to a page.

Removing the sample data from the HCL Commerce database

To remove the sample data from your database, run the sample again but with the value for the delete column for all entries within the files set to 1. By setting the value for this column to 1, the Data Load utility deletes the data that is identified in the CSV file from your database.

Alternatively, you can run the Cleanup.sql file for this data load sample. The Cleanup.sql file is located within the following directory:

utilities_root/samples/DataLoad/CommerceComposer/layout
WCDE_installdir\samples\DataLoad\CommerceComposer\layout

From a command prompt, connect to the database with your user ID and password. Run the following command:

db2 -tvf ../samples/DataLoad/CommerceComposer/layout/Cleanup.sql

sqlplus user_name/password@ database_name@ ../samples/DataLoad/CommerceComposer/layout/Cleanup.sql