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

33 Views Asked by At

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 both 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.

mixitup initialization and variable declaration

$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);
        }, 
    }

Sample filters

<form id="form_partner-filter_block_eec91bd0888c571917fc6730ec7b6a4b">    
<fieldset data-filter-group="">
  <p class="fieldset-toggle">Location</p>
  <div class="radio">
    <input
      class="radios-filter"
      type="radio"
      name="location-radio"
      id="filter-location-all"
      value=""
    /><label for="filter-location-all">All</label>  </div>

  <div class="radio">
    <input
      class="radios-filter"
      type="radio"
      name="location-radio"
      id="filter-venues-north"
      value=".north"
    /><label for="filter-venues-north">North</label>
  </div>
  <div class="radio">
    <input
      class="radios-filter"
      type="radio"
      name="location-radio"
      id="filter-venues-south"
      value=".south"
    /><label for="filter-venues-south">South</label>
  </div>
</fieldset>
<fieldset data-filter-group="">
    ... more filters
</fieldset>
</form>

I made sure that each instance has its own ids etc. This was working before adding mixitup multifilter, but I needed to update the logic so multifilter was added. Update: The separate pagination component work as expected on each instance. The issue is witht he filters. clicking anything on either instance controls both instances.

0

There are 0 best solutions below