Creating Page Layout template
Follow the steps for creating page layout template:
1.
Defining the storefront assets
for Commerce Composer layout templates.
2.
Registering a Commerce Composer
layout template.
3.
Testing a custom layout
template in Management Center.
Defining the storefront assets for Commerce Composer layout templates
1.
Create the container JSP file
for your custom layout template: The container JSP file defines the template,
which is an empty widget that is divided into configurable slots. The container
definition is similar to the definition of a widget, but does not have any
functionality or content that is defined for use on the storefront. The
container identifies the configurable slots where a widget can be added and
marks these slots with the wcpgl:widgetImport tag. Each slot is defined by an
internal slot ID, which must be unique within the container. The container JSP
file also identifies the environment setup file.
You can check with the <XYZ>DepartmentPageContainer.jsp
2. Update the container JSP file
for your layout to divide you layout into more rows and columns. Below is the
example for department page:
<!-- BEGIN <XYZ>DepartmentPageContainer.jsp
-->
<%@include file="../Common/EnvironmentSetup.jspf"%>
<%@taglib uri="http://commerce.ibm.com/pagelayout"
prefix="wcpgl"%>
<div class="rowContainer" id="container_${pageDesign.layoutID}">
<div class="row">
<div class="col12"
data-slot-id="1"><wcpgl:widgetImport slotId="1"/></div>
</div>
<div class="row">
<div class="col12"
data-slot-id="2"><wcpgl:widgetImport slotId="2"/></div>
</div>
<div class="row">
<div class="col6
acol12" data-slot-id="3"><wcpgl:widgetImport
slotId="3"/></div>
<div class="col6
acol12" data-slot-id="4"><wcpgl:widgetImport
slotId="4"/></div>
</div>
<div class="row">
<div class="col12"
data-slot-id="5"><wcpgl:widgetImport slotId="5"/></div>
</div>
<div class="row">
<div class="col12"
data-slot-id="6"><wcpgl:widgetImport slotId="6"/></div>
</div>
</div>
<!--
END <XYZ>CategoryPageContainer.jsp -->
3.
Save your container JSP file.
Registering a Commerce Composer layout template
1.
Registering: registerWidgetdef.xml
<Item Delete="0">
<WidgetDefIdentifier>XYZDepartmentPageContainer</WidgetDefIdentifier>
<WidgetVendor>xyz</WidgetVendor>
<WidgetType>2</WidgetType>
<WidgetPath>Container/XYZDepartmentPageContainer.jsp</WidgetPath>
<WidgetDefinitionxml>
<Definition></Definition>
</WidgetDefinitionxml>
<WidgetState>1</WidgetState>
</Item>
Ø Set a value that for the WidgetDefIdentifier that is unique within
the list of all layout template containers and Commerce Composer widgets.
Ø Set the value of the WidgetVendor column to be your company name.
Ø Set the WidgetType value to be 2. This column identifies the type of
widget that you are registering. A widget can be either a Commerce Composer
widget (value of 1), or a layout template container (value of 2).
Ø Set the value for the WidgetPath to be the relative path to the
container JSP file for your layout template. This path is relative from the
WCDE_installdir\workspace\Stores\WebContent directory. Use forward slashes in
the file path.
Ø Set the value for the WidgetDefinitionxml to be an empty element.
Ø Set the value for the WidgetState column to 1 to indicate that the
container registration is active.
2.
Subscribe: subscribeWidgetdef.xml
<Item Delete="0">
<WidgetDefIdentifier>XYZDepartmentPageContainer</WidgetDefIdentifier>
<WidgetDefinitionxml />
<WidgetState>1</WidgetState>
</Item>
Ø Set the value
for the WidgetDefIdentifier to be the same value that you set within the
registerWidgetDef.xml file.
Ø Do not set a
value for the WidgetDefinitionxml column.
Ø Set the value
for the WidgetState column to 1 to indicate that the store subscription is
active.
Ø You do not
need to set the ID value for your store within this file. By default, the Data
Load utility subscribes the store that is configured within the Data Load
utility environment configuration file to the layout template. You can set a different
store to subscribe to the template by updating the environment configuration
file.
3.
Template Information: template.xml
<LayoutType Sequence="1.0" Delete="0">
<LayoutName>XYZ
Department Page</LayoutName>
<Description>Six
slot template for department page</Description>
<DeviceClass>Any</DeviceClass>
<State>1</State>
<IsTemplate>TRUE</IsTemplate>
<IsDefault>YES</IsDefault>
<PageGroup>Department</PageGroup>
<ParentWidgetDefIdentifier>XYZDepartmentPageContainer</ParentWidgetDefIdentifier>
<AdminName>XYZDepartmentPageContainer</AdminName>
</LayoutType>
Ø Set the value of the LayoutName column to be the reference name for
the template that you are defining the wireframe for. This value displays in
Management Center to identify the template. The value for this column must
match the value that you set within the slotDefinition.xml file.
Ø Set the value for the Description column to be the string of text
that you want to display for the layout template within the Commerce Composer
tool. This description displays within the New Layout Template Selection window
for your custom layout template.
Ø Set the value for the DeviceClass column to identify the type or
types of device classes that users can design a page layout for when they use
your custom layout template. You can define a layout template to be used for
creating layouts for Web, Mobile, or Any devices.
Ø Set the value of the State column to be 1 to activate your layout
template for use in composing a page layout.
Ø Set the IsTemplate value to be TRUE. This value indicates that your
are loading a layout template.
Ø Set the IsDefault value to be FALSE. This column value indicates
whether you are loading a default layout.
Ø Set the value of the ParentWidgetDefIdentifier and AdminName columns
to be the administrative name for the container in this template. Set this name
to be the same as the WidgetDefIdentifier that you set in the registerWidgetDef.csv
file.
4.
Defining the slots: slotDefinition.xml
<WidgetSlot Delete="0">
<LayoutName>XYZ
Department Page</LayoutName>
<AdminName>XYZDepartmentPageContainer</AdminName>
<SlotAdminName>1</SlotAdminName>
<SlotID>1</SlotID>
<SlotType>1</SlotType>
<SlotProperty>xLocation:0;yLocation:0;width:166;height:24</SlotProperty>
</WidgetSlot>
Define all the
slots for the page as above.
Ø Set the value of the LayoutName column to be the reference name for
the template that you are defining the wireframe for. This value displays in
Management Center to identify the template. The value for this column must
match the value that you set within the template.xml file.
Ø Set the value of the AdminName column to be the administrative name
for the container in this template. Set this name to be the same as the
WidgetDefIdentifier that you set in the registerWidgetDef.xml file.
Ø Set the value of the SlotAdminName to be the display name for the
slot. The value for this column displays in the Commerce Composer tool within
the wireframe to identify the slot.
Ø Set the value of the SlotID column to be the value of the internal
slot name.
Ø Set the SlotType column to be 1. This column is reserved for IBM
internal use. The value must be set to 1
Ø Within the value for the SlotProperty column, define the coordinates
for the layout template wireframe and identify and restriction groups for the
template. Use the above format.
Ø For instance to include a restriction group to restrict a slot to
use only the widgets that are intended for use as a tabbed slot title, use
allowedWidgetGroups:WidgetForTabTitle. For more information about widget
restriction groups, see Creating Commerce Composer widget restriction groups.
Ø To define your wireframe, the maximum width is 166 and the maximum
height is 218. Divide your wireframe to include the layout template slots. For
tabbed slots append dottedRightBorder:true to the coordinates system to add a
dotted line to the column. This dotted line identifies the column as a tabbed
slot.
Save and close the file all the XML files.
5. Configure and run the Data Load utility
Testing a custom layout template in Management Center
Open the CMC and click on commerce composer and right click on the layout, select New Layout. You can see the new layout as below:
Assigning the layout- Under Page Directory
Make an entry in layoutAssignment.xml under page
directory as below
<Item
Delete="0">
<LayoutName>XYZDepartmentPageLayout</LayoutName>
<PageGroup>Content</PageGroup>
<PageAdminName>DepartmentPage</PageAdminName>
<Identifier></Identifier>
<PropagateToSubLevels></PropagateToSubLevels>
<ApplyToSubPageType></ApplyToSubPageType>
</Item>
This is used to mention the page group.
Defining the Widget and Layout relationship- Under Layout Directory.
1.
Layout.xml file defines the
Layout Type. The name and description will be shown in CMC when you select the
layout you need.
<!-- DepartmentPage -->
<LayoutType Sequence="1.0" Delete="0">
<LayoutName>XYZDepartmentPageLayout</LayoutName>
<TemplateName>XYZ
Department Page</TemplateName>
<Description>The
layout for XYZ department page.</Description>
<DeviceClass>Any</DeviceClass>
<State>1</State>
<IsTemplate>FALSE</IsTemplate>
<IsDefault>FALSE</IsDefault>
<StartDate></StartDate>
<EndDate></EndDate>
<Priority></Priority>
</LayoutType>
2.
Define the relation between
Layout & Widget in layoutWidgetRelationship.xml file as shown:
<Widget Delete="0">
<LayoutName>XYZDepartmentPageLayout</LayoutName>
<ParentWidgetDefIdentifier></ParentWidgetDefIdentifier>
<AdminName>XYZDepartmentPageContainer</AdminName>
<ChildWidgetDefIdentifier>BreadcrumbTrail</ChildWidgetDefIdentifier>
<ChildWidgetAdminName>BreadcrumbTrailWidget</ChildWidgetAdminName>
<WidgetSequence>0</WidgetSequence>
<SlotID>1</SlotID>
</Widget>
Ø ChildWidgetDefIdentifier tells you what type of widget you’re
using.
Ø WidgetSequence will be used for ordering the widgets for
particular slot. There can any number of widgets for a given slot.
Ø SlotID defines which slot you’re assigning the widget.
3.
Define the
E-Spot in WidgetNVP.xml file as shown:
<WidgetNVP Delete="0">
<LayoutName>XYZDepartmentPageLayout</LayoutName>
<AdminName>XYZDepartmentTopCategories</AdminName>
<Name>emsType</Name>
<Value>local</Value>
<Sequence>0.0</Sequence>
</WidgetNVP>
<WidgetNVP Delete="0">
<LayoutName>XYZDepartmentPageLayout</LayoutName>
<AdminName>XYZDepartmentTopCategories</AdminName>
<Name>emsName</Name>
<Value>Dept_TopCategories</Value>
<Sequence>0.0</Sequence>
</WidgetNVP>
<WidgetNVP Delete="0">
<LayoutName>XYZDepartmentPageLayout</LayoutName>
<AdminName>XYZDepartmentTopCategories</AdminName>
<Name>widgetOrientation</Name>
<Value>horizontal</Value>
<Sequence>0.0</Sequence>
</WidgetNVP>
<WidgetNVP Delete="0">
<LayoutName>XYZDepartmentPageLayout</LayoutName>
<AdminName>XYZDepartmentTopCategories</AdminName>
<Name>displayPreference</Name>
<Value>1</Value>
<Sequence>0.0</Sequence>
</WidgetNVP>
<WidgetNVP Delete="0">
<LayoutName>XYZDepartmentPageLayout</LayoutName>
<AdminName>XYZDepartmentTopCategories</AdminName>
<Name>showFeed</Name>
<Value>false</Value>
<Sequence>0.0</Sequence>
</WidgetNVP>
Widget Registering- Under Widget Directory
1.
Define your new widget in
registerWidgetdef.xml file as shown:
<Item Delete="0">
<WidgetDefIdentifier>Heading</WidgetDefIdentifier>
<WidgetStoreIdentifier></WidgetStoreIdentifier>
<WidgetUIObjectName>HeadingWidget</WidgetUIObjectName>
<WidgetType>1</WidgetType>
<WidgetVendor>xyz</WidgetVendor>
<WidgetPath>Widgets/XYZHeading/XYZHeading.jsp</WidgetPath>
<WidgetState>1</WidgetState>
<WidgetDefinitionxml>
<Definition></Definition>
</WidgetDefinitionxml>
<WidgetDisplayName>Heading
widget</WidgetDisplayName>
<WidgetDescription>This
widget has the heading</WidgetDescription>
</Item>
WidgetPath
specifies the path of your newly created widget.
2.
Subscribing your
Widget: subscribeWidgetdef.xml as shown:
<Item Delete="0">
<WidgetDefIdentifier>Heading</WidgetDefIdentifier>
<WidgetDefinitionxml />
<WidgetState>1</WidgetState>
</Item>
Configure and Run the Dataload files
Note: Before running the dataload
files, please create the e-Spots in the CMC.
Run the dataload files in the below order and re-start the
server
1. c:\IBM\WC70\bin>dataload.bat
c:\IBM\WC70\workspace\Dataload\XYZCommerceComposer\widget\wc-dataload-widget.xml
2. c:\IBM\WC70\bin>dataload.bat
c:\IBM\WC70\workspace\Dataload\XYCommerceComposer\template\wc-dataload-template.xml
3. c:\IBM\WC70\bin>dataload.bat
c:\IBM\WC70\workspace\Dataload\XYZCommerceComposer\layout\wc-dataload-layout.xml
4. c:\IBM\WC70\bin>dataload.bat c:\IBM\WC70\workspace\Dataload\XYZCommerceComposer\page\wc-dataload-page.xml
