Multiple filter with jQuery and CMS

[naik34 (M)]

Hello,

I’m building a website that has a collection of projects, organized as a CMS collection, with every post having multiple tags, like different materials and technology used, set as multi-reference items in the collection settings.

What I’m trying to achieve is having some buttons that will toggle the visibility of the item, based on the tags.

I taught of using jQuery to look for the item and then use .toggle(), but I don’t know how to select only those items having a particular tag set inside the CMS collection.

Thanks!

---

Here is my public share link: LINK
(how to access public share link)

[cyberdave (Dave S.)]

Hi @naik34,

Thanks for the post. If you are looking for a way to give each dynamic item it’s own ID, then try this:

Step 1: Create a field in the CMS to act as the dynamic ID, and give a sequenced number to each post, starting with zero:

Step 2: Create a dynamic list on your page, which is sorted by the dynamic ID, from smallest to largest:

Step 3: Give a an ID to your Dynamic Items element, I would call it “dynamic-items”:

Step 4: Insert an Embed Widget, directly below the Dynamic Item element, so that it comes before other content.

Step 5: In the Embed widget, paste the following code, inserting the Dynamic ID where indicated in the screenshot:

First the code:

<script>
  var x = document.getElementById("dynamic-items").querySelectorAll("div.dynamic-item");  
  x[dynamic-id-goes-here].setAttribute("id", "item-dynamic-id-goes-here"); 
</script>

Where it says “dynamic-id-goes-here”, replace that with the Dynamic ID field from the CMS:

The custom code will only be run on the published site after saving the custom code embed, and you have set your dynamic ID field for each record starting with 0, then each dynamic item will get it’s own ID, with that being set dynamically based on the ID of the Dynamic ID field.

Here is an example site:

Here is the public site link: https://webflow.com/website/Using-Dynamic-IDs-with-Collection-Items

The ultimate solution will be for Webflow to provide a unique ID for each dynamic item automatically, but that feature is not added yet, so without the workaround, all dynamic items get the same ID (if that is set in the designer on the dynamic item element).

I hope this helps!

[naik34 (M)]

Hi cyberdave,

thanks for your awesome answer! It is very close to what I want to achieve. The script assigning the new ID might be the answer.

I’m actually assigning multiple tags to the CMS item (instead of the dynamic ID field), to then be used by jQuery selectors to filter the visible items. Isn’t there a way to add that tags when defining the div ?

Thank you!

[cyberdave (Dave S.)]

Hi @naik34, well multi-reference tags are only available on a dynamic template page, not on a dynamic list on a static page.

In order to show the contents of the multi-reference list, a separate dynamic list need to be created, bound to the multi-reference field on the dynamic template page.

Maybe what might make more sense until it is possible to use multi-reference fields outside of dynamic template pages, is to create a comma separated list of tags in some cms field, then parse that and take actions in javascript based on what tags are used per collection item (also probably requiring some custom code).

You have to play around with it. Once the collection items have a dynamic ID, you can at least them refer to the specific collections items in custom code, from other collection items to potentially manipulate what is shown based on some field criteria.

You can also use conditional visibility to show or hide elements bound to the CMS, take a peek here: Conditional visibility | Webflow University

I hope this gives you some ideas.

[naik34 (M)]

It sure did!

I think I will play around with some javascript to assign multiple string values to the divs based on the CMS field and then toggle the visibility.

Hope to succeed!

Thanks for your precious help!

[cyberdave (Dave S.)]

Hi @naik34, one note, when using the script in the embed, use javascript as jQuery has not yet loaded on the page. You can put your jQuery script (jQuery is baked in) in the footer to target your elements by ID, after all the document has loaded. In the embed, use good ole Javascript to manipulate your attributes

Let me know what you create, I am interested to see what you come up with

[naik34 (M)]

Hi again,

This is the solution I came up with, It still need to be refined but it works pretty good for now.

So, I still had to assign a dynamicID to every item of the CMS in order to iterate trough them, but I also assigned two other fields containing the tags I want to be the filters

I then added inside the dynamic list a custom code that iterates between all the items and creates an attribute called tags.

And then in my footer I have this code that look for matching words inside the attribute “tags”, based on the text inside the clicked div, in order to not repeat the code for every tag.

Thanks for your help.

Cheers!

[darny]

Hi! I am trying to create something similar, where by clicking on a dynamic list item a map marker opens on a mapbox map. It works perfectly if I use an unfiltered dynamic list, but if I appy a filter to the list it doesn’t.

When I inspect the code with a filtered list, I see that the embedded code isn’t working and the unique id isn’t being applied to the list items anymore.

The embed code i’m using in each list item to assign a unique id is:
<script> var x = document.getElementById("dynamic-items").querySelectorAll("div.dynamic-item"); x[dynamic-id].setAttribute("id", "item-1"); </script>

Any ideas?! I wonder if maybe a workaround is to use a dynamic filter on the page using mixitup or similar, instead of setting the filter using the usual method in Webflow?