In this blog post I will show you how to create a compare functionality in your Drupal website. You must have seen various shopping websites where you have the option to compare the two or more products. These sites have a small link along with every product that says "Add to Compare" and once you click on it the products are added to some basket (not a cart) and once you press the compare button in that basket you see a big table that has all the features or specifications of the selected products that you wanted to compare in a tabular format. This is really easy way to compare the features of various products who intend to buy. This comparison table have the specifications in the table rows and the products in the columns. I am not sure if there is any module to achieve this functionality in Drupal. Ubercart - the shopping module for Drupal also don't have this feature in built.

I manage the unofficial community website for the students of IP University Delhi. The site is www.ggsipu.info , it has lot of things that help students like previous year papers, up to date updates about various activities in the university and the site is a platform for all the students to connect and share information. The traffic on this site is at peak during the admission time, when new students apply for admission they want to know which colleges are good for them. In IP University the admissions are given to students based on their performance in an entrance examination. The student with higher rank get a better college and a course of his/her choice. Thats fair :)

We have been managing this site since 2007 and in the past few years we noticed that maximum students who are looking for admission in IP University are interested in comparing the colleges. This is because most of the students have the option to select more than one college so it is obvious that they will compare them.

What is the basis of comparison in colleges?

Based on our experience we have collected the most common parameters that student look for for comparing the colleges.

College Infrastructure

Past Placement record

Companies visited in the college for placements

Faculty background

Distance they have to commute to reach college

Whether college has Hostel or not

Extra Curricular activities

So college infrstructure, past placements is very important parameter. It is obvious choice. If someone has an option to select two colleges then he/she would prefer the college which has good placement record.

On ggsipu.info we felt that there is a need to have a feature on the site where students can themselves compare the colleges of their choice and compare them on the parameters we discussed above. This would also ensure that our site moderators will spend less time answering to individual queries which are repeatitive in nature because almost every student ask the same question like "My rank is XXX, I can get College A and College B, which one should I choose?"

So we finally built the College Comparison feature

This is how the comparison table look like. The first column has the parameters like Placement Information, Companies Visited, Hostel information, Faculty Ratings etc. These parameters are nothing but cck fields that we added in our content type college. In this table it is very easy to compare the colleges.

Lets see how we built this functionality.

Flag Module

So the first thing we need to do is to install flag module and enable it. Now create a new flag called compare_college

You can check the the configurations of this flag in the screenshot above. The Flag link text is Compare and Unflag link text is Remove. Another important thing to note here is that this flag is associated with a content type called College which has the various cck fields (parameters) and information about the colleges.

So our flag is now created.

We will come back to the Flag that we created but before that we will create a view where we will add this Flag link. Though when we created the flag we added it on the node page i.e. the individual page of the college with full details, but that would have usability issues. Students will have to go to individual colleges' page to add them to the compare list. This option is anyways there but we wanted a functionality where all the colleges are displayed at one place and we wanted the Flag/Unflag link for each college on that page.

This calls for creating a View. We will create a page view.

Create a view to display all the colleges and add Flag/Unflag link

Basic Settings

View Name: College Listing

Style: Grid (Number of columns: 6 and Alignment: Horizintal)

Items per page: 150

Relationships

We added a relationship Flags: Node flag in this view

We will configure this relationship.

Include only flagged content: Uncheck it

Flag: Select Compare College

By: Current user

Fields

After you have add the flag relationship then you can add the Flag/Unflag link in your view fields.

Add College_Picture and Node: Title which has the name of the college. If you want you can add whatever fields you want in this view but since this view will be used to list the college so we recommend you to add just the important fields like image and node title.

Page settings

Path: college

So eventually this will become http://www.ggsipu.info/college

Filters

So here we just selected the Node Type = College so that this view only list the colleges and nothing else. This filter is important here because we are not restricting the view to display only the flagged content so it is important that we restrict the node type to only college.

After we have created the view to list the colleges, this is how the ggsipu.info/college page looks like.

Now the colleges are displayed in a grid view and the Flag/Unflag link is also displayed in this view.

If you click on the Flag link Compare then the link will change to Remove, which is the Unflag link. You can see that the background color of Compare (Flag link) and Remove (Unflag link) is different, this is the magic of CSS. You can add whatever color you want in your CSS.

So this part is done now.

Lets make the Basket or Cart that will display the Colleges that we flag

Now in our college listing view we have the Flag link and we are ready to add the colleges for comparison. Now we need to create a place to display only the flagged colleges. You must have seen on various shopping websites with comparison feature that as you add items in the compare list another basket is automatically populated without page load. We will do exactly that in our Drupal website. This is what I love about Drupal everything is possible.

First of all we will create a block view that will display only 6 colleges, yes this is the maximum number of colleges we want to compare. This number could vary on your site, may be you want to display only 4 colleges.

The display is Grid and the Items to display in this view is 6. This view again has a similar relationship that we added in our previous view but the difference is that now we will only display the colleges that are flagged by the user.

In this block view we have College Picture, Node Title and the Flag/Unflag link as well, which could be useful as user can review the colleges in this basket and may want to remove it from the basket. This Flag/Unflag link in this view could improve the usability. Well we are almost there. Our view is ready and this block view will display the items that are actually flagged by the users. There is no need to create any filter here because we are restricting the colleges to flagged ones only.

Now if user select some colleges to compare then that college should appear in this block.

Things are good so far but we are missing one very important point here. This block view will display the list of flagged colleges but we want this basket to be displayed just above the page view that we created earlier. That ways the flagged colleges should be immediatley visible separately in the basket to the user as they flag the colleges. Now this block view will display the flagged college but the page needs to be refreshed to see the updated list!

Yes, the block view won't refresh immediately, a page refresh is required. When I started building this functionality I though I will live without this feature but then I though there has to be some way. I was actually willing to write to own module. Basically the requirement is to refresh the block as soon as the flag is updated. I searched on Drupal.org and to my surprise there was a module just for this purpose.

Views Flag Refresh Module comes to the rescue

So we just created a basket view that should display the flagged colleges only and we were looking for a module that will automatically refresh the block view via AJAX. Views Flag Refresh saved lot of out time and we were able to implement this features within minutes.

After installing go the basket view that we created earlier. Now we need to do is to Use AJAX in this view, so we will select Yes there.

After enabling the Views Flag Refresh you will notice some extra settings under the Use Ajax configurations. These extra settings allow us to refresh this particular view when a particular flag is either Flagged or Unflagged.

This is it. Yes we are done now.

So far we have created a view to list colleges and to display the list of colleges flagged by the user. We call it compare basket or compar cart. Now we are left with creation of the comparison table. It is pretty straight forward except one little thing.

Create a view to compare colleges

This will be a page view. The url of this page is www.ggsipu.info/compare_college In this view we will simply add a relationship similar to college basket block view that we have just created. Also add the cck fields associated with the college that serves as the parameters for comparing the colleges.

This view will obviously have a table style but the problem with the traditional Table style is that the Nodes or the Colleges will appear in the rows like this.

Title | Placements | Hostel

----------------------------

College #1 | 200 | Yes

College #2 | 150 | No

but we want a table in which Colleges appear in the Header of the table and the CCK field in the rows like this.

| College #1 | College #2

--------------------------

Placements | 200 | 150

Hostel | Yes | No

You know I was kinda ok with the default table view but somewhere deep inside me I wished if there is some way to switch it. Well you know in the past I have done such switch by overriding the theme template. I wrote about it almost 3 years back. This time I was lazy to do that again in Drupal 6 site.

Views Hack saves the day

To my surprise (yes Drupal surprise me everyday) someone actually created a module for achieving this switch or trasposing. The module is Views Hacks it not only has the option to Flip the table, they call it Views Flipped Table but numerous other tweaks and amazing add on utilities.

So just install and enable this module after that go to the compare college page view and select Flipped table in the style of this view.

And we are done. Now add a link to this page view in the footer of the basket view that we created earlier. You can even place a button image here which people can click to compare the items. Clicking on the link will open the page view that we just created

Now we are all set.

1. Go to http://www.ggsipu.info/college and select the colleges you want to compare. You need to be a registered user for using this feature. I am not asking you to create your account on the site but it is upto you.

2. As you add the colleges in the compare list the Basket will be updated automatically.

3. Then click on the http://www.ggsipu.info/compare_college and you will see the comparison table for the colleges that you selected.

Drupal Version: 6

Modules used: Flag, Views, CCK, Views Flag Refresh, Views Hack