Streaming live at 10am (PST)

Inserting custom HTML into CMS collection element

Hey guys,

I was trying to add an SVG inside a CMS collection, so had to use this jQuery to insert the content for each item (greater than 10000 chars and used this method given on this URL: here ).

The ids were getting overwritten across CMS items, which was resulting in the same SVG getting pasted across. So, I created a new field in the CMS collection called “div-id”. This allowed me to create unique ids for each item and then it worked beautifully: Here. Showing the insertion of SVG inside the div below:

I have a “designer” attached to each SVG. The designer is fetched through a reference field as “Designers” is a separate CMS collection too. In the CMS collection page for Designers, I just wanted to replicate the same section but to pull in only those SVGs that correspond to that particular designer (which I did by using a filter on the collection list wrapper settings).

However, this time the insert code isn’t working. I realised that (for some unknown reason to me) the custom code was getting executed at the very beginning (before the dynamic value of “div-id” was being fetched). So, I added “$(document).ready(function()” to the entire function. Now, I can see that div-id is being fetched and the element is getting created. However, the SVG is not getting inserted. I am totally lost on what the reason might be. This is the live link for this page: Link. Including console screenshot below:

Here is the read-only link to the project: Read-only link. The pages to be looked into are “TEST design page” (live link: this )and the CMS collection page called “Designer Details Template” (live link: this).

Would be amazing if someone could help me with this.

1 Like

This seemed to resolve by itself. I am not able to delete the post. So, just adding this text here.