patrickkunka / mixitup

A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more
https://www.kunkalabs.com/mixitup/
4.52k stars 734 forks source link

How can I prevent two Mixitup3 Multifilter instances from controlling one another? #620

Open markgonz opened 5 months ago

markgonz commented 5 months ago

I created a block for wordpress that uses mixitup to display filterable posts. The block can be used more than once on a page. The issue I am having is that the filter controls from one instance controls all instances. Below is my mixitup initialization code. As you can see the instances are unique. Before adding mutifilter I was able to tell each instance where its controls were with /control: '#<?php echo $id; ?> .<?php echo $filter; ?>', but it seems this does not work with multifilter. Any help would be greatly appreciated.

$filter = 'filter_' . $block['id'];
$partnerItem = 'partnerItem_' . $block['id'];
$partnerpageList = 'pageList_' . $block['id'];
$partnerpageStats = 'pageStats_' . $block['id'];

// Initialize MixItUp
        var mixer_<?php echo $id; ?> = mixitup('#<?php echo $partnerlist; ?>', {
            selectors: {
               //control: '#<?php echo $id; ?> .<?php echo $filter; ?>',
                target: '.<?php echo $partnerItem; ?>',
                pageList: '.<?php echo $partnerpageList; ?>',
                pageStats: '.<?php echo $partnerpageStats; ?>',
            },
            multifilter: {
            enable: true
            },
            animation: {
                duration: 300
            },
            pagination: {
                limit: 12, 

            },
        callbacks: {
        onMixStart: function(state, futureState) {
            console.log('%cActive filter: ','background:red; color:white;',futureState.activeFilter.selector);
            console.log('%cContainer: ','background:white; color:red;',futureState.container);
        }, 
    }