As part of WebSphere Commerce v7.0 Feature Pack 5, IBM released a new feature, the Aurora page layout framework, that has the potential to significantly allow the business users to maintain and change specific page designs and content, schedule them, and prioritize them based upon business or creative needs.
For those not familiar with the Aurora page layout framework, it’s a feature in the Aurora starter store that allows static, product, and category pages to be assigned different layouts by business users that can be populated with a variety of widgets and other content.
**As a note, and a caution from IBM: This framework is a technology preview and is subject to change in future WebSphere Commerce releases. You must consider potential future changes to this framework, such as changed page layout and widgets before you use this approach.
To actually create a page layout, and enable it within Management Center, you need to follow the steps below. I’ve documented these and attached example code, that leverages out of the box Aurora code, with modifications where necessary. This example is only for the HomePage layout type; however, it could easily be any other valid page layout type, as you’ll follow the same steps.
1. Create a Page Layout JSP, I’ve named mine AlternateHomePageOne.jsp, within the Layouts folder under the Aurora store folder, or AuroraStorefrontAssetStore folder, if you’re using the extended sites model. I’ve taken the base Aurora HomePage layout, and modified it, as shown below, to include only the header, footer, and one additional e-marketing spot to be used as content. The e-marketing spot name within my JSP is AlternateHomePageOne_Content.
<!doctype HTML>
<!-- BEGIN HomePage.jsp -->
<%--
*****
* This JSP diplay the product details given a productId or partNumber. This page imports the following components
* Header Component - Display header links, department widget, mini shop-cart widget and Search widget
* Product Image Component - Display the product image
* Product Description Component - Displays product short description, attributes, inventory component, price component etc.,
* Merchandising Association Component
* E-spots for Recently Viewed and Recommendations
* Product TAB component
* Footer Component - Display footer links
*****
--%>
<%@include file="../Common/EnvironmentSetup.jspf" %>
<%@include file="../Common/nocache.jspf" %>
<%@ taglib uri="http://commerce.ibm.com/coremetrics" prefix="cm" %>
<wcf:getData type="com.ibm.commerce.infrastructure.facade.datatypes.OnlineStoreType"
var="onlineStoreSEO"
expressionBuilder="findSEOPageDefintionByPageNameAndStoreID">
<wcf:contextData name="storeId" data="${storeId}"/>
<wcf:param name="storeId" value="${storeId}"/>
<wcf:param name="dataLanguageIds" value="${langId}"/>
<wcf:param name="pageName" value="HOME_PAGE"/>
<wcf:param name="accessProfile" value="IBM_Store_SEOPageDefinition_Details"/>
</wcf:getData>
<c:set var="pageTitle" value="${onlineStoreSEO.SEOPageDefinitions[0].title}" />
<c:set var="metaDescription" value="${onlineStoreSEO.SEOPageDefinitions[0].metaDescription}" />
<c:set var="metaKeyword" value="${onlineStoreSEO.SEOPageDefinitions[0].metaKeyword}" />
<c:set var="fullImageAltDescription" value="${onlineStoreSEO.SEOPageDefinitions[0].fullImageAltDescription}" scope="request" />
<html xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
<flow:ifEnabled feature="FacebookIntegration">
<%-- Facebook requires this to work in IE browsers --%>
xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:og="http://opengraphprotocol.org/schema/"
</flow:ifEnabled>
xmlns:waistate="http://www.w3.org/2005/07/aaa" lang="${shortLocale}" xml:lang="${shortLocale}">
<head>
<title><c:out value="${pageTitle}"/></title>
<meta name="description" content="<c:out value="${metaDescription}"/>"/>
<meta name="keyword" content="<c:out value="${metaKeyword}"/>"/>
<link rel="canonical" href="<c:out value="${env_TopCategoriesDisplayURL}"/>" />
<!--Main Stylesheet for browser -->
<link rel="stylesheet" href="${jspStoreImgDir}${env_vfileStylesheet}" type="text/css" media="screen"/>
<!-- Style sheet for print -->
<link rel="stylesheet" href="${jspStoreImgDir}${env_vfileStylesheetprint}" type="text/css" media="print"/>
<!-- Include script files -->
<script type="text/javascript" src="${dojoFile}" djConfig="${dojoConfigParams}"></script>
<%@include file="../Common/CommonJSToInclude.jspf" %>
<%@include file="HomePageEx.jspf" %>
<script type="text/javascript" src="${jsAssetsDir}javascript/StoreCommonUtilities.js"></script>
<script type="text/javascript" src="${jsAssetsDir}javascript/Widgets/Search.js"></script>
<script type="text/javascript" src="${jsAssetsDir}javascript/CommonContextsDeclarations.js"></script>
<script type="text/javascript" src="${jsAssetsDir}javascript/CommonControllersDeclaration.js"></script>
<script type="text/javascript" src="${jsAssetsDir}javascript/Widgets/ShoppingList/ShoppingList.js"></script>
<script type="text/javascript" src="${jsAssetsDir}javascript/Widgets/ShoppingList/ShoppingListServicesDeclaration.js"></script>
<script type="text/javascript" src="${jsAssetsDir}javascript/Common/ShoppingActionsServicesDeclaration.js"></script>
<script type="text/javascript" src="${jsAssetsDir}javascript/Common/ShoppingActions.js"></script>
<script type="text/javascript" src="${jsAssetsDir}javascript/Widgets/MiniShopCartDisplay/MiniShopCartDisplay.js"></script>
<script type="text/javascript" src="${jsAssetsDir}javascript/Widgets/Department/Department.js"></script>
<script type="text/javascript" src="${jsAssetsDir}javascript/Widgets/QuickInfo/QuickInfo.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function() {
shoppingActionsJS.setCommonParameters('${langId}','${storeId}','${catalogId}','${userType}','${env_CurrencySymbolToFormat}');
shoppingActionsServicesDeclarationJS.setCommonParameters('${langId}','${storeId}','${catalogId}');
});
</script>
<flow:ifEnabled feature="FacebookIntegration">
<%@include file="../Common/JSTLEnvironmentSetupExtForFacebook.jspf" %>
<%--Facebook Open Graph tags that are required --%>
<meta property="og:title" content="<c:out value="${pageTitle}"/>" />
<meta property="og:image" content="<c:out value="${schemeToUse}://${request.serverName}${portUsed}${jspStoreImgDir}images/logo.png"/>" />
<meta property="og:url" content="<c:out value="${env_TopCategoriesDisplayURL}"/>"/>
<meta property="og:type" content="website"/>
<meta property="fb:app_id" name="fb_app_id" content="<c:out value="${facebookAppId}"/>"/>
<meta property="og:description" content="${onlineStoreSEO.SEOPageDefinitions[0].metaDescription}" />
</flow:ifEnabled>
</head>
<body>
<%-- This file includes the progressBar mark-up and success/error message display markup --%>
<%@ include file="../Common/CommonJSPFToInclude.jspf"%>
<%@ include file="../Widgets/QuickInfo/QuickInfoPopup.jspf" %>
<%@ include file="../Widgets/ShoppingList/ItemAddedPopup.jspf" %>
<!-- Begin Page -->
<div id="page">
<!-- Import Header Widget -->
<div class="header_wrapper_position" id="headerWidget">
<%out.flush();%>
<c:import url = "${env_jspStoreDir}Widgets/Header/Header.jsp" />
<%out.flush();%>
</div>
<!--Start Page Content-->
<div class="content_wrapper_position" role="main">
<div class="content_wrapper">
<!--For border customization -->
<div class="content_top">
<div class="left_border"></div>
<div class="middle"></div>
<div class="right_border"></div>
</div>
<!-- Main Content Area -->
<div class="content_left_shadow">
<div class="content_right_shadow">
<div class="main_content">
<!-- Start Main Content -->
<%out.flush();%>
<c:import url="${env_jspStoreDir}Widgets/ESpot/ContentRecommendation/ContentRecommendation.jsp">
<c:param name="emsName" value="AlternateHomePageOne_Content" />
<c:param name="numberContentPerRow" value="1" />
<c:param name="catalogId" value="${catalogId}" />
</c:import>
<%out.flush();%>
<!-- End Main Content -->
</div>
</div>
</div>
<!--For border customization -->
<div class="content_bottom">
<div class="left_border"></div>
<div class="middle"></div>
<div class="right_border"></div>
</div>
</div>
</div>
<!--End Page Content-->
<!--Start Footer Content-->
<div class="footer_wrapper_position">
<%out.flush();%>
<c:import url = "${env_jspStoreDir}Widgets/Footer/Footer.jsp" />
<%out.flush();%>
</div>
<!--End Footer Content-->
<!--Start: Contents after page load-->
<c:if test="${env_fetchMarketingDetailsOnLoad}">
<%out.flush();%>
<c:import url = "${env_jspStoreDir}Widgets/PageLoadContent/PageLoadContent.jsp">
<c:param name="doubleContentAreaESpot" value="true"/>
<c:param name="homeHeroESpot" value="true"/>
<c:param name="scrollableESpot" value="true"/>
<c:param name="homeLeftESpot" value="true"/>
<c:param name="homeRightTopESpot" value="true"/>
<c:param name="homeRightBottomESpot" value="true"/>
</c:import>
<%out.flush();%>
</c:if>
<!--End: Contents after page load-->
</div>
<flow:ifEnabled feature="Analytics"><cm:pageview/></flow:ifEnabled>
</body>
<!-- END HomePage.jsp -->
</html>
2. Every page layout that you create needs to have two (2) images created for it as well. These images are used within Management Center to help identify what areas of the page layout you’ve created can be customized with content. You will need a full-size and thumbnail image. You’ll want to store these images within the images/layouts folder under your store directory. You’ll reference these images in a future SQL query used to create the page layout entries within Management Center. The following dimensions are recommended for the images you create:
- Full Image Size: 176px x 270px
- Thumbnail Image Size: 76px x 126px
3. Once you have your JSP and images in place, you need to create a new WebSphere Commerce struts Action and View that you’ll then configure in the database to be used for display. Add the following lines within their respective areas in your struts-config-ext.xml file. You’ll need to replace {STORE_ID} with the appropriate store ID. I’ve named the Struts Action GenericAlternateHomePageOneLayoutView.
<forward className="com.ibm.commerce.struts.ECActionForward" name="GenericAlternateHomePageOneLayoutView/{STORE_ID}" path="/Layouts/AlternateHomePageOne.jsp">
</forward>
<action path="/GenericAlternateHomePageOneLayoutView" type="com.ibm.commerce.struts.BaseAction">
<set-property property="credentialsAccepted" value="{STORE_ID}:P" />
</action>
4. Run an ACP load for the new Struts Action. I’ve provided the XML shown below that can be used when running the command, but you’ll need to run the actual acpload command to resolve and insert the XML into your database.
<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?> <Policies> <Action Name="ExecuteCommand" CommandName="Execute"></Action> <Action Name="GenericAlternateHomePageOneLayoutView" CommandName="GenericAlternateHomePageOneLayoutView"> </Action> <ActionGroup Name="AllSiteUsersViews" OwnerID="RootOrganization"> <ActionGroupAction Name="GenericAlternateHomePageOneLayoutView" /> </ActionGroup> </Policies>
5. Run the following SQL to insert the page layout into the database to be picked up and recognized by Management Center. You’ll need to replace {STORE_IDENTIFIER} with the store identifier for your store.
I have generalized the following SQL statement so you’ll need to replace the following items in the SQL match up with your specific needs:
- {STORE_IDENTIFIER} : The STOREENT.IDENTIFIER column for the store you wish to associate this page layout with.
- {PAGELAYOUT_DESCRIPTION} : The description for your new page layout.
- {PAGELAYOUT_THUMBNAIL_IMAGE} : The thumbnail image (full) path you created for your page layout.
- {PAGELAYOUT_FULLSIZE_IMAGE} : The full size image (full) path you created for your page layout.
-- AlternateHomePageOne
INSERT INTO PAGELAYOUT (PAGELAYOUT_ID, NAME, VIEWNAME, MEMBER_ID, STOREENT_ID, PAGELAYOUTTYPE_ID, DESCRIPTION, THUMBNAIL, FULLIMAGE, DEVICETYPE, STATE, ISTEMPLATE) VALUES (
(SELECT CASE WHEN MIN(PAGELAYOUT_ID) > -10001 THEN -10001 ELSE MIN(PAGELAYOUT_ID) - 1 END FROM PAGELAYOUT),
'AlternateHomePageOne',
'GenericAlternateHomePageOneLayoutView',
(SELECT MEMBER_ID FROM STOREENT WHERE IDENTIFIER = '{STORE_IDENTIFIER}'),
(SELECT STOREENT_ID FROM STOREENT WHERE IDENTIFIER = '{STORE_IDENTIFIER}'),
'HomePage',
'{PAGELAYOUT_DESCRIPTION}',
'{PAGELAYOUT_THUMBNAIL_IMAGE}',
'{PAGELAYOUT_FULLSIZE_IMAGE}',
'Web',
1,
0
);
6. Having registered the page layout, it is now available to the business users to be assigned as desired through Management Center. If you wish to setup, start or schedule a page layout using SQL rather than Management Center, please reference this post, Setup, Start or Schedule an Aurora Page Layout w/SQL.
Also note: There are a few important things to consider when considering Aurora and the page layout framework.
- IT involvement is required to develop the page layouts. JSPs and images have to be created and registered for each page layout template that the business users want created.
- Assignment of the page layouts are handled through WebSphere Commerce Management Center. A new tab or menu selection has been added in Management Center called ‘Page Layout’ that is used to adjust page layouts.
- Widgets and e-marketing spots need to be populated with appropriate content prior to the assignment and scheduling of the page layout; otherwise, you’ll get weird results and your customers will wonder what happened!
Great post, Drew!
We’re just starting a new project where we will modify the Aurora storefront, so this is of great value.
Wouter, thanks for the comment! It’s always nice to hear some finds value in what you post!
Hi! Drew, Thanks a lot for this post.
I have published Aurora store but I am not able to view the store. I always get 404 error. And in feature pack 5, I am not able to find Madisons store for publish. I have tried creating few different stores but no success. I am following same steps for publishing Aurora store as I do for Madisons store.
Best regards,
Charukant
Charukant, Without further information, such as the http logs, any Java stack traces that are occurring, it is impossible to determine what is causing your 404 error. It honestly sounds like the http server configuration is not configured properly, or you’re using an incorrect URL. I’d check into both of those things to determine if there are issues preventing you from viewing your web site there.
Shooed off 404. Now; it seems issue is with enabling the Solar search
Hi Drew,
I thought this might link well with what you have here. We wanted to go a step further and have a new layout type, but found there were no instructions. The IBM team had forgotten to add the following to the external IC.
http://sarona.co.uk/blog/2013/01/define-a-new-page-layout-type-for-websphere-commerce-page-layouts/
Thanks Bleddyn