CMS Data + String in an Attribute field

Attributes
1

image

I’m trying to create a dynamic modal inside my CMS list. To do this, I need to use a different modal number for each component - modal-1, modal-2, modal-3 etc.

Ideally I could just have 1 field in my CMS for ID number, and then this is added on to the end of the attribute.

Right now it’s only letting me add a Whole field to the CMS, which means I’d have to add 3 fields for each item: modal-1, open-1, close-1, etc.

Would be much cleaner if I could just concatenate the CMS variable with some text inside an attribute.

2

That would be cool, maybe put that on the Webflow wishlist, I’d probably make use of that also.

Here, you could either just store the full field as you suggested, or you could add a bit of javascript to do it for you- however it would need to execute before FS modal does.

I don’t normally like to put code inside HTML embeds but this situation it feels appropriate, and each script snippet can just act on the collection item that it’s a part of.

I’d place a small script chunk inside of the modal element itself, which is inside of the collection list.

Something like this;

<script>
// Find the modal elem
let scriptElement = document.currentScript;

// Get the FS element and set the attribute
let fsModalElement = scriptElement.closest('[fs-modal-element]');
if (fsModalElement) {
    fsModalElement.setAttribute('fs-modal-element', 'modal-{{ Name }}');
}

// Do this same thing for other attributes
// ...

</script>

Notes;

This works because in the script block inside of a CMS context, {{ Name }} will be replaced serverside for each list item.

You will still need the attributes ( makes positioning them easy ) but they do not need a value since the script will set that.

1 Like
3

Thank you for your reply @memetican!