Side-by-side comparison lets visitors select products and displays their features next to each other. We’ll show how to create it with Views.

You can add feature comparison to any site that lists items. This may include e-commerce sites, real estate or classified sites.

We will use one View to list the items available for comparison and another View to show the selected items.

To select products, we use one custom field that’s guaranteed to be unique. In our example below, we’ve created a field called SKU (Stock Keeping Unit), which is the unique identifier for our products. We will use it in the checkboxes in the first View and in the filter, in the second View, where we compare selected products.

1. Listing Items with Checkboxes

Our products comparison example uses a simple table output to display the different products. Of course, you can use any other layout.

Products selection

The important thing is to wrap the entire View in a form, output checkbox fields for each item and include a submit button in the form. We do all that by editing the View Loop Output and entering these HTML elements manually.

Here is how it looks like:

Meta HTML for Products Selection View
<form id="myform" action="/product-comparison/products-comparison/">

[wpv-layout-start]
<!-- wpv-loop-start -->
   <table width="100%">
            <thead><tr>
               <th>Select</th>
               <th>[wpv-heading name="post-link"]Product[/wpv-heading]</th>
               <th>[wpv-heading name="types-field-product-price"]Price[/wpv-heading]</th>
               <th>Image</th>
            </tr></thead>
      <tbody>
      <wpv-loop>
            <tr>
               <td><input  type='checkbox' name='product-skus[]' value='[types field="product-sku"][/types]'></td>
               <td>[wpv-post-link]</td>
               <td>[types field="product-price"][/types]</td>
               <td>[types field="product-image" alt="View product" title="View product" size="thumbnail" align="none"][/types]</td>
            </tr>
      </wpv-loop>
   </tbody>
   </table>

<!-- wpv-loop-end -->
[wpv-no-items-found][wpml-string context="wpv-views"]<strong>No posts found</strong>[/wpml-string][/wpv-no-items-found]
[wpv-layout-end]

<input id="mybutton" type="submit" value="Compare">

</form>

We are going to add a little piece of JavaScript. Just open the JS editor and add the following:

JavaScript for Products Selection View
jQuery( document ).ready( function( $ ) {

	$('#myform').submit( function() {

	    if ($('#myform input').is(':checked')) {

	    } else {
	        //alert('Checkbox is not checked!!');
	       window.location.replace("http://ref.wp-types.com/product-comparison/products-comparison/?product-skus[]=0");
	        return false;
	    }

	 });	
	 
});

Notes:

  • The form submit action points to the page that contains the View that displays the product comparison.
  • The name attribute for the checkboxes is product-skus[]. This matches the input filter that we’ll create in the comparison View.
  • The value attributes for the checkbox fields are the actual SKU values for each product. We set them by inserting the field shortcode.
  • The little Javascript that we have added to the View makes sure that the product-sku[] URL argument has some value, in case no product is selected. Otherwise, all products would be shown in the comparison when no product is selected.

When I select 2 products and hit ‘Compare’, I go to this URL:

Product comparison

It includes the product-sku[] argument for each selected product, with its SKU value. Now, we need to create the View that will filter products according to the ones selected in the URL. That’s easy 🙂

2. Displaying the Selected Products With a View

Our second View loads products and filters by SKUs, provided in the URL. Here is how the View Query Filter section looks:

Side-by-Side Feature Comparison - Set URL parameter
Side-by-Side Feature Comparison – Set URL parameter

To create that filter, we added filtering by the product-sku custom field, selected to supply its value from the URL and entered the argument name product-skus.

Now, everything matches. The first View produces the URL with the selected products and the second View loads these products from the database.

All we have left is to display the products.

Products side-by-side comparison

To get to this output, we use a very simple output in DIVs. Here is the Loop Output section for this View.

Meta HTML for comparison View
[wpv-layout-start]
<!-- wpv-loop-start -->
   <wpv-loop>
      <div style="float:left; width: 170px; height: 300px;">
        <h2>[wpv-post-link]</h2>
        SKU: [types field="product-sku"][/types]<br />
        Costs: [types field="product-price"][/types] USD<br />
        [types field="product-image" alt="View product" title="View product" size="thumbnail" align="none"][/types]
      </div>
   </wpv-loop>

<!-- wpv-loop-end -->
[wpv-no-items-found][wpml-string context="wpv-views"]<strong>No posts found</strong>[/wpml-string][/wpv-no-items-found]
[wpv-layout-end]

This output displays the different items as floating DIVs, one next to the other.