Streaming live at 10am (PST)

Relative path in collection, link field

I need to have a link field in a collection accept a relative path. I am passing variables to the target page. /sign-up?plan=Basic&price=50&planID=1
I need to do this in order to maintain continuity between a dev/staging and the production site’s.
I get an error when entering a relative path in a collection item.

4 Likes

I’m gonna bump this, because using relative links makes everything easier …which is surely what the CMS is designed for!

1 Like

Hey Sam,

This is the error message you get when entering any relative link:

This is problematic when building in the Webflow staging environment, as these absolute links will need to be changed after going live — example.webflow.io to example.com

Is there any other way to reference static pages within the CMS?

Thanks in advance!

2 Likes

A workaround is use a normal text field with the link in custom code.

Thanks Sam, what might this custom code look like exactly? I’m unable to work out how to connect a link block to anything other than a CMS link field.

I’m trying to set page links to individual static pages, example below:

Here are some link examples:

Just a thought, if you have the room in your collection, put in two link fields, “Staging Link” and “Live Link”, then changing over just before going live is a matter of changing just one “Get URL from…” selection on a page. Found it easy to implement, just a bit more work to enter two versions of the link.

Hope this helps.

1 Like

So important. Please implement Relative Links. This makes staging a site cumbersome.

1 Like

Here’s another workaround that, at least in my case, has simplified matters somewhat. In my case, I have a CMS collection for “Products” but client wants unique page formatting on each product page (so the CMS template for the “Products” collection doesn’t lend itself well). I still want the products in the CMS so I can link subproducts and parent categories, etc.

So, the collection item URLs are /products/. I’ve created the product-specific pages with the same page name/slug in a different folder (in my case, the root of the site – so / ).

The additional step is to create a 301 redirect that redirects all references to the /products folder to the same file name/slug in the root directory (you could use a different subfolder as well). So long as you create a unique page for each product (using the same slug as the CMS item), the redirect will take you to the desired page.

See https://university.webflow.com/article/setting-up-301-redirects for instructions for redirecting an entire folder using wildcards.

Not a solution for all cases, and definitely would prefer to use relative paths in collection link fields, but thought I’d share.

I want to bump this. I’m also getting frustrated not being able to easily link elements to product pages, and not having the URL field support relative links.

The problem is as others have mentioned: I’m staging my site while developing and I don’t want to have to manually change all links afterwards.

6 Likes

Bump from me too! I’m developing a website with lots of products and variants and using absolute urls will be a real pain in the a** when I’ll have to move the website to its final domain.

2 Likes

Bump bump bump! Very annoying!!!

Bump! Bump! Bump! Bump! Very important for staging.

Same problem here, and since Webflow doesn’t seem to want to do that here’s a quick workaround using a global javascript.

  1. Add on the link collection item an attribute : replace-host and value true

  2. In the project settings, go to “Custom Code” and add the following code :

<script>
  // Replace production domain names with current staging 
  // domain in all the links with the "replace-host" attribute.
 
  $(document).ready(function() {
    $('a[replace-host="true"]').each(function(){
      	var old_url = $(this).attr('href');
      	var new_url = new URL(old_url);
      	new_url.hostname = document.location.hostname;
      	$(this).attr('href', new_url.href)
	});
  });
</script>

This way, in your CMS data you can always use the real production absolute links, but you will be able to navigate normally the website in staging under any other domain name. Keep in mind that this will not affect your SEO nor navigation in production domain since it will be replaced with itself. (you can remove the code when in production too.)

Hope it will help.