Adding filtering to jquery-isotope within Wordpress theme

Question

I'm using the Vitrux theme in Wordpress that uses Isotope jQuery plugin to display a work porfolio. Isotope allows categories to be used to sort the items, but within the theme it's only possible to sort by one category at a time (e.g. 'Year' or 'Type', not 'Year' and 'Type'.

You can see a mock-up here: http://snaprockandpop.samcampsall.co.uk/shoots/

The jQuery attached to each category item, that sorts the posts, is as follows:

function (){
                  var selector = $(this).attr('data-filter');
                  $container_isotope.isotope({ filter: selector });
                  var $parent = $(this).parents(".filter_list");
                  $parent.find(".active").removeClass('active');
                  $(".filter_list").not($parent).find("li").removeClass('active').first().addClass("active");
                  $(this).parent().addClass("active");
                  return false;
                }

I can see from the Isotope site that it's possible to use multiple filters, and I've found the authors notes on this here: http://jsfiddle.net/desandro/pJ6W8/31/

EDIT: Editing the theme files has allowed me to assign appropriate classes and properties to the filter lists (you can see these in the page source) and I'm targeting them through an edited version of the jsfiddle to reflect the classes and id's in the theme styling:

$( function() {
var $container = $('#portfolio_container');

    $container.isotope({

      animationOptions: { duration: 300, easing: 'linear', queue: false },
      getSortData : {
      year : function ( $elem ) { return parseFloat( $elem.find('._year').text() ); },
      live-shows : function ( $elem ) { return parseFloat( $elem.find('._live-shows').text() ); }
      }
    });

var filters = {};
$('.ql_filter a').click(function(){

var $this = $(this);
 if ( $this.hasClass('selected') ) {
    return;
  }
  var $optionSet = $this.parents('.filter_list');
  $optionSet.find('.active').removeClass('active');
  $this.addClass('active');

  var group = $optionSet.attr('data-filter-group');
  filters[ group ] = $this.attr('data-filter');

  var isoFilters = [];
  for ( var prop in filters ) {
    isoFilters.push( filters[ prop ] )
  }

  var selector = isoFilters.join('');
  $container.isotope({ filter: selector });
  return false;
  });
});

Two (fairly major) things:

1) I'm not 100% that I've edited this correctly. Despite Rich's excellent comments I'm still out of my depth. I'm particularly not clear on how to set-up the 'getSortData' section - I think it's right but any input would be great.

2) I'm not sure that this JavaScript is being initiated. At the moment I've placed it immediately before the closing head tag but a check on the page suggests that the original script outlined above is the one running on the filter items.

Any pointers at this stage would be fantastic!

Rich Rich · Accepted Answer · 2013-02-11T21:11:00

I see what you mean. You are looking for the intersection of both filters and not the mutually exclusive filter values.

Short answer: Contact the theme vendor and see if they can make the intersection filters for you.

Longer assistance (not an answer):

Your ultimate goal is to get the Vitrux theme working the way you want.
Your first goal is to understand what the jsfiddle code is doing.
I can handle your first goal by explicating the code.

// hook into the JQuery Document Load event and run an anonymous function
$( function() {

    // Create a variable called container
    // make container refer to the element with ID Container
    var $container = $('#container');

        // initialize isotope
        // Call the isotope method on the container element

        $container.isotope({

          // options...
          //distracting options

          animationOptions: { duration: 300, easing: 'linear', queue: false },
          getSortData : {
          price : function ( $elem ) { return parseFloat( $elem.find('.price').text() ); },
          size : function ( $elem ) { return parseFloat( $elem.find('.size').text() ); }
          }
        });

    // sorting button

    //for the anchor tag that has a class of 'pricelow', wire up an anonymous function to the click event

    $('a.pricelow').click(function(){

     //Rerun the isotope method when it is clicked, pass an array of options as a parameter
      $('#container').isotope({ sortBy : 'price',sortAscending : true });
     //return false for the anonymous function.  Not 100% sure why this is necessary but it has bitten me before
      return false;
    });

  //removed the rest of the click methods, because it does the same thing with different params

  //Here is what you are interested in understanding
  //Create an empty filters object
  var filters = {};

    // filter buttons
    //When an anchor tag with class filters is clicked, run our anonymous function
    $('.filters a').click(function(){

      //Create a variable that is the action anchor element
      var $this = $(this);
      // don't proceed if already selected by checking if a class of "selected" has already been applied to the anchor
      if ( $this.hasClass('selected') ) {
        return;
      }

      //Create an optionSet Variable, point it to the anchor's parent's class of "option-set"
      var $optionSet = $this.parents('.option-set');
      // change selected class
      //Inside the optionSet, find elements that match the "selected" class and then remove the "selected class"
      $optionSet.find('.selected').removeClass('selected');
      // set this (the anchor element) class to "selected"
      $this.addClass('selected');

      // store filter value in object
      // create a variable called 'group' that points to the optionsSet variable and grab the data-filter-group expando attribute
      var group = $optionSet.attr('data-filter-group');
      //Append to the filters object at the top of this section and set the data-filter-group value to the anchor tag's data-filter value
      filters[ group ] = $this.attr('data-filter');


      //create an isoFilters array variable
      var isoFilters = [];

      //Loop through each one of the items in filters (give the item an alias variable called 'prop'
      for ( var prop in filters ) {
      //push the prop into the isoFilters array (the opposite is pop)
        isoFilters.push( filters[ prop ] )
      //keep looping until there are no more items in the object
      }
      //create a variable called selector and turn the array into a string by joining all of the arrays together
      var selector = isoFilters.join('');
      //Like always, call the 'isotope' method of the 'container' element and pass our newly concatenated 'selector' string as the 'filter' option.
      $container.isotope({ filter: selector });
      //return false for some reason (maybe someone can expand on that)
      return false;
    });

});

Next is your ultimate goal which is modifying the Vitrux theme to handle intersection filters.

This gets a little tricky because

You have automatically generated tags from PHP to create the category links and the Year filter. So, there will be definitely some PHP code changes.
You must convert the jsfiddle code to handle your PHP changes

Adding filtering to jquery-isotope within Wordpress theme

2 Answers