Relative path in collection, link field

Design help CMS
1

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.

5 Likes
2

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

1 Like
4

Hey Sam,

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

1077×94 3.82 KB

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
5

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

6

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:

1244×388 305 KB

7

Here are some link examples:

8

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
9

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

1 Like
10

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 301 redirects | Webflow University 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.

11

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
12

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
13

Bump bump bump! Very annoying!!!

14

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

15

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.

1 Like
16

I also really need relative links to be added in the CMS. It’s making my current client project a huge pain.

17

Hey Amine!

Could you explain this in more detail please?

18

Amine’s solution helped me come up with my own. Leaving it here in case it’s useful for someone else:

<script>
$(document).ready(function() {
  $('a').each(function() {
    var old_url = $(this).attr('href');
    var current_domain = document.location.hostname;
    if (old_url.includes("https://domain.com/") || old_url.includes("https://www.domain.com/")) {
      var new_url = old_url.replace(/https:\/\/(www\.)?domain.com\//, "https://" + current_domain + "/");
      $(this).attr('href', new_url);
    }
  });
});
</script>

This way there’s no need to add an attribute to the link. This will catch all domain.com and www.domain.com occurrences and replace them with the current host, like your-project.weblow.io.

When the site is ready to launch you can safely remove that code.

Hope it helps!

19

BUMP. The work arounds mentioned are not sufficient for us. This feature would be really nice.

20

FYI - Bumpers - Bumping posts is not helpful at all. If you want the Webflow product team to pay attention to a feature request please head over to the wishlist => wishlist.webflow.com and either vote or if the wish does not exist, create one.