WebSphere Commerce Developer

Enabling business users to create content pages with the Commerce Composer

After you enable business users to create catalog pages with the Commerce Composer, enable business users to create and design content pages with Commerce Composer. Implementing support for creating static content pages with Commerce Composer is different from the process to implement the content pages for your starter store that you are now replacing. The implementation of your original starter store content pages requires a separate JSP file for each page, which can be individually coded by your store developers. The implementation for content pages that are created with the Commerce Composer use a single common JSP file to render all static content pages. To enable users to create these content pages, you must create this common JSP file for your store.

After you create this JSP for your store, load the sample Home, Help, and Site Map content pages that use this common JSP file into your store. By loading these sample pages, you can use the pages to begin replacing your existing store content pages with pages that use Commerce Composer layouts and widgets.

Procedure

Update your starter store files to support displaying static content pages that use Commerce Composer assets.
  1. 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\store\StoreInfoArea directory, where store is the name of your store directory.
    5. Add the copied file into the StoreInfoArea directory 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" %>
    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.
  2. 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.
  3. 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.
    1. Go to the Stores\WebContent\WEB-INF\xml\seo\stores\store directory.
    2. Open the SEOURLPatterns.xml file for editing.
    3. 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>
    4. Save and close the file.
  4. 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}"/>
    For more information, see Commerce Composer layout caching and invalidation.
  5. 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 CommerceComposerStarterStoreSupport.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 by replacing <storeName> with your store name.
      For example,
      <ActionGroup Name="<AuroraESite>AllUsersViews"
    7. Save and close the file.
  6. 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 sample content page assets into your store to replace existing content pages.

You can use the sample content pages to replace your existing Home page, Help page, and Site Map page. After you load the pages into your store, business users can begin to edit the pages in the Commerce Composer. Users can add and remove widgets in the layouts for these content pages to change the content for the pages and to integrate the pages with other store pages.

  1. 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 CommerceComposerStarterStoreSupport.zip compressed file.
    2. In the dataload\page directory, copy the following files:
      layoutAssignment.csv
      The Data Load utility uses this CSV input file to assign layouts to pages. For more information about the type of information in this file, see layoutAssignment input file.
      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. For more information about the type of information in this file, see page input file.
      seopage.csv
      The Data Load utility uses this CSV input file to load the URL keyword for a content page. For more information about the type of information in this file, see seopage input file.
      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. For more information about the type of information in this file, see seopagedesc input file.
      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. For more information about the type of information in this file, see layout input file.
      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 dataload\page directory into the page directory.
    You do not need to update any of the provided configuration files.
  2. 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-oage.xml

    4. Verify the results of the data load.
  3. 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, Site Map page, and more. If you are updating only specific pages, remove the remaining pages from the value attribute for the footerLinkPages variable.
      <c:set var="footerLinkPages" value="HelpPage,SiteMapPage"/>

<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, Stores\WebContent\Store\include\styles\style1\CachedFooterDisplay.jsp, where Store is the name of your store directory.
    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, for the Help and Site Map page, remove the following code:
      <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>

<wcf:url var="SiteMapURL" value="SiteMap">
	<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 the SEO URL view name in the links to use the value of the PageAdminName for your content pages. You loaded the PageAdminName values for your pages when you loaded 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="${PrivacyViewURL}" id="WC_CachedFooterDisplay_link_5"><fmt:message key="FOOTER_PRIVACY_POLICY" bundle="${storeText}" />
		   <a href="${HelpContactViewURL}" id="WC_CachedFooterDisplay_link_6"><fmt:message key="FOOTER_HELP" bundle="${storeText}" />
		   <a href="${SiteMapURL}" id="WC_CachedFooterDisplay_link_7"><fmt:message key="FOOTER_SITE_MAP" bundle="${storeText}" />
		   ...
</div>
      Change HelpContactViewURL to be HelpPageViewURL, and change SiteMapURL to be SiteMapPageViewURL. The updated links 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="${PrivacyViewURL}" id="WC_CachedFooterDisplay_link_5"><fmt:message key="FOOTER_PRIVACY_POLICY" bundle="${storeText}" />
		   <a href="${HelpPageViewURL}" id="WC_CachedFooterDisplay_link_6"><fmt:message key="FOOTER_HELP" bundle="${storeText}" />
		   <a href="${SiteMapPageViewURL}" id="WC_CachedFooterDisplay_link_7"><fmt:message key="FOOTER_SITE_MAP" bundle="${storeText}" />
		   ...
</div>
    9. Save and close the file.
Verify that you can use the Commerce Composer to create content pages and assign layouts to the pages.
  1. Start your WebSphere Commerce server.
  2. In the Commerce Composer, create a content page and a layout for the page that can be viewed on your storefront.
    After you create the page and assign the layout, integrate the page with other store pages, and preview the page to ensure that the page displays correctly on your storefront. When you are previewing your store page, ensure that the footer links to your new content pages, such as the Help page and Site Map page, function correctly. If your page displays without errors or missing content, you successfully enabled business users to create content pages with the Commerce Composer.