Modifying a store JSP page to use the Commerce Composer Framework

In this lesson, you update the OrderItemDisplay.jsp JSP file to call the Commerce Composer framework service. By calling the Commerce Composer framework, the JSP file uses the Commerce Composer framework service to retrieve the Shopping Cart page design and content.

Within the Commerce Composer framework, a page is a URL, with no content. The content of a page is defined by a layout when the layout is assigned to the page. A layout is a layout template that has widgets, which are included within the layout template slots. The widgets are used to add the content for the page.

Previously, you used the default provided Two-column with right sidebar template layout template as a base template. You set slot 4 in the template to include your custom ShoppingCartDetailWidget as a predefined widget within the slot. Slot 5 includes the CatalogEntryRecommendationWidget predefined for the slot. The remaining slots for the layout template do not contain any predefined content or widgets.

With your template defined and registered, the Commerce Composer framework layout authoring services enable business users to use the template to create a layout. The layout calls the template to render any included widgets. For more information about layout templates, see Commerce Composer layout template architecture.

Procedure

Open WebSphere Commerce Developer. Switch to the Enterprise Explorer view.
Go to the Stores\WebContent\Aurora\ShoppingArea\ShopcartSection directory.
Open the OrderItemDisplay.jsp file for editing.

Add the following code to the beginning of the file:

<%@ taglib uri="http://commerce.ibm.com/pagelayout" prefix="wcpgl" %>

Add the following code after the </head> tag and before the <body> tag:

<%-- Fetch the corresponding information for the sampleShoppingCartDetailPage,
     which is the PageAdminName you defined in your page.csv. --%>
<wcf:getData 
type="com.ibm.commerce.pagelayout.facade.datatypes.PageType"
      var="shopcart"
      expressionBuilder="getContentPagesByName">
  <wcf:param name="Name" value="SampleShoppingCartDetailPage"/>
  <wcf:param name="accessProfile" value="IBM_Store_Summary"/>
</wcf:getData>

<!-- Fetch the corresponding SEO information for the page if needed --> 
<wcf:getData 
type="com.ibm.commerce.infrastructure.facade.datatypes.OnlineStoreType"
var="onlineStoreSEO"
expressionBuilder="findSEOPageDefByPageGroupAndObjectIDAndStoreID">
  <wcf:contextData name="storeId" data="${storeId}"/>
  <wcf:param name="storeId" value="${storeId}"/>
  <wcf:param name="dataLanguageIds" value="${langId}"/>
  <wcf:param name="pageGroup" value="Content"/>
  <wcf:param name="objectId" value="${shopcart.pageIdentifier.uniqueID}"/>
  <wcf:param name="accessProfile" value="IBM_Store_SEOPageDefinition_Details"/>
</wcf:getData>

<%-- Call the new PageDesign service to resolve the layout to use this 
     Shopping Cart Display page. Input to PageDesign service:
     - pageGroup: can be Category, CatalogEntry, Content
     - ObjectIdentifier:can be categoryid, productid, pageid respectively.
     - deviceClass – can be Web, Mobile. --%>
<wcf:getData type="com.ibm.commerce.pagelayout.facade.datatypes.PageDesignType" 
  var="pageDesign" scope="request" expressionBuilder="getPageDesign">
  <wcf:contextData name="storeId" data="${storeId}" />
  <wcf:contextData name="catalogId" data="${catalogId}" />
  <wcf:param name="deviceClass" value="${deviceClass}"/>
  <wcf:param name="pageGroup" value="Content"/>
  <wcf:param name="ObjectIdentifier" value="${shopcart.pageIdentifier.uniqueID}"/>
</wcf:getData>

<!-- Include this to improve the performance -->
<c:set var="PAGE_DESIGN_DETAILS_VAR" value="pageDesign" scope="request"/>

Within the <body> tags, locate the following code:

<%-- This file includes the progressBar mark-up and success/error message display markup --%>
            <%@ include file="../../Common/CommonJSPFToInclude.jspf"%>

Move the code that you located to before the following code:

<c:set var="shoppingCartPage" value="true" scope="request"/>

Within the file, locate the following code:

<div id="page">
<!-- Header Widget -->
<div class="header_wrapper_position" id="headerWidget">
  <%out.flush();%>
  <c:import url = "${env_jspStoreDir}/Widgets/Header/Header.jsp" />
  <%out.flush();%>
</div>

<script type="text/javascript">
  dojo.addOnLoad(function() {
    CommonControllersDeclarationJS.setControllerURL('ShopCartDisplayController','<c:out
    value="${ShopCartDisplayViewURL}"/>');
  });
</script>

<div class="content_wrapper_position" role="main">
<div class="content_wrapper">
<div class="content_left_shadow">
<div class="content_right_shadow">
<div class="main_content">
<%out.flush();%>
<c:import url="/${sdb.jspStoreDir}/include/BreadCrumbTrailDisplay.jsp">
  <c:param name="topCategoryPage" value="${requestScope.topCategoryPage}" />
  <c:param name="categoryPage" value="${requestScope.categoryPage}" />
  <c:param name="productPage" value="${requestScope.productPage}" />
  <c:param name="shoppingCartPage" value="${requestScope.shoppingCartPage}" />
  <c:param name="compareProductPage" value="${requestScope.compareProductPage}" />
  <c:param name="finalBreadcrumb" value="${requestScope.finalBreadcrumb}" />
  <c:param name="extensionPageWithBCF" value="${requestScope.extensionPageWithBCF}" />
  <c:param name="hasBreadCrumbTrail" value="${requestScope.hasBreadCrumbTrail}" />
  <c:param name="requestURIPath" value="${requestScope.requestURIPath}" />
  <c:param name="SavedOrderListPage" value="${requestScope.SavedOrderListPage}" />
  <c:param name="pendingOrderDetailsPage" value="${requestScope.pendingOrderDetailsPage}" />
  <c:param name="sharedWishList" value="${requestScope.sharedWishList}" />
  <c:param name="searchPage" value="${requestScope.searchPage}"/>
</c:import>
<%out.flush();%>

<div class="container_content_rightsidebar">
  <div class="left_column">
  <%@ include file="../../Snippets/Order/Cart/B2BOrderPricingPopup.jspf" %>
  <%@ include file="../../Snippets/Marketing/Promotions/PromotionChoiceOfFreeGiftsPopup.jspf" %>
  <flow:ifDisabled feature="AjaxCheckout">
    <form name="ReplaceItemForm" method="post" action="OrderChangeServiceItemDelete" 
     id="ReplaceItemForm">
      <!-- Define all the hidden fields required for submitting this form in case of Non-Ajax Checkout -->
      <input type="hidden" name="storeId" value='<c:out value="${storeId}"/>' 
       id="WC_OrderItemDisplay_inputs_2"/>
      <input type="hidden" name="langId" value='<c:out value="${langId}" />' 
       id="WC_OrderItemDisplay_inputs_3"/>
      <input type="hidden" name="orderId" value='<c:out value="${order.orderIdentifier.uniqueID}"/>' 
       id="WC_OrderItemDisplay_inputs_4"/>
      <input type="hidden" name="catalogId" value='<c:out value="${catalogId}"/>' 
       id="WC_OrderItemDisplay_inputs_5"/>
      <input type="hidden" name="errorViewName" value="InvalidInputErrorView" 
       id="WC_OrderItemDisplay_inputs_6"/>
      <input type="hidden" name="orderItemId" value="" 
       id="WC_OrderItemDisplay_inputs_7"/>
      <input type="hidden" name="URL" value="AjaxOrderItemDisplayView" 
       id="WC_OrderItemDisplay_inputs_1"/>
      <input type="hidden" name="calculationUsage" value="-1,-2,-3,-4,-5,-6,-7" 
       id="WC_OrderItemDisplay_inputs_8"/>
    </form>
  </flow:ifDisabled>

  <span id="ShopCartDisplay_ACCE_Label" 
   class="spanacce"><fmt:message key="ACCE_Region_Shopping_Cart_Content"/></span>
  <div dojoType="wc.widget.RefreshArea" widgetId="ShopCartDisplay" id="ShopCartDisplay" 
   controllerId="ShopCartDisplayController" ariaMessage="<fmt:message 
   key="ACCE_Status_Shopping_Cart_Content_Updated"/>" ariaLiveId="${ariaMessageNode}" 
   role="region" aria-labelledby="ShopCartDisplay_ACCE_Label">
    <%out.flush();%>
    <c:import url="/${sdb.jspStoreDir}/ShoppingArea/ShopcartSection/ShopCartDisplay.jsp"/>
    <%out.flush();%>
  </div>
  <script type="text/javascript">
    dojo.addOnLoad(function() {
      parseWidget("ShopCartDisplay");
    });
  </script>                                                         
  <br/>

  <flow:ifEnabled feature="IntelligentOffer">
    <%-- Begin - Added for Coremetrics Intelligent Offer to Display dynamic recommendations 
         for the most recently viewed product --%>
    <div class="item_spacer_5px"></div>
    <div class="widget_product_listing_position">
      <%out.flush();%>
      <c:import url="/Widgets/com.ibm.commerce.store.widgets.IBMProductRecommendations/IBMProductRecommendations.jsp">
        <c:param name="emsName" value="ShoppingCart_IntellOffer" />
        <c:param name="catalogId" value="${WCParam.catalogId}" />
        <c:param name="pageSize" value="4" />
        <c:param name="pageView" value="miniGrid" />
      </c:import>
      <%out.flush();%>   

    </div>
    <%-- End - Added for Coremetrics Intelligent Offer --%>
  </flow:ifEnabled>
</div>
<div class="right_column">
  <!-- Vertical Recommendations Widget -->
  <div class="widget_recommended_position">                                                       

    <% out.flush(); %>
    <c:import url="/Widgets/com.ibm.commerce.store.widgets.CatalogEntryRecommendation/CatalogEntryRecommendation.jsp">
      <c:param name="emsName" value="ShoppingCartRight_CatEntries"/>
      <c:param name="widgetOrientation" value="vertical"/>
      <c:param name="pageView" value="sidebar"/>
      <c:param name="pageSize" value="2"/>
    </c:import>
    <% out.flush(); %>

  </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Widget -->
<div class="footer_wrapper_position">
  <%out.flush();%>
  <c:import url = "${env_jspStoreDir}/Widgets/Footer/Footer.jsp" />
  <%out.flush();%>
</div>
</div>

Replace the code that you located with the following code:

<!-- Begin Page -->
	<c:set var="layoutPageIdentifier" value="${shopcart.pageIdentifier.uniqueID}"/>
<c:set var="layoutPageName" value="${shopcart.pageIdentifier.externalIdentifier.name}"/>
<%@ include file="/Widgets/Common/ESpot/LayoutPreviewSetup.jspf"%>		
<div id="headerWrapper">
  <%out.flush();%>
  <c:import url = "${env_jspStoreDir}Widgets/Header/Header.jsp" />
  <%out.flush();%>
</div>	
<div id="page">
  <c:set var="rootWidget" value="${pageDesign.widget}"/>
  <wcpgl:widgetImport uniqueID="${rootWidget.widgetDefinitionIdentifier.uniqueID}" debug=false/>
</div>
<div id="footerWrapper">
  <%out.flush();%>
  <c:import url="${env_jspStoreDir}Widgets/Footer/Footer.jsp"/>
  <%out.flush();%>
</div>

Note: Use the widgetImport tag to import the container widget for your Shopping Cart page template. The values for the following properties must be set in a standard way before the JSP file calls the widgetImport functionality:

layoutPreviewLayoutId
Name
Default