Customizing the storefront with the getData tag

In this lesson, you are modifying a JSP file to display warranty information with the getData tag. After you complete this customization, shoppers can see a warranty information tab on the details page for products. When shoppers click this tab, the warranty information displays in the tab pane.

Procedure

  1. Create the storefront get-data-config file to retrieve Warranty information from the CatalogEntry noun UserData element. The get-data-config file 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 is modified 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 that is defined in the wc-query-MyCompanyCatalogEntry-get.tpl file.
      value
      The value, MyCompany_All, of the access profile that is defined in the wc-query-MyCompanyCatalogEntry-get.tpl file.
    8. Save the file.
  2. Extend the property file.
    1. Navigate to the Enterprise Explorer view, expand Stores > Java Resources:src > your_store_name. Where your_store_name is the directory name for your store.
    2. Open the storetext.properties file.
    3. Add the properties for the new tab: 
      warranty=Warranty
warterm=Warranty Term
wartype=Warranty Type
    4. Save your changes and close the file
  3. Add a Warranty tab to the Product Display Page:
    1. In the Enterprise Explorer view, navigate to the Stores > WebContent > your_store_name > Snippets > Catalog > CatalogEntryDisplay. Where your_store_name is the directory name for your store.
    2. The CachedProductOnlyTabsExt.jspf file is empty by default. Add the following code:
      <%-- 
This is the code that displays when the warranty tab is clicked.  The "WARRANTY" value is defined in storetext.properties
--%>
<span class="on" id="Warranty_On" style="display:none">
  <span class="left_corner"> </span>
    <span class="text"><fmt:message key="Warranty" bundle="${storeText}" /></span>
  <span class="right_corner"> </span>
</span>
<%--
This is the code that displays when the warranty tab is not selected. 
--%>
<span class="off" id="Warranty_Off" style="display:inline">
  <a href="javascript:selectTab('Warranty');" class="catalog_link" id="warranty_links_1">
  <span class="text"><fmt:message key="Warranty" bundle="${storeText}" /></span></a>
</span>
  4. Modify the cached product tab pane extension file to include warranty information in the product details page warranty tab:
    1. In the Enterprise Explorer view, navigate to the Stores > WebContent > your_store_name > Snippets > Catalog > CatalogEntryDisplay. Where your_store_name is the directory name for your store.
    2. Open the CachedProductOnlyTabPanesExt.jspf file for editing. This file is an extension file for customization purposes. The CachedProductOnlyDisplay.jsp file calls this file to retrieve any information with the getData tag to display in a custom tab for the product details pages for your store.
    3. The CachedProductOnlyTabPanesExt.jspf file is empty by default. Add the following code to ensure warranty information displays in the warranty tab for your product details page:
      <%@ 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" %>

<wcf:getData type="com.ibm.commerce.catalog.facade.datatypes.CatalogEntryType[]" var="catentries" 
	     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="${catalogEntryID}"/>
<wcf:param name="accessProfile" value="MyCompany_All"/>
</wcf:getData>

<div id="Warranty" href="<c:out value='${WarrantyView}'/>" dojoType="dijit.layout.ContentPane" >
<c:forEach var="catalogEntry" items="${catentries}">
	<c:forEach var="userDataField" items="${catalogEntry.userData.userDataField}">
		<c:if test="${userDataField.typedKey == 'wartype'}"> 
		<b><span class="text"><fmt:message key ="${userDataField.typedKey}" bundle="${storeText}" /></span>: 
		</b>${userDataField.typedValue} <br>
		</c:if>
		<c:if test="${userDataField.typedKey == 'warterm'}">
		<b><span class="text"><fmt:message key ="${userDataField.typedKey}" bundle="${storeText}" /></span>: 
		</b>${userDataField.typedValue} <br>
		</c:if>
	</c:forEach>
</c:forEach>
</div>
    4. Save and close the file.
  5. Create an access control policy to secure the new warranty view.
    By default, only the users that are assigned to the Site Administrator role can access the view that is 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.

    For more information about access control, see Sample: Access control policy for new views.

    1. Navigate to the file directory: WCDE_installdir/xml/policies/xml
    2. Create a file that is called WarrantyViewCommand.xml
    3. 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>
    4. Save the file.
    5. Stop the test environment.
    6. In a command prompt, navigate to WCDE_installdir\bin
    7. Run the following command to load the WarrantyViewCommand.xml access control policy:
      acpload WarrantyViewCommand.xml
    8. Navigate to the WCDE_installdir\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 when the load completes successfully. Ensure that the policy files were created successfully in the WCDE_installdir\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, these error files indicate that there was a problem during the load process.