Hello, I have multiple (two) CMS lists on a single page that are being successfully filtered by one Filters UI. The first CMS list is a ‘Featured’ item and only lists one item, with a vastly different layout.
I’m using the Empty solution for the empty state.
The Empty state is showing even if there are results on the page.
I believe this is because I have multiple lists on the page but with the same set of filters.
Has anyone come across this or found a solution?
Hey @timd you can take a similar approach as the one we have here: Filter + Mirror Click. Each list inside the tabs is its own filter instance but the user inputs are being mirrored to each of the hidden filters.
Thanks @Support-Luis as I am using CMS driven filter fields, should I add the mirror attributes via javascript?
@timd you can either add them with JS or manually add the attribute value to the CMS Item and use Webflow’s dynamic attributes to link the value field.
Hi @Support-Luis I am unable to get this to update filters/keep in sync.
If inspecting the published code, all trigger/target attributes appear to be added correctly but clicks do not appear to be mirroring, or more accurately, the clicks are mirroring but filters are not updating for the second set of filters.
For this demo, the ‘target’ filters are shown but will be hidden once working.
https://staging.yellowcanary.com.au/resources/blogs
password:yellowcanariesonly
I should add that in this instance I am dynamically adding the target/trigger attributes via Javascript.
It is a little strange behaviour as the mirror clicking appears to work for some filters but not others but as far as I can tell, the setup is identical.
Hey @timd! This might be because of the element we are using to trigger the mirror click. If you click the text, the filters seem to be being clicked automatically as you can see in this loom
You’ll also need to add another fs-cmsfilter-element="clear" as the one we have only clears the dropdown option
I’ve also modified these two functions as the Attribute instances begin with no suffix and then goes to -2
// Iterate over each item
triggers.forEach((item, index) => {
// We increment the index because it starts from 0
let counter = index + 1;
if (counter === 1) {
item.setAttribute('fs-mirrorclick-element', `trigger`);
} else {
item.setAttribute('fs-mirrorclick-element', `trigger-${counter}`);
}
});
// Iterate over each item
targets.forEach((item, index) => {
// We increment the index because it starts from 0
let counter = index + 1;
if (counter === 1) {
item.setAttribute('fs-mirrorclick-element', `target`);
} else {
item.setAttribute('fs-mirrorclick-element', `target-${counter}`);
}
});```Thanks a lot Luis, I’m trying these changes out now.
Thank you again Luis. I’ve now change the trigger to be .filter-ui_dropdown-link which is the checkbox wrapping label element. e.g.:
<label class="w-checkbox filter-ui_dropdown-link is-checkbox" fs-mirrorclick-element="trigger-7">
However, I’m not getting any mirroring happening now.
Here is the related target:
<label class="w-checkbox filter-ui_hidden-filters_checkbox-wrapper">
<input type="checkbox"
id="checkbox-3-6"
name="checkbox-3"
data-name="Checkbox 3"
class="w-checkbox-input filter-ui_hidden-filters_checkbox"
fs-mirrorclick-element="target-7">
<span fs-cmsfilter-field="category" class="w-form-label" for="checkbox-3">
Company Culture
</span>
</label>
Update: Solved, instead of trying to figure out why the wrapping element wasn’t trigger click I’ve just altered the styling of the label element to take up the full space.
All working now, thank you Luis.
Awesome! You are welcome!