How to create a side-by-side product comparison

Many sites include a page to search products and then check a box in the search results to see a side-by-side comparison. This type of comparison may be used for products like health insurance, vehicles, and more. This example shows how to add checkboxes to one view, and use those boxes to filter a second view for a side-by-side product comparison.

Create a searchable view

First, create a view that lists all the products that can be selected. Start with the instructions to create a table view.

In most cases, this view will be searchable in order to allow the user to narrow down the products they would like to compare. See more detail on creating a custom search form to filter this view.

Add checkboxes to the product listing view

Now that you have a view set up, add the checkboxes. By including form tags and checkboxes, you'll be able to send users to the second view when they click the 'Compare' button.

Before content (replace 'page-with-view' with the URL to your product comparison page):

<form method="get" action="[siteurl]/page-with-view">

In the content box:

<input type="checkbox" name="compare[]" value="[id]" />

After content:

<button type="submit" class="button">Compare</button>
</form>

Create the side-by-side product comparison

Next, create a view to show the selected products in more detail for the comparison. Set this view to show all entries, and add all of the product information here that you would like. You may want to set a limit on this view to show a maximum of 5 products or so to prevent the columns from being to narrow.

Before content:

&style>.columns2 .column{width:50%; float:left;}
.columns3 .column{width:33%; float:left;}
.columns4 .column{width:25%; float:left;}
.columns5 .column{width:20%; float:left;}
</style>
<div class="columns[entry_count]">

In the content box (replace 25 with the ID of the field holding the product name):

<div class="column">
<h2>[25]</h2>
Add all content here
</div>

After content:

</div>

Then add a filter like this in the comparison view:
Entry ID is equal to [get param=compare]

Now, the second view will be filtered for a side-by-side product comparison when the button in view 1 is clicked.