Relative path in collection, link field

Design help CMS
22

This is a really great point Leon, and I ran into this issue today too. While I hope Webflow does around relative links with URL parameters, I was also able to invent a pretty smooth workaround too using custom attributes

Here’s what I did.

  1. I created a text field in my CMS collection for my attribute value.
  2. I created a custom attribute to serve as my eventual URL parameter.
  3. I hooked the custom attribute up to my CMS collection field.
  4. I wrote some JavaScript to convert this custom attribute into the URL parameter for any button or link that has the correct custom attribute.

Here’s that JS:

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Find all link elements with the custom attribute "pack"
  const linkElements = document.querySelectorAll("a[pack]");

  linkElements.forEach(link => {
    const packValue = link.getAttribute("pack");
    if (packValue) {
      const currentHref = link.getAttribute("href");
      const separator = currentHref.includes("?") ? "&" : "?";
      const newHref = `${currentHref}${separator}pack=${packValue}`;
      link.setAttribute("href", newHref);
    }
  });
});
</script>