Just as template pages are created to display products, template pages are also created to display categories. Motorprise has three different types of categories: root categories that contain other child categories, child categories that contain other child categories, and child categories that contain the products. We developed three generic template pages to display these types of categories.
/en/common/CatalogNav.jsp
/en/catalog/category.jsp
/en/catalog/sub_category.jsp
CatalogNav.jsp is used to display the root categories of the user. In Motorprise, we used custom catalogs to assign a catalog to each user. If a user doesn’t have a catalog defined in his or her profile, we retrieve one from the contract of the parentOrganization. Each such catalog contains the three different types of categories mentioned above. We used CatalogNav.jsp throughout the catalog to provide the left navigation pane.
CatalogNav.jsp is used to display the categories on the left navigation pane.
CatalogNav.jsp displays all the root categories of the user by iterating through all of them as shown below.
<dsp:droplet name="/atg/dynamo/droplet/ForEach"> <dsp:param name="array" bean= "/atg/userprofiling/Profile.catalog.allRootCategories"/> <dsp:oparam name="output"> <tr bgcolor="#FFFFFF"> <td colspan=2><dsp:img src="../images/d.gif"/></td> </tr> <tr bgcolor="F7D774"> <td><dsp:img src="../images/d.gif" hspace="5"/></td> <td><dsp:img src="../images/d.gif" vspace="1"/><br> <dsp:getvalueof id="urlStr" idtype="java.lang.String" param="element.template.url"> <dsp:a page="<%=urlStr%>"> <dsp:param name="id" param="element.repositoryId"/> <dsp:param name="navAction" value="pop"/> <dsp:param name="Item" param="element"/> <b><font size=-1 color="#555555"><dsp:valueof param= "element.displayName"/></font></b> </dsp:a> </dsp:getvalueof> <br> <dsp:img src="../images/d.gif" vspace="1"/><br></td> </tr> </dsp:oparam> <dsp:oparam name="empty"> <p>No root categories found. </dsp:oparam> </dsp:droplet>
The template.url property of the category contains the URL of the template to use for displaying the category.
Category.jsp is used to display the child categories that contain other child categories. For example, within the Exhaust category, there are Reducers, Gaskets, Headers, Mufflers, and Pipes subcategories.
Exhaust category, there are Reducers, Gaskets, Headers, Mufflers, and Pipes subcategories.
Category.jsp takes the id of the category as the page parameter and uses CategoryLookup to get the category and to display the child categories in table form as show below.
<dsp:droplet name="/atg/commerce/catalog/CategoryLookup"> <dsp:oparam name="output"> <dsp:getvalueof id="page_title" param="element.displayName"> <dsp:include page="../common/HeadBody.jsp" flush="true"> <dsp:param name="pagetitle" value="<%=page_title%>"/> </dsp:include> </dsp:getvalueof> <table border=0 cellpadding=0 cellspacing=0 width=800> <tr> <td colspan=2><dsp:include page="../common/BrandNav.jsp" flush="true"></dsp:include></td> </tr> <tr bgcolor="#DBDBDB"> <td colspan=2 height=18><span class="small"> <dsp:droplet name="ArrayIncludesValue"> <dsp:param name="array" bean="Profile.catalog.allrootcategories"/> <dsp:param name="value" param="element"/> <dsp:oparam name="false"> <dsp:include page="../common/breadcrumbs.jsp" flush="true"> <dsp:param name="displaybreadcrumbs" value="true"/></dsp:include> </dsp:oparam> <dsp:oparam name="true"> <dsp:include page="../common/breadcrumbs.jsp" flush="true"><dsp:param name="displaybreadcrumbs" value="true"/><dsp:param name="navAction" value="jump"/><dsp:param name="navCount" value="0"/></dsp:include> </dsp:oparam> </dsp:droplet> </span> </td> </tr> <tr valign=top> <td width=175> <!-- category navigation --> <dsp:include page="../common/CatalogNav.jsp" flush="true"></dsp:include> <!-- incentives slot --> <dsp:include page="../common/Incentive.jsp" flush="true"></dsp:include> </td> <td width=625> <!-- promotion slot --> <table border=0 cellpadding=4 width=100%> <!--this row used to ensure proper spacing of table cell--> <tr><td colspan=2><dsp:img src="../images/d.gif" hspace="304"/></td></tr> <tr> <td colspan=2> <span class="categoryhead"> <dsp:valueof param="element.itemDisplayName">No name </dsp:valueof></span></td> </tr> <tr> <td> <dsp:droplet name="/atg/dynamo/droplet/ForEach"> <dsp:param name="array" param="element.childCategories"/> <dsp:oparam name="outputStart"> <table border=0 cellpadding=3 width=100%> </dsp:oparam> <dsp:oparam name="output"> <tr> <td width=3><dsp:img src="../images/d.gif" hspace="1"/></td> <td> <dsp:getvalueof id="urlStr" idtype="java.lang.String" param="element.template.url"> <dsp:a page="<%=urlStr%>"> <dsp:param name="id" param="element.repositoryId"/> <dsp:valueof param="element.displayName">No name</dsp:valueof> </dsp:a> </dsp:getvalueof> <br> <dsp:valueof param="element.description"/> </td> </tr> </dsp:oparam> <dsp:oparam name="empty"> <tr> <td width=3></td> <td>No child categories found.</td> </tr> </dsp:oparam> </dsp:droplet> </table> </td> </tr> </table> </td> </tr> </table> </dsp:oparam> </dsp:droplet>
CategoryLookup takes the id of the category as input. However, we don’t explicitly pass the id parameter of category to CategoryLookup. It is already defined as a page-level parameter, and outputs category object. We iterate through the childCategories of the category displaying the category and its attributes, also providing an URL to display that category.
sub_category.jsp is used to display the categories that contain products by taking the id of the category as the page parameter.
CategoryLookup is used to display the products contained in the category. The JSP fragment is shown below.
<dsp:droplet name="/atg/commerce/catalog/CategoryLookup"> <dsp:oparam name="output"> <dsp:getvalueof id="page_title" param="element.displayName"> <dsp:include page="../common/HeadBody.jsp" flush="true"> <dsp:param name="pagetitle" value="<%=page_title%>"/> </dsp:include> </dsp:getvalueof> <table border=0 cellpadding=0 cellspacing=0 width=800> <tr> <td colspan=2><dsp:include page="../common/BrandNav.jsp" flush= "true"></dsp:include></td> </tr> <tr bgcolor="#DBDBDB"> <td colspan=2 height=18><span class="small"> <dsp:droplet name="ArrayIncludesValue"> <dsp:param name="array" bean="Profile.catalog.rootcategories"/> <dsp:param name="value" param="element"/> <dsp:oparam name="false"> <dsp:include page="../common/breadcrumbs.jsp" flush="true"><dsp:param name="displaybreadcrumbs" value="true"/></dsp:include> </dsp:oparam> <dsp:oparam name="true"> <dsp:include page="../common/breadcrumbs.jsp" flush="true"><dsp:param name="displaybreadcrumbs" value="true"/><dsp:param name="navAction" value="jump"/><dsp:param name="navCount" value="0"/></dsp:include> </dsp:oparam> </dsp:droplet> </span> </td> </tr> <tr valign=top> <td width=175> <!-- left panel --> <dsp:include page="../common/CatalogNav.jsp" flush="true"></dsp:include> <!-- incentives slot --> <dsp:include page="../common/Incentive.jsp" flush="true"></dsp:include> </td> <td width=625><!-- main content --> <table border=0 cellpadding=4 width=100%> <!--this row used to ensure proper spacing of table cell--> <tr><td colspan=2><dsp:img src="../images/d.gif" hspace="304"/></td></tr> <tr> <td colspan=2> <span class="categoryhead"> <dsp:valueof param="element.itemDisplayName">No name </dsp:valueof></span> <br><dsp:img src="../images/d.gif" vspace="4"/><br> <table border=0 cellpadding=4 cellspacing=1 width=100%> <dsp:droplet name="/atg/dynamo/droplet/ForEach"> <dsp:param name="array" param="element.childProducts"/> <dsp:oparam name="outputStart"> <tr valign="bottom"> <td><dsp:img src="../images/d.gif" hspace="1"/></td> <td bgcolor="#666666" colspan=2><span class="smallbw">Part # </span></td> <td bgcolor="#666666" colspan=2><span class="smallbw"> Product</span></td> <td bgcolor="#666666" colspan=2><span class= "smallbw">Description</span></td> <td bgcolor="#666666" colspan=2><span class= "smallbw">Mfr</span></td> </tr> </dsp:oparam> <dsp:oparam name="output"> <tr valign="top"> <td><dsp:img src="../images/d.gif" hspace="1"/></td> <dsp:droplet name="/atg/dynamo/droplet/ForEach"> <dsp:param name="array" param="element.childSKUs"/> <dsp:param name="elementName" value="sku"/> <dsp:oparam name="output"> <td><nobr> <dsp:getvalueof id="skuURL" idtype="java.lang.String" param="element.template.url"> <dsp:a page="<%=skuURL%>"> <dsp:param name="id" param="element.repositoryId"/> <dsp:valueof param="sku.manufacturer_part_number">No part number</dsp:valueof> </dsp:a> </nobr></td> </dsp:getvalueof> </dsp:oparam> </dsp:droplet> <td> </td> <td> <dsp:getvalueof id="urlStr" idtype="java.lang.String" param="element.template.url"> <dsp:a page="<%=urlStr%>"> <dsp:param name="id" param="element.repositoryId"/> <dsp:valueof param="element.displayName">No name</dsp:valueof> </dsp:a> </dsp:getvalueof> </td> <td> </td> <td><dsp:valueof param="element.description">No description </dsp:valueof></td> <td> </td> <td><dsp:valueof param= "element.manufacturer.displayName">Unknown </dsp:valueof></td> </tr> </dsp:oparam> <dsp:oparam name="outputEnd"> <tr> <td> </td> </tr> </dsp:oparam> <dsp:oparam name="empty"> <tr><td> No child products.</td></tr> </dsp:oparam> </dsp:droplet> </table> </td> </tr> </table> </td> </tr> </table> </dsp:oparam> </dsp:droplet>
In the above code sample, we used CategoryLookup to get the category corresponding to the id, and we iterated through the products and SKUs of each product displaying the SKU and its attributes.
