Enabling business users to create content pages with the Commerce Composer tool

After you enable business users to create catalog pages with the Commerce Composer tool, enable business users to create and design content pages with Commerce Composer tool. WebSphere Commerce provides sample static content pages that you can load into your store to help you update your store to include content pages that use the Commerce Composer framework.

Procedure

Add the Aurora starter store StaticContentPageDisplay.jsp file into your store to support displaying static content pages.
1. In a file manager, go to the tempAuroraDir\StoreAssetsDir\StoreInfoArea directory, where tempAuroraDir is the temporary directory where you extracted the Aurora.sar archive.
2. Copy the StaticContentPageDisplay.jsp file.
3. Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.
4. Go to the Stores\WebContent\Madisons\StoreInfoArea directory.
5. Add the copied file into the StoreInfoArea for your store.
6. Open your store StaticContentPageDisplay.jsp file for editing. You must update the file to ensure that the file can work with your existing starter store assets.
7. Replace the code that defines the header, including the div element, with the following code:
```
<%@ include file="../include/LayoutContainerTop.jspf" %>
```
8. Replace the code that defined the footer, including the div element, with the following code:
```
<%@ include file="../include/LayoutContainerBottom.jspf" %>
```
  Your updated div element for the page can resemble the following code:
```
<div id="page">
		<%@ include file="../include/LayoutContainerTop.jspf"%>
			<div id="contentWrapper">
				<div id="content" role="main">
					<c:set var="rootWidget" value="${pageDesign.widget}"/>
					<wcpgl:widgetImport uniqueID="${rootWidget.widgetDefinitionIdentifier.uniqueID}" debug=false/>
				</div>
			</div>
			<%@ include file="../include/LayoutContainerBottom.jspf"%>
			
		</div>
```
9. Add the following code to include the JSP fragments that are needed for your store:
```
<%@ include file="../include/JSTLEnvironmentSetup.jspf" %>
<%@ include file="../include/StoreCommonUtilities.jspf" %>
<%@ include file="../include/CommonJSToInclude.jspf" %>
```
10. Replace the code that includes the ../Common/nocache.jspf fragment with code to include the ../include/nocache.jspf fragment.
11. Add the following code to import Dojo before the inclusion of the StoreCommonUtilities.jspf and CommonJSToInclude.jspf fragments:
```
<script type="text/javascript" charset="UTF-8" src="<c:out value="${dojoFile}"/>" djConfig="${dojoConfigParams}"></script>
<script type="text/javascript" charset="UTF-8" src="<c:out value="${dojoFileDesktop}"/>" djConfig="${dojoConfigParams}"></script>
```
12. Remove the following lines of code from the file:
  - <%@ taglib uri="http://commerce.ibm.com/coremetrics" prefix="cm" @>
  - <%@ taglib uri="http://commerce.ibm.com/foundation" prefix="wcf" @>
  - <%@ include file="../Common/JSPFExtToInclude.jspf"%>
  - <%@ include file="../Common/CommonJSPFToInclude.jspf"%>
  - <script type="text/javascript" src="${jsAssetsDir}javascript/CommonContextsDeclarations.js"></script>
13. Save and close the file.
Update the Struts configuration for your store to include the action forward for your new static content pages.
1. Go to the Stores\WebContent\WEB-INF directory.
2. Open the struts-config-ext.xml file for editing.
3. Add the following action forward to the file. Replace the store_ID with the store ID for your store.
  For example, 10851
```
<forward className="com.ibm.commerce.struts.ECActionForward" name="GenericStaticContentPageLayoutView/store_ID" path="/StoreInfoArea/StaticContentPageDisplay.jsp"/>
```
4. Save and close the file.

Update the SEO URL patterns for your store content pages to include the SEO mappings for new static content pages. By adding these mappings, you ensure that the correct static content page displays when a shopper visits your store with a specific SEO URL.

Go to the Stores\WebContent\WEB-INF\xml\seo\stores\Madisons directory.
Open the SEOURLPatterns.xml file for editing.

Add the following code to define SEO URL pattern for static content pages:

<seourl:seoUrlPatternDef name="StaticPagesPattern">
  <seourl:seoUrlPattern viewName="GenericStaticContentPageLayoutView">/LanguageToken/StoreToken:CatalogToken/StaticPagesToken</seourl:seoUrlPattern>
  <seourl:urlToParamMapping>
    <seourl:mapping name="langId" value="?LanguageToken?"/>
    <seourl:mapping name="storeId" value="?StoreToken?"/>
    <seourl:mapping name="catalogId" value="?CatalogToken?"/>
    <seourl:mapping name="pageId" value="?StaticPagesToken?"/>
    <seourl:mapping name="pageGroup" value="Content"/>
  </seourl:urlToParamMapping>
  <seourl:paramToUrlMapping>
    <seourl:mapping name="LanguageToken" value="?langId?"/>
    <seourl:mapping name="StoreToken" value="?storeId?"/>
    <seourl:mapping name="CatalogToken" value="?catalogId?"/>
    <seourl:mapping name="StaticPagesToken" value="?pageId?"/>
  </seourl:paramToUrlMapping>
  <seourl:usageDef CMCPrefix="true">
    <seourl:usage device="browser">
      <seourl:target>StaticPages</seourl:target>
    </seourl:usage>
  </seourl:usageDef>
</seourl:seoUrlPatternDef>

Save and close the file.

Add caching support for your store page JSP file.
Add the following code to the end of the <body> element before the end tag for the element:
```
<wcpgl:pageLayoutCache pageLayoutId="${pageDesign.layoutID}"/>
```
Update the access control policies files for your store to allow all users to execute the new struts view that you added.
1. In a file manager, go to the temporary directory where you extracted the CommerceComposerStoreSupportTutorial.zip compressed file.
2. Copy the MigrationAccessControlPolicies.xml file.
3. Go to the workspace_dir\xml\policies\xml directory.
4. Add the copied file into the xml directory.
5. Open the MigrationAccessControlPolicies.xml file for editing.
6. In the ActionGroup element, update the value for the Name attribute to be the value for your store, MadisonsAllUsersViews. Your updated policy XML can resemble the following code:
```
<Policies>
  <Action Name="GenericStaticContentPageLayoutView" CommandName="GenericStaticContentPageLayoutView">
  </Action>
  <ActionGroup Name="MadisonsAllUsersViews" OwnerID="RootOrganization">
    <ActionGroupAction Name="GenericStaticContentPageLayoutView"/>
  </ActionGroup>
</Policies>
```
7. Save and close the file.
Run the access control policy load utility to load the access control policy information.
1. Ensure that your WebSphere Commerce server is stopped before you run the utility.
2. In a command-line utility, go to the WCDE_installdir\bin directory.
3. Run the following command to load the input CSV files to load the subscription information:
  acpload MigrationAccessControlPolicies.xml
4. Check for any error in the load process by reviewing the following log file:
  WCDE_installdir\logs\acpload.log

Use the Data Load utility to load the static content page assets into your store.

By loading the sample content page assets for your store, you can begin replacing your existing static content pages with pages that use Commerce Composer layouts and widgets.

Prepare the input files that the Data Load utility requires to load the content page information.
1. In a file manager, go to the temporary directory where you extracted the CommerceComposerStoreSupportTutorial.zip compressed file.
2. In the source\dataload\page directory, copy the following files:
  
  layoutAssignment.csv
  
  The Data Load utility uses this CSV input file to assign layouts to pages.
  
  page.csv
  
  The Data Load utility uses this CSV input file to load new content pages into a store so that they can be used in the Commerce Composer tool.
  
  seopage.csv
  
  The Data Load utility uses this CSV input file to load the URL keyword for a content page.
  
  seopagedesc.csv
  
  The Data Load utility uses this CSV input file to load the following language-specific search engine optimization (SEO) properties for a content page: page title, meta description, and meta keyword.
  
  layout.csv
  
  The Data Load utility uses this CSV input file to load layouts and default layouts into a store so that they can be used in the Commerce Composer tool. This input file loads only the empty layout.
  
  wc-dataload-page.xml
  
  The wc-dataload-page.xml data load order configuration file defines the environment configuration file, business object configuration file, and input file that the Data Load utility uses to load the content page information.
3. Go to the WCDE_installdir\components\foundation\samples\DataLoad\CommerceComposer\page directory.
4. Back up the files that are within this directory.
5. Paste the copied files from the source\dataload\page directory into the page directory.
You do not need to update any of the provided configuration files.
Run the Data Load utility to load the widget subscription information.
1. Ensure that your WebSphere Commerce server is stopped before you run the Data Load utility.
2. In a command-line utility, go to the WCDE_installdir\bin directory.
3. Run the following command to load the input CSV files to load the subscription information:
  dataload ../components/foundation/samples/DataLoad/CommerceComposer/page/wc-dataload-page.xml
4. Verify that the Data Load utility loaded successfully by checking the log file for the utility. Ensure that the following statement displays in the log file: "Load completed successfully with no errors.".
If the footer of your store pages includes links to the new content pages, update the footer section to link to the new pages. Since the footer for your store is not enabled for Commerce Composer, you must update the JSP file for footer section to include the links to the new pages.
1. In a file manager, go to the tempAuroraDir\StoreAssetsDir\Widgets\Footer directory.
2. Open the Footer_Data.jspf file to view the source code.
3. Copy the code in the file that defines the SEO URL information for the linked pages in the footer for a page.
  For example, the following code defines the SEO URL information for the footer links to content pages, including the Help page:
```
<c:set var="footerLinkPages" value="HelpPage"/>
<wcf:getData type="com.ibm.commerce.pagelayout.facade.datatypes.PageType[]" 
  var="pages" expressionBuilder="getContentPagesByName">
  <c:forEach var="footerLinkpage" items="${footerLinkPages}">
    <wcf:param name="Name" value="${footerLinkpage}"/>
  </c:forEach>
  <wcf:param name="accessProfile" value="IBM_Store_Summary"/>
</wcf:getData>

<c:forEach var="page" items="${pages}">
  <wcf:url var="${page.pageIdentifier.externalIdentifier.name}ViewURL" patternName="StaticPagesPattern" 
   value="GenericStaticContentPageLayoutView">
    <wcf:param name="urlLangId" value="${urlLangId}" />
    <wcf:param name="storeId"   value="${storeId}"  />
    <wcf:param name="catalogId" value="${catalogId}"/>
    <wcf:param name="langId" value="${langId}" />
    <wcf:param name="pageId" value="${page.pageIdentifier.uniqueID }" />
  </wcf:url>
</c:forEach>
```
4. In the Enterprise Explorer view, go to the file that defines the SEO URLs for the footer links for your store pages.
  For example, If your store is based on the Madisons starter store the SEO information can be defined in the Stores\WebContent\Madisons\include\styles\style1\CachedFooterDisplay.jsp file.
5. Back up the file that defines the footer link SEO URLs.
6. Open the file for editing. Remove the code that defines the SEO URL information for the content pages that you are replacing with pages that use the Commerce Composer framework.
  For example, If your store is based on the Madisons starter store, remove the following code that defines the SEO URL information for the Help page:
```
<wcf:url var="HelpContactViewURL" value="Help">
  <wcf:param name="langId" value="${param.langId}" />
  <wcf:param name="storeId" value="${param.storeId}" />
  <wcf:param name="catalogId" value="${param.catalogId}" />
</wcf:url>
```
7. Add the copied code from the Footer_Data.jspf into the file that defines the footer links for your store.
8. Update any remaining references to the SEO URL view names for your content page to use the value of the PageAdminName for the page, which you loaded in the seopage.csv input file. You can view the value of the PageAdminName in the PLPAGE database table.
  For example, locate the following code in your CachedFooterDisplay.jsp file:
```
<div id="WC_CachedFooterDisplay_div_2" class="left">
  <p class="sidebar_header strong"><fmt:message key="FOOTER_CUSTOMER_SUPPORT" bundle="${storeText}" />
  ...
  <a href="${HelpContactViewURL}" id="WC_CachedFooterDisplay_link_6"><fmt:message key="FOOTER_HELP" bundle="${storeText}" />
  ...
</div>
```
  Change HelpContact to be HelpPage. The updated link can resemble the following code:
```
<div id="WC_CachedFooterDisplay_div_2" class="left">
  <p class="sidebar_header strong"><fmt:message key="FOOTER_CUSTOMER_SUPPORT" bundle="${storeText}" />
  ...
  <a href="${HelpPageViewURL}" id="WC_CachedFooterDisplay_link_6"><fmt:message key="FOOTER_HELP" bundle="${storeText}" />
  ...
</div>
```
9. Save and close the file.