The Pioneering Cycling store uses the ATG Consumer Commerce CompareSkusFormHandler to implement this comparison functionality. The CompareSkusFormHandler has several methods and properties that hold the information needed to compare items. This section shows how we used these methods and properties to allow users to compare two bikes.
First, we included the form handler component on the bike template page:
<dsp:importbean bean="/atg/commerce/catalog/CompareSkusFormHandler"/>
Then we added the button for adding SKUs to the SKU compare list. In the Pioneer Cycling store, the bike template page includes a button that says Compare With Other Products. When the customer clicks this button, all of the SKUs for the product are added to the SKU compare list. Here is the code for this:
<dsp:getvalueof id="form179" bean="/OriginatingRequest.requestURI" idtype="java.lang.String"> <dsp:form action="<%=form179%>" method="post"> <%/*Display any errors that have been generated during Compare *operations: */%> <dsp:include page="../common/DisplayCompareSkusFormHandlerErrors.jsp" flush="true"></dsp:include> <input name="id" type="hidden" value='<dsp:valueof param="Product.repositoryId"/>'> <!-- Add this ProductID to the Compare List: --> <dsp:input bean="CompareSkusFormHandler.ProductToCompare" paramvalue="id" type="hidden"/> <%/*Goto this URL if no errors are found during Compare button *processing: */%> <dsp:input bean="CompareSkusFormHandler.AddToCompareListSuccessURL" type="hidden" value="compare_bikes.jsp"/> <%/*COMPARE button: */%> <dsp:input bean="CompareSkusFormHandler.addToCompareList" type="submit" value="Compare With Other Products"/> </dsp:form></dsp:getvalueof>
Adding Items to the Compare List
When the customer clicks the Compare With Other Products button on the bike product page, the page first sets the form handler’s ProductToCompare property with the repository ID of the bike product. This is done via a hidden text box. Here is the code that sets this property in the form handler:
<!-- Add this ProductID to the Compare List: --> <dsp:input bean="CompareSkusFormHandler.ProductToCompare" paramvalue="id" type="hidden"/>
The CompareSkusFormHandler.addToCompareList method is called when the customer actually clicks the button. It stores all of the SKUs associated with the ProductToCompare in the form handler’s SkuCompareList property. Here is the code for the button:
<%/*COMPARE button: */%> <dsp:input bean="CompareSkusFormHandler.addToCompareList" type="submit" value="Compare With Other Products"/>
The page also sets the SuccessURL property. This value tells the form handler where to redirect at the end of the CompareSkusFormHandler.addToCompareList method. If this product is successfully added to the compare list, the user is redirected to the compare_bikes.jsp page. Here is the code that stores this value in the form handler:
<dsp:input bean="CompareSkusFormHandler.AddToCompareListSuccessURL" type="hidden" value="compare_bikes.jsp"/>
