MixItUp Filter on Load

Design help Custom code
1

I’ve been using the MixItUp tutorial from @sabanna and they have been working great. But I want to make it load a specific filter when a page loads and can’t find any help online other than the guides from the Kunka Labs page:

I am running into a wall and can’t figure out how to make the stuff provided from Kunka to work in Webflow.

Any help would be great!

2

Hello, @mkup!

What exactly you can’t understand in the Kunka Labs tutorial?

3

Basically that I add the code in the body section (below) with the specific filter I want to load up placed in place of ‘category-2’ but it still is loading up as ‘all’ by default. Is there something else I am missing to adjust?

var mixer = mixitup(containerEl, {
load: {
filter: ‘.category-2’
}
});

4

Hey, @mkup!

You don’t need to use all these lines, it creates another “mixer” call, this is why it doesn’t work.

All you need to do is add these lines inside the existing one

 {
    load: {
        filter: '.category-2'
    }
}
2 Likes
5

@sabanna - Has anyone told you that you’re a lifesaver??

Thanks so much for the help!

1 Like
6

Glad I could help :slightly_smiling_face: and thanks for being patient with all these tutorials

1 Like
7

Hi @sabanna

I hope you can help me :slight_smile:

My page loads correctly but the MixItUp multifilter doesn’t work as it should when I use the other filters after load. I have tried using the following without luck (line 168+169) from this tutorial Issues · patrickkunka/mixitup · GitHub

mixer.setFilterGroupSelectors(‘kategori’, ‘.kok’);
mixer.setFilterGroupSelectors(‘region’, ‘.københavn’);

You can view my project here: https://preview.webflow.com/preview/restaurantjob?utm_medium=preview_link&utm_source=designer&utm_content=restaurantjob&preview=0aff5884355a070abf43221782b4252f&pageId=5d63da38afd53f43511e3769&itemId=5d63dfcdf5f139fd8ff3e0f8&mode=preview

8

Hello, @CasperKp!

The console error on the published site indicates that you are tryingto filter by category that doesn’t exist
08%20AM

You might want to revisit this settings
CloudApp

If kategori and region should be variables, then they should be declared earlier and added without quotes.

9

filter on load that code is not working :pleading_face::pleading_face:

10 
<script>
    // its mixitup all item parent
    var mixer = mixitup('.mix-container',{
        selectors: {
            target: ".mix"              
        },
        animation: {
            duration: 300
        },
        load: {
            filter: ".home-about" // default show this item on load
        }
    });
    //set default active class on page load
    $(document).ready( function () {
        $('.navbar__menu li').removeClass('active');
        $('.navbar__menu li a[data-filter=".home-about"]').parent().addClass('active');
    })

    // handle click events 
    $ ('.navbar__menu li a').click(function(event){
        event.preventDefault(); //prevent the default behavior
        var filter =$(this).data('filter');
        mixer.filter('filter'); // apply filter using mixitup
        $('.navbar__menu li').removeClass ('active'); //remove active class from the all item
        $(this).parent().addClass('active'); // add active class to clicked item


    })
</script>

// i hope that code will be solve your problem