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

< Previous | Next >


Add product care instructions to the warranty page

In this lesson, you add code to the warrantyDisplay.jsp file to display language-sensitive care instructions. Then, you reword the name of the warranty link in the ProductDisplay.jsp file. You test the customization by viewing pages in the consumer direct store.


Procedure

  1. Add the care instruction title to the property file:

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

    2. Open the storetext.properties file.

    3. Append the header text to the properties file: 

      productCareInstructionDisplayTitle=CareInstruction information

  2. Add care instructions to the WarrantyDisplay.jsp file:

    1. Switch to the Java EE perspective.

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

    3. Open the WarrantyDisplay.jsp file.

    4. Replace the code in WarrantyDisplay.jsp with the following code: 

      <%
%>
<%@ 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>

</td>
</tr>

<tr align="left">

<td align="left">
<p align="left">
<c:forEach var="catalogEntry" items="${catentries}">
<p>
<b><fmt:message key="productCareInstructionDisplayTitle" bundle="${storeText}"/></b></p>

<p align="center">
<br/>CatalogEntryID:
<c:out value="${catalogEntry.catalogEntryIdentifier.uniqueID}"/>
<c:forEach var="desc" items="${catalogEntry.description}">
<c:forEach var="attr" items="${desc.attributes}"> 
<c:if test="${attr.typedKey == 'careinstruction'}">
<br/>CareInstruction:
<c:out value="${attr.typedValue}"/>
</c:if>
</c:forEach>
</c:forEach>
</p>
</c:forEach>
</p>
</td>

</tr>

</tbody>
</table>
<%@ include file="../../../include/LayoutContainerBottom.jspf"%>
</body>
</html>

    5. Save the file.

  3. Change the text of the warranty link in the ProductDisplay.jsp file.

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

    2. Open the file ProductDisplay.jsp file.

    3. Locate the following line: 

      <a href='<c:out value="${WarrantyViewURL}" />' >
Warranty Information

    4. Change the text Warranty Information to Warranty Information & Care Instruction.

    5. Save the file.

  4. View the customization in the store.

    1. Start or restart the WebSphere Commerce Server.

    2. In the Web browser, enter the URL: http://localhost/webapp/wcs/stores/servlet/ConsumerDirect/index.jsp.

    3. Select United States English to log in to ConsumerDirect store's home page.

    4. Click Furniture > Lounge Chairs > White Wing Chair. The link for Warranty information and Care Instruction displays as shown in the following screen capture:

    5. Click Warranty information & Care Instruction.

< Previous | Next >


+

Search Tips   |   Advanced Search