For me, using Ubercart in Drupal as an e-commerce solution for your website is the way to go. I have been using Ubercart for years now for a number of web design and development projects, and there are a massive amount of contribute modules to beef it up. One feature that I have been keen to work on is a Product Comparison feature, which would allow users to select products and have them display on a page, providing them with a nice and easy layout to easily compare their selected products.
After searching around the web, I found a few articles and posts from people looking for this feature, asking how it could work or if anyone had done it, but couldn’t find anything that said “here it is, this is how it can be done”. So, after a little bit or research and a bit of a play, I have come up with a solution which is not that difficult to achieve and only requires some already existing Drupal modules with just a few tweaks.
Note: This tutorial assumes that you already have a working ecommerce site with Ubercart installed. Best to also try this on a test environment and not a live website.
Step 1. Download Required Modules
Download, install and enable the following modules.
- Views (I used 6.x-2.11, I haven’t tested it with any other releases)
- Flag (I used 6.x-2.0-beta3, I haven’t tested it with any other releases)
Step 2. Flags configuration – Setting up your “compare”
Once you have enabled the Flags module, go to the flags administration page at /admin/build/flags.
Click the Add link, enter the name of your flag (something like “compare”), and leave the flag type as “node”, and submit.
On the next screen you will need to configure your new flag. Complete the following fields (changing the values if you like). I setup my configuration so only registered users of the website could compare products.
Title – Compare Products
Flag link text – Add to compare
Flagged message - [title] has been added to your compare
Unflag link text – Remove from compare
Unflagged message – [title] has been removed from your compare
Flaggable content – Product
Check “Display login link for anonymous users.” and for anonymous link text add “[login] to add to your compare”
For flag access, check flag and unflag for authenticated users
Under Display options select “Display link on node page” and “JavaScript toggle” as link type
Click submit to save your flag.
With the settings we used, the “flag link text” should now display on your product nodes. Clicking it should make the “flagged message” appear and the link changed to your “unflag link text” using JavaScript.
So what we are doing here is just flagging nodes – it’s actually pretty simple. We are flagging/unflagging them as “compare product”, so you should now be able to (by clicking on the link provided on your products) add and remove products to compare on your website.
Now we have done this, we need to create a page to display our “flagged” products, in which this case is the products we want to compare.
Step 3. Creating out Compare Products Page
Go to the Views Administration page, enabling the Flag module creates a default flag view. You can use this as a reference, or even change this view to what you need, it’s totally up to you. All we need is a view with (at least) the settings explained below.
DEFAULTS
Basic Settings – Use at least the following settings
Title: Product Comparison
Style: Table
Items per page: Unlimited
Access: Authenticated user
Empty text: Full HTML
- You have not yet added any products to compare. Click the “Add to compare” link when viewing a product to add it to this page.
Relationships
Add the following relationship:
Flags: Node flag
- label: compare
- check “Include only flagged content”
- flag: select the flag you created in step 2
- by: current user
Fields – You can put whatever fields here you would like to show up against each product. You must include the Node Title, and ideally you would want to show a thumbnail of the product, its price and description and the unflag link to allow users to remove it from this page. I have the following fields for my compare:
Content Image using an imagecache, linking to product
Node: Title linking to product
Flags: Flag link
- Relationship: select the one you added
Product: Sell Price
Node: Teaser
Filters
Node: Published Yes
AND SAVE
Now add a new page display view and give it a URL, then save. Navigate to your new compare page using the URL you entered. If you haven’t “flagged” any products yet, go do so and once done you should see those products displayed on your Compare Products page!!!
But, there is one slight issue. Because we needed to use Style: Table to get the layout to better suit a compare list, it still doesn’t display it the way we need it too. We want to display each of the products horizontally, with each field label shown on the far left so it is easy to compare our products. To do this we need to retheme the table style for our view.
Step 4. Theme the table output of the view
Under Theme: Information for our view, it displays a list of all the possible templates for the display plugin and for the style plugins. Look for the list titled Style output. This is what we want. It lists the possible templates we can use to change the theming of the style output. The first one it displays is the generic template for the table style output but we don’t want to use this one, because if we do we could effect any other table style view that may be on the site. So best to use the next one across, mine was called views-view-table–flag-compare.tpl.php.
Create a new php file and name the file to the template name you want to use. In my case my file is named views-view-table–flag-compare.tpl.php.
Paste the Drupal 6 code from here http://drupal.org/node/174578 into your template file.
Then place the file in your themes directory – and presto! Your comparison table should be laid out more like a comparison style grid. Below is a screenshot of what my Comparison page looks like after a little bit of extra styling.
About Erin
hi – for some reason i’m unable to have add the “add to compare” flag/link to my product page, as it’s not showing up in the fields list for the product view (product_panel_info). can you think of anything immediately that i’m missing? thanks in advance for any help/guiding you might lend. great tutorial btw. i was backed against a wall to build a very similar module from scratch, and procrastination paid off, as you posted this within weeks of my starting to search.
cheers
Hi Ed, in step 2, when you are creating your flag make sure you have selected the correct content type ( “checkboxes under the Flaggable Content section”) that you require it to display on. Also, under “Display options” make sure you at least have “Display link on node page” checked, otherwise your flag wont appear anywhere.
Hope this helps!
hai. thanks for your tutorial. It helps me a lot. can you tell me how to implement tab option in the product page ?.i don’t know how to bring it in node page.thanks in advance.
The tab options on my product page is a collaboration between Drupal Views (http://drupal.org/project/views), the UC Upsell Module (http://drupal.org/project/uc_upsell) and the Drupal Quick Tabs Module (http://drupal.org/project/quicktabs).
Jamie, this is awesome, dude. Thanks for taking time and being so thorough on this whole process. I’m just I could spend a week on it and get half a solution.
One thing I’m not clear on with the theming information:
“Look for the list titled Style output. ”
I only get one ‘Style Output” option under each theme. If I select Style output I get the php code for it.
“So best to use the next one across, mine was called views-view-table–flag-compare.tpl.php.”
I don’t see any next one across either? And I can’t see how you’ve found or created this php file. Can you elaborate a bit here.
Hi Laurie,
I’m not sure why you would only be getting one option. The theme information section for the view should display a bunch of template names under each option. These templates don’t actually exists anywhere, they are just naming suggestions that you can use that the view will listen to. The first suggestion it gives is the most general one, meaning numerous views may pick up the same template. Then each of the suggestions to the right get more specific to that view. All you need to do is create a new php file, give it a name (my example was named “views-view-table–flag-compare.tpl.php”) add the code to it as provided and place it in your themes folder. Once you have done that click on the “rescan” button and your new template should then be highlighted in bold. For some extra help on the subject of views theming in general, check out this post http://www.appnovation.com/theming-views-drupal-6-simple-way
Hope you get it working!
Thanks a ton…the thorough steps really helped and i was able to create the product comparison within couple of hours.
Thank you very much.