Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 1 day ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 5 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

jQuery product comparison plugin

Use jQuery to filter, compare and show further information about products

AshleyAshley

Here’s a simple way for customers to be able to compare products to help them make a purchase decision. In the demo you select which products you want to compare and hit the ‘compare’ button which displays a fullscreen modal displaying  further information about the products.

Let’s delve into the code. For this example i’ve built a jQuery plugin that works with the modal plugin to display our products. so you just need to include the js/jquery.comparison.js file and the code below. You can download the full code at the bottom of this post, along with viewing the demo.


$('.product').compare({ //each product container
compareButton: '.compare-products' // comparison button class
});

The plugin

Below is the plugin code that handles the product comparisons. the two main sections of the code are the two click events for selecting a product $(this).find('button')... and when the user clicks the .compare products’ button $(options.compareButton).cli...

example

How it works

The basic principle of how the page works is, a user clicks the ‘+’ button for a product, we check to see whether the product id is in the itemsarray, if it isn’t in the array we add it. If it is in the array we remove it. This action works like a toggle. Once there are products in the array the compare button becomes ‘active’. If the compare button is clicked, a fullscreen modal is displayed displaying the selected products. The extended information for each product are stored in data attributes for each product container.

We also use the animatedModal.js plugin to trigger the fullscreen modal. You can find out more about the modals settings here

The JavaScript


(function ($) {
$.fn.compare = function (options) {
// setup the default options
var defaults = {
compareButton: '.compareButton'
};

var options = $.extend(defaults, options);
var itemsarray = []; // array for storing selected items

// if the compare button is clicked add the items to the
// modal window - opening the modal is triggered by the modal
// plugin seperately
$(options.compareButton).click(function(){

// if the button has the class active we have items to compare
if($(this).hasClass('active')){

$('.modal-products').empty(); // clear the modal
$('.no-products').hide(); // hide the no products selected message

var arrayLength = itemsarray.length;
// loop through the array if products
for (var i = 0; i < arrayLength; i++) {

product = $('.product[data-id="'+itemsarray[i]+'"]');

$('.modal-products').append('
  • '+$(product).data('title')+'
  • '+$(product).data('description')+'
  • '+$(product).data('price')+'
  • '+$(product).data('ingredients')+'
  • Origin: '+$(product).data('country')+'
'); } // else we haven't selected any products to compare yet }else{ $('.modal-products').empty(); // clear the modal $('.no-products').show(); // show the no products selected message } }); // If an item is click for comparison run this code // $(this).find('button').click(function(){ // toggle the class selected on the product wrapper $(this).parent().toggleClass('selected'); // get the product id productId = $(this).parent().data('id'); // check if this product is already in the array var inArray = $.inArray(productId, itemsarray); if(inArray < 0){ // add this product to the array itemsarray.push(productId); }else{ // remove if from the array itemsarray.splice( $.inArray(productId,itemsarray) ,1 ); } if(itemsarray.length > 1){ // if there are items in the array (selected) add the class 'active' // to the 'compare' button $(options.compareButton).addClass('active'); }else{ // if there are no items in the array (selected) // remove the active class $(options.compareButton).removeClass('active'); } }); }; })(jQuery);

The HTML

You can use any animation style for the modal as we use the awesome animate.css script by Daniel Eden. Each product is wrapped in it’s own div with the class .product


Compare Products
+
 

Canadian

Lorem ipsum dolor sit amet, consectetur adipiscing elit

£4

Add To Cart
+
 

Bass

Lorem ipsum dolor sit amet, consectetur adipiscing elit

£2.50

Add To Cart
+
 

HooDoo

Lorem ipsum dolor sit amet, consectetur adipiscing elit

£5

Add To Cart
+
 

Blue Lime

Lorem ipsum dolor sit amet, consectetur adipiscing elit

£3.24

Add To Cart
CLOSE

Demo Download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 0
There are currently no comments.