A few months ago, when I was writing about creating a List of recently viewed nodes in Drupal I mentioned a few other uses for the couple of modules, Flag and Views. One of them, I'm going to expand on today, is the product comparison functionality.
There are several ways to implement product comparison functionality as found on websites throughout the Internet. Perhaps the most common is the one where there is just a few products to be compared, like service subscription options, and they can all be displayed on a page without the need of giving user a way to select the products to compare. Only a simple tabular view would be needed to implement such a comparision page, which would list individual product fields.
Today, though, we're going to have a look at a slightly more complex product comparison type, the one where user marks products to be included for comparison as they browse the website. When they're done choosing products, they visit the comparison page itself.
For those who know their way around Flag and Views modules, we will create an Include in comparison per-user node flag, which users will use to mark the interesting nodes. Then, we will create a table view with the nodes previously marked. That's the long story short, let's get on with it.
Submit and continue editing.
I chose to not display link on either node teaser, or node page. If you want to keep things simple, you can leave either of these checkboxes enabled.
If you want to be a bit more flexible, though, and display the link inside the node content or a block for that matter, here's how to do it. Just include the following lines of code (appropriately customized for your needs) wherever you want the flag/unflag link to be displayed:
$node = node_load(arg(1));
print flag_create_link('product_comparison', $node->nid);
Homepage with the product teasers. Note the Exclude from comparison link under the products included for comparison and listed in the Product comparsion block.
Product comparison page itself. This is an unthemed flipped table. With an image added and a bit of designer's love, you could turn it into pretty much anything there is out there:
If you're using Flag version 2 and also have installed SessionAPI module, you will be able to select anonymous user in the flag configuration and make the product comparison available for anonymous users as well.
To switch columns and rows of the table view style, use module called Views Flipped Table which is part of Views Hacks.
I came across a bug in views_flipped_table, though. When there are no products marked for comparison, instead of the Empty text, it comes up with an error. The fix is easy. Inside the theme file views_hacks/views_flipped_table/views-flipped-table.tpl.php just enclose the generated <table> in an if(!empty($rows)) block.
While taking screenshots for this post and testing the configuration, I figured I would just create a Feature package with the whole thing ready for you to install and use right away.
Please, find the package attached to this page and feel free to use it as you see fit. You will need Flag version 2 to make use of this package.
|Product comparison Features package||16 KB|
|Product comparison View||1.54 KB|