jquery - Mixitup 3 filter on load

Question

i’m trying to use mixitup multifilters within my webapp. Everything works fine so far. But i encountered an issue when it comes to set specific filters on load and adding filters afterwards.

e.g.: i have 4 categories to select from within a fieldset with checkboxes.

<fieldset data-filter-group="categories">
 <h5 class="text-center mt-3">Kategorien</h5>
  <div class="row mb-2">
   <input class="saveFilter categories" type="checkbox" name="options" value=".category1">Kategorie 1
   <input class="saveFilter categories" type="checkbox" name="options" value=".category2">Kategorie 2
   <input class="saveFilter categories" type="checkbox" name="options" value=".category3">Kategorie 3
   <input class="saveFilter categories" type="checkbox" name="options" value=".category4">Kategorie 4
 </div>
</fieldset>

By default, 3 of 4 shall be shown when the page is loaded (by session-value):

category1,.category2,.category3

These categories are filtered by default and correctly displayed, so far so good.

But when i click on the button for category 4, i want it to be added in addition to the 3 preloaded ones. But it does not work, as only category 4 will be displayed now.

This is my code so far (without the session-string, pre-filtered categories are hard-coded for easing):

$(document).ready(function() {

var containerEl = document.querySelector('.mixit');
var mixer = mixitup(containerEl, {

    multifilter: {
        enable: true
    },
    animation: {
        enable: false, // temporarily disable animations during load phase
        effects: 'fade translateZ(-100px)'
    }
});

// Set a load selector for filter group you wish to set an initial value for
// mixer.setFilterGroupSelectors('categories',  localStorage.getItem("categories"));

mixer.setFilterGroupSelectors('categories', '.category1,.category2,.category3');

// Tell MixItUp to re-filter based on the new values
mixer.parseFilterGroups();

// Re-enable animations
mixer.configure({
    animation: {
        enable: true
    }
});

});

In summary:

Desired functionality:

category 1,2,3 are loaded by default When i click on the button for category 4, i want so display categories 1,2,3 AND 4

What actually happens:

category 1,2,3 are loaded by default When i click on the button for category 4, only category 4 is being shown.

Can somebody help me?

Thank you

Answer 1

I got it:

This:

mixer.setFilterGroupSelectors('categories', '.category1,.category2,.category3');

must be set to

mixer.setFilterGroupSelectors('categories', ['.category1', '.category2', '.category3']);

Works fine!