CMS links within Components create malformed urls and 404 not found

Context:

  • I have a portfolio site for my design work.

  • I have a portfolio collection for managing all my portfolio items.

  • The collection has data for $title , $description, and a unique $collection item link.

  • I have a “Portfolio” page for listing all my portfolio items.

  • I have card component for displaying portfolio items on the “Portfolio” page.

  • The card contains typical content like title and description and a button to link the portfolio item’s page.

  • The card has properties for =title , =description, and =link.

  • =link is configued as Link to Page (with no page selected) Open in This Tab.

Problem:

  • When I drop the card into a collection list, I can then, as expected, connect properties to CMS content (=title to $title, =description to $description, and =link to the $collection item link.

  • Clicking on this button should open the myportfolio.webflow.io/portfolio/uniquename BUT when I preview the unpublished page in webflow designer, clicking on the button opens webflow.io/portfolio/uniquename in a new browser tab with 404 not found.

  • when I preview the published page in my browser, clicking on the button opens myportfolio.webflow.io/portfolio/uniquename and everything works as expected.

Expected Behaviour:

  • There should be no difference in behaviour between previewing unpublished content in designer and published content in the browser.

For privacy reasons, I cannot share my portfolio as it’s password protected and contains sensitive client information.

In situations like this, you’d want to share your readonly project link. In the case of sensitive data, build a new project that demonstrates the problem you’re trying to solve, or clone your project and replace the sensitive data.

However, despite all the ambiguity around the = and $ notation :wink: I think I understand what your problem is.

The Webflow designer is great at design, but it is not great at mimicking live-site navigation. Even in preview mode there are failure points. Overall, yeah, I’d prefer it was closer to the behavior of the live site, but I also understand the issues around this;

  • Doing things like opening an external link in the same tab can’t work, because you’d unload the designer.
  • Some links execute javascript. Javascript can’t execute in the designer.
  • Any navigation which is to a URL, even a relative path, would have to be decoded to determine which page should actually be switched to.

All the same, would be nice if the designer could at least recognize known on-site links to static pages, and take you there. If Webflow at some point adds the ability to link to CMS pages directly from Link elements, it would be equally great to be able to click those in preview mode, and switch to the correct Collection item page.

It’s had these limitations in the 5+ years I’ve been using Webflow, I don’t think they’ll suddenly repair them anytime soon- but you can check the Webflow Wishlist and upvote or add items like this.

Meanwhile, your best workflow is to simply design your navigation, publish to your webflow.io staging, and then test your nav there.