The Product Comparisons link under the list of categories on the left catalog navigation bar directs users to the Product Comparisons page where they can search for products to compare by category, manufacturer, and/or text.
The Product Comparisons page has three sections:
the list of products to compare (if the user has added any)
a search form
the search results (if a search was performed)
The Product Comparisons page.
Searching for Products to Compare
Customers can use the search form to find products by entering a category, a manufacturer, text, or any combination of those. The search results are displayed above the search box with check boxes so they can be added to the comparison list.
For the search form we used an instance of the atg.commerce.catalog.custom.SearchFormHandler from the ATG Business Commerce and configured it for comparisons. We set it to look for products, to search in names and descriptions, and to do a hierarchical search to allow it to search in particular categories.
From the results list, products are added to the comparison list using the same method as the product page. Unlike the comparison list, which is session-scoped, the search results list is request-scoped because it is an interim step. After the selected products are added to the compare list, the search results are cleared. We used the ProductListHandler to allow users to remove selected items or to clear the entire compare list.
For more information about using the ProductListHandler see the Implementing Product Comparison chapter in the ATG Commerce Guide to Setting Up a Store.
Viewing Compare Results
When users click the Compare button, the results are displayed as a list: part #, product name, description, manufacturer, price, and availability. By default the list is sorted by the part number. Users can sort the results by a different category by clicking on any of the column headings. They also can reverse the sorting order from ascending to descending.
Motorprise has a policy that guest (or unregistered) users cannot view pricing information for products. In order to enable guest users to compare products without seeing prices, we used the component ProductComparisonList (located at /atg/commerce/catalog/comparison/ProductList). It has a reference to a TableInfo object that controls the product properties that are displayed when you compare products to each other. By default, the product comparison list is configured to use the component at /atg/commerce/catalog/comparison/TableInfo.
For Motorprise, we used two TableInfo components, MemberComparisonTable and GuestComparisonTable, located at /atg/projects/b2bStore/catalog./MemberComparisonTable includes the price column, while GuestComparisonTable does not.
Because Motorprise has multiple locales, we used the TableInfo.columnHeadings property to map column names to locale-specific column headings. For more information on localizing table headings, see the Implementing Sortable Tables chapter of the ATG Page Developer’s Guide.
MemberComparisonTable.properties
$class=atg.service.util.TableInfo $scope=session columns=\ part=sku.manufacturer_part_number,\ product=productLink ; product.displayName,\ description=product.description,\ manufacturer=product.manufacturer.displayName,\ price=priceInfo.amount,\ availability=inventoryInfo.availabilityStatusMsg columnHeadings=\ part=Part \#,\ part_de=Produktnr.,\ product=Product,\ product_de=Produkt,\ description=Description,\ description_de=Beschreibung,\ manufacturer=Mfr,\ manufacturer_de=Hrst.,\ price=Price,\ price_de=Preis,\ availability=Availability,\ availability_de=Verfügbarkeit
GuestComparisonTable.properties
$class=atg.service.util.TableInfo $scope=session columns=\ part=sku.manufacturer_part_number,\ product=productLink ; product.displayName,\ description=product.description,\ manufacturer=product.manufacturer.displayName,\ availability=inventoryInfo.availabilityStatusMsg columnHeadings=\ part=Part \#,\ part_de=Produktnr.,\ product=Product,\ product_de=Produkt,\ description=Description,\ description_de=Beschreibung,\ manufacturer=Mfr,\ manufacturer_de=Hrst.,\ availability=Availability,\ availability_de=Verfügbarkeit
Notice that the entry for Product= uses the expression productLink ; product.displayName as the property name for the column. This tells the TableInfo component that we want to display the property productLink in the table, but sort on the product’s displayName. We did this because productLink is an HTML anchor tag that specifies a link to the product’s catalog page. Typical values for productLink might look like this:
<dsp:a href="/Motorprise/en/catalog/product.jsp?id=prod70004"/>Wheel
Bearing</desp:a>
<dsp:a href="/Motorprise/en/catalog/product.jsp?id=prod110145"/>Disk Brake
Pad Kit</dsp:a>
If we sorted entries based on the literal text of these anchor tags, the Wheel Bearing entry would come before the Disk Brake Pad Kit because its product ID comes first. Using the ability of TableEntry to specify a separate sort property allows us to sort these items based on the display name the user sees, regardless of the literal text of the links.
We used the following code in compare_result.jsp to select which table is presented:
<dsp:importbean bean="/atg/commerce/catalog/comparison/ProductList"/> <dsp:importbean bean="/atg/userprofiling/Profile"/> <dsp:importbean bean="/atg/projects/b2bstore/catalog/MemberComparisonTable"/> <dsp:importbean bean="/atg/projects/b2bstore/catalog/GuestComparisonTable"/> <%/* First decide which table info object to use when building the product comparison table. Members who are logged in get one table, while guests get a different table that omits price information. */%> <dsp:droplet name="Switch"> <dsp:param bean="Profile.transient" name="value"/> <dsp:oparam name="true"> <dsp:setvalue bean="ProductList.tableInfo" beanvalue="GuestComparisonTable"/> </dsp:oparam> <dsp:oparam name="false"> <dsp:setvalue bean="ProductList.tableInfo" beanvalue="MemberComparisonTable"/> </dsp:oparam> </dsp:droplet>
This code checks to see if the user is logged in or not, and based on that fact, sets the tableInfo property of the product comparison list to either the guest table definition (which does not include a price column) or the member table definition (which does). The rest of the page can then refer to ProductList.tableInfo and get a TableInfo component that applies to the current user, whether the user is logged in or not.
In general, Motorprise displays the product comparison table using the patterns and techniques described in the Implementing Sortable Tables section of the ATG Page Developer’s Guide. We applied special logic to the table’s Price column, however, to ensure that prices are formatted correctly for the user’s locale and display an appropriate currency symbol.
You can change the number of table columns and their order by editing the configuration of the corresponding TableInfo component. Since we cannot know which column will display the price, we used the following code to check each column heading as we iterate over the values in the table, adding the currency tag converter if the column heading is Price and the valueishtml tag converter for all other values:
<dsp:droplet name="ForEach"> <%/* Here we are going to iterate over all of the property names we want to display in this row using BeanProperty to display each one. We handle the "Price" column specially, using a currency converter on the value to get properly localized currency symbols and formatting. */%> <dsp:param bean="ProductList.tableColumns" name="array"/> <dsp:param name="sortProperties" value=""/> <dsp:oparam name="output"> <td><dsp:droplet name="BeanProperty"> <dsp:param name="bean" param="currentProduct"/> <dsp:param name="propertyName" param="element.property"/> <dsp:oparam name="output"> <dsp:droplet name="Switch"> <dsp:param name="value" param="element.name"/> <dsp:oparam name="price"><dsp:valueof converter="currency" param="propertyValue"/></dsp:oparam> <dsp:oparam name="default"><dsp:valueof valueishtml="<%=true%>" param="propertyValue"/></dsp:oparam> </dsp:droplet> </dsp:oparam> </dsp:droplet></td> </dsp:oparam> </dsp:droplet>
Note that the name used in the JSP must match the name used in the TableInfo component for this logic to work correctly. For example, for Motorprise we edited the TableInfo component and changed the column names for its English and German catalog pages. Thus, we had to change the column name used in compare_result.jsp to match.
