 |
||
IMPLEMENTING PRODUCT COMPARISONS
Basic Product Comparison Layout
When products are compared on the web--generally by prospective buyers who are trying to decide on a final model to place into their shopping cart--there are 2 common formats for the product comparison chart. One involves assigning each row to a separate product, and then using the columns in the chart to list the values of several features associated with each product. The other format involves flipping the data about the diagonal, and assigning each column in the chart to a separate product.
Which of the 2 formats is more suitable depends on the relative number of products to be compared in chart, and the number of features that are to be displayed. The second format, which is the one assumed by Review Foundry, is most suitable when the number of products to be compared is small (say, 5 or fewer) and the number of features potentially large.
An example product comparison chart for this case is shown below. Click on the remove links to see how columns can be collapsed to remove items that need not appear in the comparison chart.
| Comparison of some Top-Selling Cameras |
|
|
|||||||||||||||||||||||||||||||||||
|
Comparison of some of the top selling digital SLR cameras My preferred brand is Nikon, but you really cannot go wrong with any of these top-rated models. Note that Canon's Digital Rebel XTi has the best optical resolution, but unless you are creating poster size prints the Nikon's 6.1 mega-pixels is more than enough. |
Nikon D40 |
Canon Digital Rebel XTi |
Canon Digital Rebel XT |
||||||||||||||||||||||||||||||||
 |
|
|
|||||||||||||||||||||||||||||||||
|
|
|
|||||||||||||||||||||||||||||||||
| Nikon D40 6.1MP Digital SLR Camera Kit with 18-55mm f/3.5-5.6G ED II AF-S DX Zoom-Nikkor Lens | Canon Digital Rebel XTi 10.1MP Digital SLR Camera with EF-S 18-55mm f/3.5-5.6 Lens (Black) | Canon Digital Rebel XT 8MP Digital SLR Camera with EF-S 18-55mm f3.5-5.6 Lens (Black) | |||||||||||||||||||||||||||||||||
| Feature | |||||||||||||||||||||||||||||||||||
| Price | $479.98 | $607.27 | $627.18 | ||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Model | 25420 | 1236B001 | Digital Rebel XT | ||||||||||||||||||||||||||||||||
| Optical Resolution | 6.1 MP | 10.1 MP | 8 MP | ||||||||||||||||||||||||||||||||
| Pop-up flash |
|
|
|
||||||||||||||||||||||||||||||||
| see details | see details | see details | |||||||||||||||||||||||||||||||||
This is very truncated version of a typical product comparison chart, which normally compares dozens of different features. But it gives you a good idea of what you can expect to do with Review Foundry.
Choosing Features For Comparison
In order to configure Review Foundry for item, member, or supplier comparisons you must visit the Configure / Compare Things control panel. You can select the columns from each of the Item, Member, or Supplier tables that represent features that you want to make available for comparison purposes. In addition to selecting comparison columns, the comparison engine needs to be switched on for each of the comparisons you want to make available:
Not all of the columns in you Item, Member, or Supplier table represent features that you want to compare. Typically, features will be represented as ENUM, or SET column types. The first allows a feature to be represented as one possibility among many, or as a Yes/No state. The second allows for a selection of multiple values from a list of possibilities. For example, all the possible colors that an item can assume. The single value that is represented by an ENUM column, or the multiple values that can be represented by a SET column, will be shown, one per line, when the feature is formatted for display.
In the special instance of an ENUM column for which the only possible values that the column may assume are 'Yes' and 'No', an icon will be used to display the on/off nature of the feature. As an example, see the 'Pop-up flash' feature in the compared cameras above. These icons can be found in the following location:
/rs/foundry/skins/default/images/misc/on.gif /rs/foundry/skins/default/images/misc/off.gifThe on state looks like this:
The off state looks like this:
Columns that have been selected to represent features are displayed in the order that they appear in the selection list on the Configure / Compare Things page.
All comparison columns are listed, without regard for possible sub-groupings of the columns (such as all features relating to physical dimensions of an item). In order to split up comparison columns into these subgroupings it is necessary to edit the relevant template for the comparison page and replace the FOREACH loop over the comparison columns with individual lines of HTML to handle each comparison column. See the following templates if you need to make adjustments to the layout of the comparison pages:compare_things.ttml compare_item.ttml compare_member.ttml compare_supplier.ttml
In particular, see the [% BLOCK comparison_cols %] block for the loop over comparison columns if you need to alter the way in which features are added to the page (like you need to group certain columns). For example, if you use a suitable naming scheme for your feature columns you will be able to pull out particular columns and treat them as a group. If you were to prefix all feature columns that relate to physical dimension, say, with the string dimension_ then you could extract these columns from all comparison columns like this:
[% dimensional_cols = [] %]
[% FOREACH col_name = alias.compare_cols %]
[% NEXT UNLESS col_name.match('^dimension_') %]
[% dimensional_cols.push(col_name) %]
[% END %]
then later on, where you would have used this loop to add ALL features to the page:
[% FOREACH col_name = alias.compare_cols %]
formatting goes here...
[% END %]
you'll just add the group of features that relate to physical dimensions:
[% FOREACH col_name = dimensional_cols %]
formatting goes here...
[% END %]
You can apply the same kind of code to each subgrouping of features that you need to add to the page, supposing that you have used a separate prefix to handle each feature grouping.
But there is nothing better than seeing a full-fledged exmaple, so let me develop one here. Let's suppose that you are creating comparison pages for cameras and that the features break into 2 groups (in general you'd perhaps have more, but to shorten the demo code let's assume it's 2 groups). These groups are technical and dimension, and every column in our item table that is to be used as a comparison column for our cameras is prefixed with one of these 2 strings (and assigned as a comparison column on the Configure > Compare Things page).
Here's how we might alter the code in the existing [% BLOCK comparison_cols %] block which extracts comparison columns and adds them to the page. Our amended code pulls out the 2 different column types (in the order specified on the Configure > Compare Things page) and presents each group with it's own heading (as Technical Specifications for the first grouping, and Physical Dimensions for the second):
[% BLOCK comparison_cols %]
[% technical_cols = [] %]
[% dimension_cols = [] %]
[% FOREACH col_name = alias.compare_cols %]
[% IF col_name.match('^technical_') %]
[% technical_cols.push(col_name) %]
[% ELSIF col_name.match('^dimension_') %]
[% dimension_cols.push(col_name) %]
[% END %]
[% END %]
<tr><td style="border-bottom: 1px solid [% border_color %];"
colspan="[% 3 * alias.ordered_things.size + 1 %]"
align="center"><!-- setfont_base(+0) -->
<b>Technical Specifications</b>
<!-- setfont_end --></td></tr>
[% FOREACH col_name = technical_cols %]
[% compare_cols_index = compare_cols_index + 1 %]
[% INCLUDE single_comparison_row %]
[% END %]
<tr><td style="border-bottom: 1px solid [% border_color %];"
colspan="[% 3 * alias.ordered_things.size + 1 %]"
align="center"><!-- setfont_base(+0) -->
<b>Physical Dimensions</b>
<!-- setfont_end --></td></tr>
[% FOREACH col_name = dimension_cols %]
[% compare_cols_index = compare_cols_index + 1 %]
[% INCLUDE single_comparison_row %]
[% END %]
[% END %]
As you can see, it is very simple, and you can generalize this to as many groupings as you need.
Selecting Products For Comparison
The primary purpose of a comparison engine is to allow users to select items to be brought together in one place for easy side-by-side feature comparison. Generally this is done by adding a checkbox element to pages that display items. The user checks those items they want to compare, and then clicks on a button to bring the items together for comparison. In other words, something like this:
|
When users are selecting things for comparison you have the option to allow them to select only things that belong to the SAME container (i.e. category, team, or yellowpage) or you can allow them to select things from any container and bring them together for comparison. Most of the time you'll want to allow them to select things for anywhere inside a branch, but it's conceivable that there might be situations where that's not the case. To control the scope of the selection process you set the following configuration variables:
Establishing Predefined Product Comparisons
Besides the dynamic selection of products for comparison made by users coming onto your site, it is also possible to set up predetermined product comparisons. For example, you might wish to direct your visitors to a page that compares several things that you think should be compared together.
Instead of using cookies to record the selection choices, as is done for dynamic product selection, you can specify your own combinations of things to compare in two different ways.
On The Fly Comparisons
When something is selected for comparison, two things are recorded, the thing ID and the container ID with which it is associated (we need a container ID to specify a detail page, and to look up associated reviews and ratings). So, for example, the Item.id and Category.id values are used to specify an item that is to appear on the comparison page. The pair of numbers are joined with a colon and supplied as the argument to the category_item_id variable in the query string that invokes the comparison page:
foundry.cgi?module=compare_item&category_item_id=24:17
This invocation says, take item 17 from category 24 and put it on the comparison page. To specify multiple items, possibly from different categories, use a comma to delimit the category/item pairs:
foundry.cgi?module=compare_item&category_item_id=24:17,24:19,38:12
This says, take items 17 and 19 from category 24, and combine them with item 12 from category 38, then put them all on the comparison page. This is an easy way to invoke product comparisons from, say, a blog entry.
Permanent Comparison Records
Another way to specify product comparisons is to build permanent records within a table. This has the advantage that you can add more useful information about the particular comparison. You could even add editorial commentary about the comparison, and include related information. These are things you cannot do when you create an on-the-fly comparison.
To allow for permanent comparison records, the CompareItem, CompareMember, and CompareSupplier tables are used. Each allows you to specify a comparison record for the associated branch. Each record contains pairs of thing ID and container ID combinations. By default there are only 5 possible pairs that can be specified per record. But you are free to add extra columns to include more pairs. For the CompareItem table you will find a form like the following to allow a comparison record to be added:
The title column is used to add a label above the comparison chart, while the description is used to fill the white space element on the left side of the comparison chart (a good length for the description field is about 400-600 characters).
If you really want to flesh out your comparison records, add extra columns to this table and populate them. The information will be available to use as the content of the hash [% alias.compare_info %] which, for Item comparison pages, is found in the compare_item.ttml template. So, for example, if you added the column CompareSupplier.editorial_comments to your CompareSupplier comparison table, you could place your editorial comments about the product comparison on the page by accessing [% alias.compare_info.editorial_comments %].
Not also that you need to validate your comparison records using the is_validated column. Non validated comparison records will not be selected when comparison pages are built in bulk (as discussed in the next section).
Once you have entered a comparison record in the system you can invoke the comparison page showing the record by specifying the compare_id, which is the PRIMARY KEY value for the record:
foundry.cgi?module=compare_item&compare_id=1
Building Predefined Product Comparison Pages
Given that the records in the comparison tables are permanent, it may be desirable to create static versions of the comparison pages. In fact you can do this using the general static page building mechanism of Review Foundry. Add the necessary options to your build plan:
The static HTML comparison pages will be built into the directory specified by the following configuration variables:
site_build_compare_item_path site_build_compare_member_path site_build_compare_supplier_path
Note: these variables are paths relative to the build root (typically /reviews in your document root). Comparison pages are generated in directories which are assigned a maximum of 100 pages and are named after the title of the comparison record. So, for example, with /compare-camera being the site_compare_item_path, we would find the page for comparison record 412 located at:
/reviews/compare-camera/401/12/comparison-of-some-top-selling-cameras.html
This path naming scheme has been selected on the offchance that you intend to build huge numbers of comparison pages for marketing purposes. However, if you only build a few dozen or less you might want to refashion the URLs for improved SEO performance. For example, you might want to eliminate all but the name of the file itself. You can do this by adding .htaccess file to your root directory, if one does not already exist, and adding a suitable redirection line for each comparison file you want to be found in the root directory:
Redirect /comparison-of-some-top-selling-cameras.html http://www.domain.com/reviews/compare-camera/401/12/comparison-of-some-top-selling-cameras.html
IMPORTANT: I have split the content over two lines here to make it fit in the box, but in the .htaccess file the directive must fit on a SINGLE line with a space between the relative and absolute URLs that you supply. Then this comparison page will be presented whenever someone requests the URL:
http://www.domain.com/comparison-of-some-top-selling-cameras.html
Suppressing Output
When comparison pages are served up by Review Foundry the generated HTML is self-contained. That is to say, it contains <HTML> and </HTML> tags, and so on. These are added by the navigation.ttml template, along with navigational links and whatever else you might have placed into that template. If you do no want the output of the comparison page to be wrapped in this content, add the following to the query string you use to invoke the page:
&nowrap=1
You can also gain control over this aspect of the presentation by editing the appropriate toggle on the Configure > Compare Things page.
You can also switch off the breadcrumbs and the search box on the fly if you like by adding either of the fllowing variables (but note that hiding the breadcrumbs also hides the search box too):
&nobreadcrumbs=1 &nosearch=1
Otherwise the default behavior is governed by the relevant configuration variable on the Configure > Compare Things page.
Documentation
Documentation for Review Foundry, which is entirely separate from these tutorial pages, is an ongoing project (as is this tutorial). You should find that there is sufficient information in the Review Foundry User Manual to answer most of your technical needs. Suggestions for improvement to both the User Manual and this tutorial are always welcomed. As more users gain experience with Review Foundry, and issues are resolved for its application in different areas, information gained from that experience will make its way into these pages.
Note: If you cannot find the information you are looking for in this tutorial, try the Review Foundry User Manual which you should find far more comprehensive than the instructional dialog found here.
Copyright © 2004 Random Mouse Software. All Rights Reserved.