Tutorials > Management Center > Add new fields in the Catalogs tool

< Previous | Next >

Customize store UI using the getData tag

In this lesson, you create a JSP file that displays warranty information using the getData tag. You update the ProductDisplay.jsp to link to this JSP file for warranty information. After completing the customization, shoppers see a link to "Warranty information" from the Product Display page. When shoppers click this link, the warranty JSP page displays.

Tip: The consumer direct sample store pages use the data bean programming model. Existing store pages, such as ProductDisplay.jsp do not use the getData tag. In this tutorial, you create a JSP page which retrieves warranty information using the getData tag.

Procedure

1. Create the storefront get-data-config file.

   Warranty information is added to the CatalogEntry noun UserData element.

   To fetch extra warranty information from catalogEntry, create a storefront get-data-config file that overwrites the configuration file of the catalog component. JSP pages reference the getData tag by using expression builder and access profile names. The <wcf:getData> tag, retrieves service data objects from WebSphere Commerce services and associates them with a declared scripting variable with an ID.

   1. In the Enterprise Explorer view, expand Stores > WebContent > WEB-INF > config.

   2. Right-click config; then click New > Folder.

   3. In the Folder name field, enter com.ibm.commerce.catalog-ext.

   4. Click Finish. The com.ibm.commerce.catalog-ext folder is created under the config directory.

   5. Right-click com.ibm.commerce.catalog-ext and select New > File.

   6. In the File name field, enter get-data-config.xml.

   7. Click Finish. Enter the following code in get-data-config.xml file.

      <?xml version="1.0" encoding="UTF-8"?>
      <wcf:get-data-config
      xmlns:wcf="http://www.ibm.com/xmlns/prod/commerce/foundation"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.ibm.com/xmlns/prod/commerce/foundation ../../xsd/get-data-config.xsd ">
      
      <expression-builder>
      <name>getCatalogEntryWithWarranty</name>
      <data-type-name>CatalogEntry</data-type-name>
      <expression-template>{_wcf.ap=$accessProfile$}/CatalogEntry[CatalogEntryIdentifier[(UniqueID='$catalogEntryId$')]]</expression-template>
      <param> 
      <name>accessProfile</name>
      <value>MyCompany_All</value>
      </param> 
      </expression-builder>
      
      </wcf:get-data-config>
      

      Where:

      expression-builder

      name

      getCatalogEntryWithWarranty is used by getData tag and is referenced by the JSP page which will be created in the next step.

      data-type-name

      The noun.

      expression-template

      The XPath specify defined in the wc-query-MyCompanyCatalogEntry-get.tpl file.

      param

      name

      The name of the access profile, accessProfile, defined in the wc-query-MyCompanyCatalogEntry-get.tpl file

      value

      The value, MyCompany_All, of the access profile defined in the wc-query-MyCompanyCatalogEntry-get.tpl file.

   8. Save the file.

2. Extend the property file.

   1. In the Enterprise Explorer view, expand Stores > Java Resources: src > ConsumerDirect > storetext.properties.

   2. Open the storetext.properties file.

   3. Add the header properties for the new title: productWarrantyDisplayTitle=Warranty information.

3. Create the WarrantyDisplay.jsp file to display Warranty information in the store.

   1. Open WebSphere Commerce Developer in the Java EE perspective.

   2. In the Enterprise Explorer view, navigate to Stores > WebContent > ConsumerDirect > ShoppingArea > CatalogSection > CatalogEntrySubsection.

   3. Right click CatalogEntrySubsection, select New > Web Page.

   4. In the File name field, enter WarrantyDisplay.jsp. In the Template section, make sure JSP is selected under Basic Templates.

   5. Click Finish.

   6. Click the Source tab and replace the contents of the WarrantyDisplay.jsp file with the following code sample:

      <%
      %>
      <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
      <%@ taglib uri="http://commerce.ibm.com/foundation" prefix="wcf" %>
      
      <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
      
      <%@ taglib uri="http://commerce.ibm.com/base" prefix="wcbase" %>
      <%@ taglib uri="flow.tld" prefix="flow" %>
      <%@ include file="../../../include/JSTLEnvironmentSetup.jspf"%>
      
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html>
      <head>
      <title>Warranty Display</title>
      <link rel="stylesheet" href="<c:out value="${jspStoreImgDir}${vfileStylesheet}"/>" type="text/css"/>
      </head>
      <body>
      <%@ include file="../../../include/LayoutContainerTop.jspf"%>
      
      <wcf:getData var="catentries" type="com.ibm.commerce.catalog.facade.datatypes.CatalogEntryType[]" expressionBuilder="getCatalogEntryWithWarranty">
      <wcf:contextData name="storeId" data="${WCParam.storeId}"/>
      <wcf:contextData name="catalogId" data="${WCParam.catalogId}"/>
      <wcf:contextData name="langId" data="${WCParam.langId}"/>
      <wcf:param name="catalogEntryId" value="${WCParam.catalogEntryID}"/>
      <wcf:param name="accessProfile" value="MyCompany_All"/>
      </wcf:getData>
      <%-- Create a table to display the value for ProductID, Warranty Type & Warranty Term --%>
      <table align="center" cellpadding="2" cellspacing="0" width="786" border="0" >
      <tbody align="center">
      <tr align="left">
      <td align="left">
      <p align="left">
      <b><fmt:message key="productWarrantyDisplayTitle" bundle="${storeText}"/></b></p>
      <table border="1" align="center">
      <tr>
      <td>ProductID</td><td>Warranty Type</td><td>Warranty Term</td>
      </tr>
      <c:forEach var="catalogEntry" items="${catentries}">
      
      <tr align="center">
      <td>${catalogEntry.catalogEntryIdentifier.uniqueID}</td>
      <%-- Search the value for UserDataField & only output the value for Warranty Term & Warranty Type --%>
      <c:forEach var="userDataField" items="${catalogEntry.userData.userDataField}"> 
      <c:if test="${userDataField.typedKey == 'wartype' || userDataField.typedKey == 'warterm'}">
      <td>${userDataField.typedValue}</td>
      </c:if>
      </c:forEach>
      </tr>
      </c:forEach>
      </table>
      
      </tbody>
      </table>
      <%@ include file="../../../include/LayoutContainerBottom.jspf"%>
      </body>
      </html>
      

      The page retrieves data by using the getData tag.

   7. Save the file.

4. Update the ProductDisplay.jsp to link to warrantyDisplay.jsp file.

   1. Open the Java EE perspective.

   2. In the Enterprise Explorer view expand Stores > WebContent > ConsumerDirect > ShoppingArea > CatalogSection > CatalogEntrySubsection.

   3. Open the ProductDisplay.jsp file.

   4. In the ProductDisplay.jsp, locate the following lines which are at the bottom of the file:

      <script type="text/javascript">
      <!--
      <![CDATA[
      if (Discount.getAreThereAnyDiscounts()) {
          document.write('<br /><br /><span class="discount">');
          document.write('<img src="<c:out value="${jspStoreImgDir}" />images/Discount_star.gif" ${disclaimer}" escapeXml="true" />" />
      <c:out value="${disclaimer}" escapeXml="true"/>');
          document.write('</span>');
                                  }
          //[[>--> 
      </script>
      

   5. Add a Warranty link. Add the code following the preceding code and before the </td> tag:

      <br/>
      <img src="<c:out value="${jspStoreImgDir}" />images/Discount_star.gif" />
      
      <c:url var="WarrantyViewURL" value="WarrantyView">
      <c:param name="langId" value="${langId}" />
      <c:param name="storeId" value="${WCParam.storeId}" />
      <c:param name="catalogId" value="${WCParam.catalogId}" />
      <c:param name="catalogEntryID" value="${productId}" />
      </c:url>
      <a href='<c:out value="${WarrantyViewURL}" />' >
      Warranty Information
      </a>
      

5. Update the Struts configuration file to register the new JSP page.

   Now that you have created a JSP template to generate the Web service response, you register the JSP page in the Struts configuration file so that it can be used by the WebSphere Commerce Web services framework. Since WebSphere Commerce is Struts-enabled, you register JSP pages by adding the appropriate Struts configuration to associate the view with a physical JSP page:

   1. In the Enterprise Explorer view, expand Stores > WebContent > WEB-INF > struts-config-ext.xml.

   2. Open the struts-config-ext.xml file.

   3. Add the following code in the global forward section:

      <forward className="com.ibm.commerce.struts.ECActionForward" 
      name="WarrantyView/your_store_ID" 
      path="/ShoppingArea/CatalogSection/CatalogEntrySubsection/WarrantyDisplay.jsp"/>
      

      Where your_store_ID is the store ID of the ConsumerDirect store.

      To find the store ID, run the following query:

      select storeent_id from storeent where identifier = 'ConsumerDirect';
      

   4. Copy and paste the following sample code before the closing </actions-mapping> tag at the bottom of the file:

      <action path="/WarrantyView" type="com.ibm.commerce.struts.BaseAction">
      <set-property property="https" value="your_store_ID:1"/>
      </action>
      

      Where your_store_ID is the store ID of the ConsumerDirect store.

   5. Save the file.

6. Create an access control policy to secure the new warranty view.

   By default, only the users assigned to the Site Administrator role can access to the view created in the preceding step. In this step, you update the Catalog service access control policy to permit all users to access the new view.

   Tip: See Sample: Access control policy for new views for more information about access control.

   1. Create a file called WarrantyViewCommand.xml under the directory WC_EAR\xml\policies\xml.

   2. Copy and paste the following access control policy XML into this file:

      <?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
      <!DOCTYPE Policies SYSTEM "../dtd/accesscontrolpolicies.dtd">
      
      <Policies>
      
      <Action Name="WarrantyView" CommandName="WarrantyView">
      </Action>
      <ActionGroup Name="AllSiteUsersViews" OwnerID="RootOrganization">
      <ActionGroupAction Name="WarrantyView"/>
      </ActionGroup>
      
      </Policies>
      

   3. Save the file.

   4. Stop the test environment.

   5. Use the command prompt to switch to the WCDE_INSTALL\bin directory.

   6. Load the WarrantyviewCommand.xml by running the command:

      acpload WarrantyviewCommand.xml
      

   7. Navigate to the WCDE_INSTALL\logs directory.

      Inspect the acpload.log and messages.txt files to ensure that the access control policy loaded successfully. The messages.txt file might not exist if the load completed successfully. Also check if policy files were created successfully in the WC_EAR\xml\policies\xml directory: WarrantyviewCommand_idres.xml and WarrantyviewCommand_xmltrans.xml. These two files are created as part of a successful idresgen utility process. If any other error files are generated in this directory, this indicates that there was a problem.

< Previous | Next >

+

Search Tips   |   Advanced Search