Is there a way to prevent duplicate dynamic, CMS entries used to filter a CMS list?
Scenario:
I’m working on creating a dynamic dropdown CMS filter that will ultimately filter reviews (seen here) by the date they were published (example: July 2020).
The Problem:
Since there are multiple reviews for July 2020, this date shows up multiple times.
ALL of the dates are also showing up on one line.
The Goal:
Is there a way to prevent duplicate entries for my filter dropdown list?
How can I get the dates to populate on separate lines?
Note:
This is part of the @Finsweet CMS Library, but I haven’t been successful in getting a response to this part of my question.
In case anyone is still struggling with this → Create a new CMS List for each of the categories you want to use as filter and then connect the filter collection wrapper to that.
You can use this snippet if the duplicates are based on text. Replace “.filter-component” with your own class that you wish to loop through.
document.addEventListener("DOMContentLoaded", function dumpDups() {
const rr = new Set();
for (const div of document.querySelectorAll(".filter-component")) {
if (rr.has(div.textContent.trim())) {
div.parentNode.removeChild(div);
}
rr.add(div.textContent.trim());
}
dumpDups();
});
The tutorial is great & super helpful but what it fails to mention is that the dynamic checkboxes they use are not pulling data from the collection list that they’re filtering - rather, from a separate collection list of ‘filter names’. In the tutorial’s example, “brands”. This new collection is then used as a reference field within each collection item to denote the brand.
