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.