The product template pages in the Pioneer Cycling store display related products. The relatedProducts property on a product returns a list of zero or more products that are categorized as being related to this product. For a given product, we wanted the template page to display these related products as image links to the products. We needed this functionality in several places, so we created a code fragment called RelatedProducts.jsp to display this information. Here is the code fragment:
<dsp:importbean bean="/atg/dynamo/droplet/IsNull"/> <p> <!-- Display a table of related products. --> <dsp:droplet name="/atg/dynamo/droplet/TableForEach"> <dsp:param name="array" param="Product.relatedProducts"/> <dsp:param name="elementName" value="relatedProduct"/> <dsp:param name="numColumns" value="2"/> <dsp:oparam name="outputStart"> <!-- Display this header only if there are some related products --> <b>Related products</b><P> <table cellspacing=4 cellpadding=0 border=0> </dsp:oparam> <dsp:oparam name="outputRowStart"> <tr valign=top> </dsp:oparam> <dsp:oparam name="output"> <td> <dsp:droplet name="IsNull"> <dsp:param name="value" param="relatedProduct"/> <dsp:oparam name="false"> <dsp:include page="../common/ItemLink.jsp" flush="true"> <dsp:param name="Item" param="relatedProduct"/> <dsp:param name="Image" param="relatedProduct.thumbnailImage"/> <dsp:param name="navAction" value="jump"/> <dsp:param name="DisplayText" param="relatedProduct.displayName"/> </dsp:include> <dsp:include page="../common/DisplayProductPrice.jsp" flush="true"> <dsp:param name="Product" param="relatedProduct"/> </dsp:include> <%/* Create an add to cart button to add 1 of sku #1 to the cart */%> <dsp:importbean bean="/atg/commerce/order/ShoppingCartModifier"/> <dsp:getvalueof id="form67" bean="/OriginatingRequest.requestURI" idtype="java.lang.String"> <dsp:form action="<%=form67%>" method="post"> <dsp:input bean="ShoppingCartModifier.ProductId" paramvalue="relatedProduct.repositoryId" type="hidden"/> <input name="id" type="hidden" value='<dsp:valueof param="relatedProduct.repositoryId"/>'> <dsp:input bean="ShoppingCartModifier.quantity" type="hidden" value="1"/> <dsp:input bean="ShoppingCartModifier.catalogRefIds" paramvalue="relatedProduct.childSKUs[0].repositoryID" type="hidden"/> <dsp:input bean="ShoppingCartModifier.addItemToOrderSuccessURL" type="hidden" value="../checkout/cart.jsp"/> <dsp:input bean="ShoppingCartModifier.addItemToOrder" type="submit" value="Get It"/> </dsp:form></dsp:getvalueof> </dsp:oparam> </dsp:droplet> </td> </dsp:oparam> <dsp:oparam name="outputRowsEnd"> </tr> </dsp:oparam> <dsp:oparam name="outputEnd"> </table> </dsp:oparam> <dsp:oparam name="empty"> </dsp:oparam> </dsp:droplet>
Related Products
We wanted to display the related products in a table, so we used the TableForEach component. It displays the data in two columns (<dsp:param name="numColumns" value="2"/>). Each of the products is bound to the parameter relatedProduct as the droplet cycles through the TableForEach (<dsp:param name="elementName" value="relatedProduct"/>). Because each relatedProduct is of type product, product properties are accessible (<dsp:param name="Image" param="relatedProduct.thumbnailImage"/>). In the “output” parameter section of the TableForEach, we used ItemLink.jsp (described earlier) to display a link (with image) to the related product. Note that nothing is hard-coded on this page; everything is data driven.
<dsp:include page="../common/ItemLink.jsp" flush="true"> <dsp:param name="Item" param="relatedProduct"/> <dsp:param name="Image" param="relatedProduct.thumbnailImage"/> <dsp:param name="navAction" value="jump"/> <dsp:param name="DisplayText" param="relatedProduct.displayName"/> </dsp:include>
