Trying to use encodeURIComponent to encode a URL in custom code... and failing

Design help Custom code
1

I am not a good developer. At all. I tend to be a possible hack for some things, but get me past basic HTML and CMS stuff, and I’m… not good.

I’m currently trying to create a link in a custom code block that uses as part a URL stored in one of my collections, but that URL needs to be encoded. Specifically, the link needs to look like this when I’m done:

<a class="w-inline-block" href="https://podcastaddict.com/feed/${encodeURIComponent(feedURL)}" target="_blank"><div class="follow on">Podcast Addict</div></a>

The feedURL is the value stored in my database as a “natural” URL, like https://feeds.megaphone.fm/thedispossessed. Now, obviously to everyone but me, just replacing feedURL with the dynamic field does not work.

I see loads of javascript examples that should help me… but did I mention I’m a poor developer? Like, really poor. When I try to implement them, it’s a dismal failure. Probably because I do not know what I’m doing.

So, if anyone wants to take pity on a dog clearly too old for new tricks, I’d greatly appreciate it.

Here is my site Read-Only: Webflow - The End

2

The way I’d approach this is to first bring the data to a convenient place, and the separately transform it. My preferred way is often CMS-bound custom attributes.

  • Create your link(s) anywhere on your page you want, using the regular designer links.
  • Add a custom attribute to the link, let’s call it feed-url, and you’d CMS bind it to your URL field

That gives you;

  • Ability to use the designer for your links freely
  • All the data where you need it
  • Easy identification of the links that need your magical transform ( they have the feed-url attribute )

Then after the page loads in your script, something like this-

document.addEventListener('DOMContentLoaded', (event) => {
    const links = document.querySelectorAll('a[feed-url]');
    links.forEach(link => {
        const currentHref = link.getAttribute('href');
        const feedUrl = link.getAttribute('feed-url');
        const encodedFeedUrl = encodeURIComponent(feedUrl);
        const newHref = `${currentHref}${encodedFeedUrl}`;
        link.setAttribute('href', newHref);
    });
});
3

I think I got most of that. When I’m back from this tiny trip to see my aging parents, I’ll dig in and see how to do all of that.

Much thanks!