Multiple Filters Selectable

This will be a great feature. Isotope already support multiple filtering: http://isotope.metafizzy.co/demos/combination-filters.html#content

In some cases, you have content types with more than two vocabularies. I also need this feature, but I don't know if I can contribute (but I can try). So, by the moment +1 on this.

Regards.

Hello, what I have tried (and it works) is to add one vocabulary as a filter in the view and expose the filter to the visitor, then I let the other vocabulary to work as the isotope filter. Could be a temporary solution and I wrote it if someone need this too.

Anyway It will be good to have different vocabularies in the block and use them with isotope avoiding the reloading that you have to do using the normal filter that comes with Views.

PS: I was looking the @GregAdams sandbox and the his demo site and he inspired me ( http://isotope.pixelass.com/isotope-view/with-views-filters )

Hi, i had the same requirement for me an rewrite some template files and the views_isotope.js

views_isotope.js:

(function($) {
  $(document).ready(function() {
  
  var $container = $('#isotope-container'),
  filters = {};

  // filter buttons
    $('.filters a').click(function(){
      var $this = $(this);
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

      // store filter value in object
      // i.e. filters.color = 'red'
      var group = $optionSet.attr('data-filter-group');
      filters[ group ] = $this.attr('data-filter-value');
      // convert object into array
      var isoFilters = [];
      for ( var prop in filters ) {
        isoFilters.push( filters[ prop ] );
      }
      var selector = isoFilters.join('');
      $container.isotope({ filter: selector });

      return false;
    }); 
 });
})(jQuery);

views-isotope-filter-block.tpl.php:

Here i added 'data-filter-group' and use the displayname from the view $view->current_display;
Attention: if you have multiple blocks you have to look at you're id's nothing should be twice.

<?php
/**
 * @file views-isotope-filter-block.tpl.php
 * Default simple view template to display a list of rows.
 *
 * @ingroup views_templates
 */
 // dsm($view->current_display);
?>

<div class="isotope-options">
  <ul class="option-set clearfix filters" data-option-key="filter" data-filter-group="<?php print $view->current_display; ?>">
  
    <?php foreach ( $rows as $id => $row ): ?>
      
      <?php 
      // remove characters that cause problems with classes
      // this is also do to the isotope elements
      $dataoption = trim(strip_tags(strtolower($row)));
      $dataoption = str_replace(' ', '-', $dataoption);
      $dataoption = str_replace('/', '-', $dataoption);
      $dataoption = str_replace('&amp;', '', $dataoption); 
      ?>
          
      <li><a class="filterbutton" data-filter-value=".<?php print $dataoption; ?>" href="#filter"><?php print trim($row); ?></a></li>

      
    <?php endforeach; ?>
    
  </ul>  
</div>

views-isotope.tpl.php:

Here i changed the str_replacements so that you have standalone tags in every element.

<?php
/**
 * @file views-isotope.tpl.php
 * Default simple view template to display a list of rows.
 *
 * @ingroup views_templates
 */
?>
  <div id="isotope-container">
    <?php $count = 0; ?>
    <?php foreach ( $rows as $id => $row ): ?>
      <?php
      // added for easy multi-color display 
      if ($count == 5) {
        $count = 0;
      }
      $classlist = '';
      $bgstyle = '';
      // pull out isotope-filter class if it exists
      
      if (strstr($row, '<div class="isotope-filter">')) {
        $rowparts = explode('<div class="isotope-filter">', $row);
        $filterclass = explode('</div>', $rowparts[1]);
        
        // check for commas and treat as an array for list of taxonomy terms
        if (strstr($filterclass[0], ',')) {
          $classes = explode(', ', $filterclass[0]);
          foreach ($classes as $class) {
            $class = trim(strip_tags(strtolower($class)));
            $class = str_replace(' ', '', $class);
            $class = str_replace('/', '-', $class);
            $class = str_replace('&amp;', '', $class);
            $classlist .= ' ' . $class; 
    
          }
        } else {
          //strip divs and normalize naming for just once
          $classlist = trim(strip_tags(strtolower($filterclass[0])));
          $classlist = str_replace(' ', '#', $classlist);
          $classlist = str_replace('/', '-', $classlist);
          $classlist = str_replace('&amp;', '', $classlist);
          $classlist = str_replace('#', ' ', $classlist);
        }
        $row = $rowparts[0] . '</div>';
      }
      
      ?>
      <div class="alle isotope-element isotope-element-<?php print $count; ?> <?php print $classlist; ?>" data-category="<?php print $classlist; ?>" <?php print $bgstyle ?>>
        <?php print $row; ?>
      </div>
      <?php 
      // reset
      $rowparts = NULL;
      $filterclass = NULL;
      $count++;
      ?>
    <?php endforeach; ?>
  </div>

In the main isotope view itselve i added all taxonomy terms, excluded them and addes one main vocabulary-terms at the ende
and rewrite the output for including all the other term within the wrapper.

Hope i could maybe help someone :)

tobi

Thanks a lot for your idea! A problem occurs, when the taxonomy-term itself contains a space: it will be treated as two distinct terms!

@forward-media

You have post a good deal and help me a lot for static multiple filtering.

Can anyone tell me that is it possible that filtering criteria can be base on multiple Taxonomy vocabularies.
For example:
I have vocabulary "City" and other vocabulary "Category". Right now in the below code its only inserting classes from the vocabulary "Category"; not from the vocabulary "City".

<div class="alle isotope-element isotope-element-<?php print $count; ?> <?php print $classlist; ?>" data-category="<?php print $classlist; ?>" <?php print $bgstyle ?>>

All I am saying here is that in the views Filter criteria I have added two type of Taxonomy vocabulary as shown above but I have getting filter/class only from "Category" vocabulary.

Can anyone help the resolve this issue.

Thanks,
Javed Gardezi

Would be great if views isotope could incorporate multiple filters just like Combination filters here: http://isotope.metafizzy.co/demos/combination-filters.html

Include this feature for the next update, please! Thank you!

@forward-media did you manage to have multiple filters with this code? I implemented it but it only makes Views Isotope crash

I did this with some custom jQuery. You need to give in in a block in the view a div with id '#filter-block-pricing' with a child ul with class tags and an a tag in the li will be the filters, give them an attribute data-filter that matches the taxonomy fields! then add taxonomy fields to the views fields you want. They should have a custom class and div wrapper as in the css in this below code. Also, the ul should have the correct class.

Maybe there is a way to put my code in the module? I am not familiar with views api. I documented the jquery as much as possible

(function($) {
Drupal.behaviors.myBehavior = {
attach: function (context, settings) {

//code starts
$(document).ready(function () {

//build all intial classes, the classes are given to the div under the main container div.view-pricing div.view-content and retrieved from a views field, which is given a custom css class value taxonomy-filter and wrapped in a div class
build_classes();
filter();

});

// execution of the initialization on window load because media must load first
$(window).load(function(){
filter();
});

// filter items when filter link is clicked
$('ul.tags li').click(function(){

//toogle the class selection when clicked on a button
toggleSelect($(this));

//filter with the newly set selected class
filter();

});

/**
* builds the required classes for isotope filtering. For documentation see http://isotope.metafizzy.co/docs/filtering.html
*
*/
function build_classes () {
var obj = $('div.taxonomy-filter');
jQuery.each(obj, function(i,v){

/*
* Select the div under the container which isotope filters on
*/
var div=$(this).parent().parent();
//var css = $(this).find('div.field-item').html();
var css = $(this).html();
var css = css.toLowerCase().trim();
var css = css.replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-').replace(' ', '-');
var css = css.replace('&', '');
var css = css.replace('/', '-');
div.addClass(css);

});
}

function toggleSelect($clicked_item) {
if ($clicked_item.find("a").hasClass('selected')) {
//nothing happens because the clicked button is allready selected
return false;
} //end if
else {

//remove the selected class everywhere
$clicked_item.parent().find("a").removeClass('selected');
//add selected class to the clicked element
$clicked_item.find("a").addClass('selected')
} //end else
} //end toggleSelect

function filter() {

//select the container field (for documentation see http://isotope.metafizzy.co/docs/filtering.html
var $container = $('div.view-pricing div.view-content');

//select all a tags with the class selected in the div#filter-block-pricing
var $selected = $('div#filter-block-pricing li a.selected');

//make the class to pass to the istotope() function, see http://isotope.metafizzy.co/demos/combination-filters.html

var $selector = "";
$.each($selected, function(key,value){

var a = $(value);

if(a.attr('data-filter')!=("*")) {
$selector = $selector +"." +a.attr('data-filter');
} //end if

}); //end each loop

if ($selector=="") {
$selector = "*";
}

// execute isotope
$container.isotope({
filter: $selector,
layoutMode : 'fitRows' });

return false;

} //end filter

$(".views-field-entityreference-view-widget input").change( function () {
if ($(this).attr('checked') == undefined) {
$('div.widget-selected-items input').prop('checked', true);
}

});
//code ends

}
};
})(jQuery);

I did the job using the dev version and without any path.

What I did is:

1. Isotope Grid View:Get all the term fields and hide from presentation. Than I created a new field that is a "Custom text" field where I printed all the terms separated by comma. Added "isotope-filter" class on this field.
2. Isotope Filter Block View: Establish a filter criteria per vocabulary.

It is working. Hope can help someone :)

Fixed in 7.x-2.0-beta1. Each view now allows for an "instance id". This is unique per instance, so filters by default apply to all grids on the page, but if you want to change that, set the grid to an instance of "myinstance" and a filter to the same and then that filter will only apply to that grid.