Unique IDs in Collection Items

Design help CMS
1

Dear Webflow Community,

I am trying to give a unique HTML ID to a heading inside a collection list item. It does not have any CMS content tied to it. But obviously, as it is part of the HTML collection list item, it gets duplicated with the every new collection list item, also duplicating it’s ID and making the ID non-unique.
It doesnt have to be a particular ID, it just has to be a unique one for each heading in each collection list item.

Using Javascript my approach so far was the following:
Use a script inside an embedded HTML element to find the innerText of another heading inside the collection list item that gets its content from the CMS and is therefore unique content.

--

The is problem that : $(this).find("#referenceHeadingId ").innerText; results in undefined.
And I tried and tested a lot but can’t seem to find the solution.

Is there maybe a better way to generate a unique ID for each heading in each collection list item?
Or is there a better way to access the innerText of an element?

I hope this is understandable.
Thanks in advance

capture-1
capture-11471×532 49.5 KB
capture-2
capture-21369×925 56.1 KB

2

collection page - No way to create unique-ids by JS (Each collection page is with the same code = same id if you work by JS).

To generate ID number (start from X) for html list of p/li/divs or any idea like this - its very simple (If you want i will add codepen) - but what the idea behind this id? (Why not using regular cms field? like number-field)

Also the id will be wrong over pages (IF you filter -or- limit -or- Conditional visibility the collection).

3

You have the right idea of dynamically setting the ID using the heading text. The issue is that you cannot use inline jQuery in embed code blocks, and have to do it in the page footer code.

If you still need help with this you can contact me here.

4

I think I might have found a work-a-round for your issue.

Description:

  1. You need to asign a basic div-id to some unique field in your collection(could be the slug)
  2. Then you need to make sure that you call for the ID in the script with get element by id

Codes:

  1. < div id=“YOUR UNIQUE ID”>< / div>
  2. (document.getElementById('YOUR UNIQUE ID));

Both just needs to be something in the HTML Embed of you dynamic item

image
image1864×1368 181 KB

1 Like
5

Hi @Elias, @Siton_Systems, @samliew and @asgerkrause, I’m having the same issue. I need every collection item on a page to have a unique id so we can track it with Google Tag Manager. What would be a good solution to create unique id’s for every item, any id-eas?

6

Did you ever find a solution. I need the same thing for Google Tag manager?

7

@cconley.4875 No unfortunately not. I made unique collection lists and added a condition. Every list got a unique ID. You can see it here: Available fiats, tokens and stablecoins for exchanges | SwissBorg ‘asset candidate listings’

8

I think I found a solution that did what I needed. I dropped this in the div that I want to give a unique ID to, and used the “Slug” as the ID name.

<script>
document.currentScript.closest('div.w-dyn-item').id = 'SLUG';
</script>

Then I followed these instructions but swapped out the ID for the div text:

2 Likes
9

Follow this guide
https://webflow.com/website/unique-ids-for-collection-items

then just use the id of the collection item and the class of the heading you want to select

1 Like
10

I followed your steps, but it still doesn’t work… What am I doing wrong?
Anyone who can help?

https://preview.webflow.com/preview/hvc-jaarverslag?utm_medium=preview_link&utm_source=designer&utm_content=hvc-jaarverslag&preview=44eae2a69d39807193e51ee7b8dd80fa&mode=preview

11

@Coding_isnt_my_thing The problem with your example is that the .idtext paragraph element is not a direct child of your .w-dyn-item. yours is set out like this .w-dyn-item>section>div>div>.idtext but it must be .w-dyn-item>.idtext for it to work

12

Thank you so much @Kwalker1995
Can you also help how I can make it a direct child? Do I just need to position it differently?

13

@Coding_isnt_my_thing your very welcome and yes you just have to move the .idtext element so its just inside the .w-dyn-item and not inside anything else

14

I didn’t see this as a recommendation, but here’s the approach I take.
Since you’re already working in an HTML Embed, you have full control over your element’s ID.

In your example…

<h5 id="changeMe" ...

You can insert the Slug field and add static text adjacent to it.

Slugs are guaranteed to be unique for each item within a collection, because they are used to form the item’s Collection page URL. You can think of them like a primary key for each of your collection items.

For example…

image

This also makes your ID’s predictable for code use if you need to reference them- which is typically what ID’s are for.

1 Like