Modifying existing JavaServer Pages (JSP) files to interact with the new Recipe JSP files

This lesson modifies the store's category banner and product display pages to link to recipes.

About this task

In this lesson you will modify the default extended sites storefront JavaServer Pages (JSP) files to link to the new Recipe JSP files. First, you will change the store categories banner to include a recipe category so that a shopper can access the Recipe Section from any page within the store. Second, you create links in the product display pages to recipes that use the specified product. Finally, you test the customization by browsing through the store's new recipe section.
Note: The screen captures in this lesson represent general functionality for one of the recipes in the sample code provided with Tutorial: Creating a BOD service module. Your results will not be exactly as shown. Specifically, ingredients and tool relationships were not defined for any of the recipes in the sample code package. However, you should confirm this functionality on a recipe of your own creation.

Procedure

  1. Modify the store categories banner to include a recipe section:
    1. In the Enterprise Explorer view, expand Stores > WebContent > ConsumerDirectStorefrontAssetStore > include > styles > style1.
    2. Open the CachedHeaderDisplay.jsp file.
    3. Find the section of code that displays the top categories:
      <%-- 
       ***
       *  Start: Display the Top Categories
       *  The top categories and the 'Home' link is displayed.  Each top category is a link to the corresponding category page, except that the currently selected category is not a link.
       ***
      --%>
      <table cellpadding="0" cellspacing="0" border="0"
      	id="WC_CachedHeaderDisplay_Table_6">
      	<tbody>
      		<tr>
      			<c:forEach var="topCategory" items="${catalog.topCategories}"
      				varStatus="status">
      				<td
      					id="WC_CachedHeaderDisplay_TableCell_512_<c:out value="${status.count}" />">
      				<%-- For the currently selected category, the category name will not be a link to the corresponding category page. --%>
      				<c:choose>
      					<c:when test="${topCategory.categoryId == categoryId}">
      						<font class="m_link"><c:out
      							value="${topCategory.description.name}" escapeXml="false" /></font>
      					</c:when>
      					<c:otherwise>
      						<c:url var="CategoryDisplayURL" value="CategoryDisplay">
      							<c:param name="langId" value="${langId}" />
      							<c:param name="storeId" value="${WCParam.storeId}" />
      							<c:param name="catalogId" value="${WCParam.catalogId}" />
      							<c:param name="top_category" value="${topCategory.categoryId}" />
      							<c:param name="top" value="Y" />
      							<c:param name="categoryId" value="${topCategory.categoryId}" />
      						</c:url>
      						<a href="<c:out value="${CategoryDisplayURL}" />" class="m_link"
      							id="WC_CachedHeaderDisplay_Link_9_<c:out value="${status.count}" />"><c:out
      							value="${topCategory.description.name}" escapeXml="false" /></a>
      					</c:otherwise>
      				</c:choose></td>
      			</c:forEach>

      Add the following code immediately after the section that displays the top categories code and before the </tr> tag:

      <%-- Link to the Recipe section, unless the current page is the recipe section. --%>
      <td><c:choose>
      	<c:when test="${WCParam.isRecipeSection}">
      		<font class="m_link"><c:out value="Recipes" escapeXml="false" /></font>
      	</c:when>
      	<c:otherwise>
      		<c:url var="RecipeSectionURL" value="RecipeSection">
      			<c:param name="langId" value="${langId}" />
      			<c:param name="storeId" value="${WCParam.storeId}" />
      			<c:param name="catalogId" value="${WCParam.catalogId}" />
      			<c:param name="top" value="Y" />
      			<c:param name="categoryId" value="${topCategory.categoryId}" />
      			<c:param name="isRecipeSection" value="true" />
      		</c:url>
      		<a href="<c:out value="${RecipeSectionURL}" />" class="m_link"
      			id="WC_CachedHeaderDisplay_Link_10"><fmt:message key="ProjectsType"
      			bundle="${storeText}" /></a>
      	</c:otherwise>
      </c:choose></td>

      The Recipes section is located after the product category links.

  2. Modify the product display page to link to recipes
    1. In the Enterprise Explorer view, expandStores > WebContent > ConsumerDirectStorefrontAssetStore > ShoppingArea > CatalogSection > CatalogEntrySubSection.
    2. Open the ProductDisplay.jsp file.
    3. Find the section of code that displays discount information:
      <%-- Now display the disclaimers for discounts, if there is at least one discounts --%>
      <fmt:message var="disclaimer" key="DISCOUNT_DISCLAIMER"
      	bundle="${storeText}" />
      <script>
      if (Discount.getAreThereAnyDiscounts()) {
          document.write('<br /><br /><span class="discount">');
          document.write('<img src="<c:out value="${jspStoreImgDir}" />images/Discount_star.gif" alt="<c:out value="${disclaimer}" escapeXml="true" />" />&nbsp;<c:out value="${disclaimer}" escapeXml="true"/>');
          document.write('</span>');
      }
      </script>

      Include the following code immediately after the discount information code and before the </td> tag:

      <%-- Display any projects that this product is part of. --%>
      <c:import url="${jspStoreDir}ShoppingArea/RecipeSection/RecipeList.jsp">
      	<c:param name="productId" value="${productId}" />
      	<c:param name="storeId" value="${WCParam.storeId}" />
      </c:import>

      The list of recipes using a product is displayed after discounts for that product.

  3. Test the customization:
    1. Start your WebSphere Commerce test server.
    2. Navigate to the store home page, using the bookmark you created in Creating an extended site store for the Recipes tool customization.
    3. Confirm that a recipe link exists on the store home page:
      Screen capture displaying the completed customization to the store homepage.
    4. Click the Recipes link and confirm that a list of Recipe Collections displays:

      Screen capture displaying the completed Recipe Collections page.

    5. Click a collection and confirm that a list of Recipes under that Collection displays:

      Screen capture displaying a Recipe collection.

    6. Click a recipe and confirm that no information is missing, and also that links to products it uses exist:

      Screen capture displaying a Recipe page.

    7. Click a product, and confirm that the product display page for that product displays with links back to that recipe and others that use it:

      Screen capture displaying the product display page with links to the Recipes that use the product.

Results