Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope Multiple Filter Select

We have built a testing site here ... http://chelmer2.businesscatalyst.com/products We need to make it so that the items show all of what is selected, at the moment it only shows the last selected item rather than comparing and hidding what is not needed, hope this makes sense?

User Gravatar

user2323

Posted Jun 1 2014 13:59 UTC

$25


  • Assigned To Gaby
  • Solved
  • isotope
    isotope filters
    isotope-on-append
  • 1964 Views

3 Replies


(just updated the cartesionSelector function to handle the Show All option correctly)


You need to combine the selectors when selecting multiple items.

So change the lines that have

var selector = $('option:selected', this).attr('data-filter');

to

var selector = $('option:selected', this).map(function(){
                   return $(this).attr('data-filter');
                 }).get().join();

If you want to combine the two filters (categories and colors) to get items from the categories that are filtered by color you will need to create the cartesian product of the two filters.

For that you need to change the code of your two filters to this (handles both filters)

function cartesianSelector(filter1,filter2){
    var map = [];

    if (filter2.length == 0 || filter2.indexOf('*')>-1) return filter1;
    if (filter1.length == 0 || filter1.indexOf('*')>-1) return filter2;

    for (var x=0;x<filter1.length;x++){
        for (var y=0;y<filter2.length;y++){
           map.push(filter1[x]+filter2[y]);
        }
    }
    return map;
}

var filters = $('#filters-a,#filters-b').change(function(){
              var selectorA = $('option:selected', filters[0]).map(function(){
                       return $(this).attr('data-filter');
                   }).get(),
                  selectorB = $('option:selected', filters[1]).map(function(){
                       return $(this).attr('data-filter');
                  }).get(),
                  selector = cartesianSelector(selectorA, selectorB).join();

              $container.isotope({ 
                   filter: selector,
                   animationOptions: {
                       duration: 750,
                       easing: 'linear',
                       queue: true, 
                  }
              });
              return false; 
          });

this way selecting ardenne and colonial categories along with red and grey/black color will show products that are

  • ardenne and red
  • ardenne and grey/black
  • colonial and red
  • colonial and grey/black
User Gravatar

Gaby

Posted Jun 1 2014 19:26 UTC

Solution

This didn't solve your task? Get your own custom solution.

Golden! Thank you

User Gravatar

user2323

Posted Jun 2 2014 6:48 UTC

Golden! Thank you

User Gravatar

user2323

Posted Jun 2 2014 6:48 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions