Isotope.js not filtering correctly when using multiple checkboxes

Question

I have a simple filter which contains two checkboxes, one for cake another for cupcake.

A user can check either option, or select both to show all results. However, even though my filters array contains the correct values, nothing shows.

Even when filtering by one option, it doesn't showcase the correct results.

See demo here:

(function($) {

  var $grid = $('.shop__grid'),
    $checkboxes = $('.isotope-trigger');

  $grid.isotope({
    itemSelector: '.productCard',
    layoutMode: 'fitRows'
  });

  $grid.imagesLoaded().progress(function() {
    $grid.isotope('layout');
  });


  $checkboxes.change(function() {
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function() {
      filters.push(this.value);
    });
    // filters = filters.join(', ');
    $grid.isotope({
      filter: filters
    });
    console.log(filters);
  });


})(jQuery);

user_1019850 · Answer

You missed 2 things:

you transferred the values instead of the id's
the ids of the checkboxes serve as classnames for $grid, so they have to be prepended with a dot.

My changes can be reduced to these lines, the rest is there to demonstrate that it's running:

$checkboxes.filter(':checked').each(function() {
  filters.push(this.id);
});

var filtersString = filters.length > 0 ? '.' + filters.join(', .') : '';

// console.log(filtersString);

$grid.isotope({
  filter: filtersString
});

Demonstration:

(function($) {

  var $grid = $('.shop__grid'),
    $checkboxes = $('.isotope-trigger');

  $grid.isotope({
    itemSelector: '.productCard',
    layoutMode: 'fitRows'
  });

  $grid.imagesLoaded().progress(function() {
    $grid.isotope('layout');
  });


  $checkboxes.change(function() {
var filters = [];
// get checked checkboxes values
$checkboxes.filter(':checked').each(function() {
  filters.push(this.id);
});

var filtersString = filters.length > 0 ? '.' + filters.join(', .') : '';

console.log(filtersString);

$grid.isotope({
  filter: filtersString
});

// console.log(filters);
  });


})(jQuery);

Here I found a documentation about the filter: https://isotope.metafizzy.co/filtering.html

Isotope.js not filtering correctly when using multiple checkboxes

1 Answers