Nesting a CMS Collection Page inside a Modal or a Tray with a dynamic URL

Hey everyone,

I’m putting together a website with the idea that you can access a CMS Collection Item Page from a Modal or Tray that can (in theory) be viewed from anywhere.

In my example below, it shows an Architectural website that displays projects on the home page. If you click on the first Project card, then a Tray will appear from the right with all the Information for the project, that would have been entered in the CMS for that specific Item.

My main issues are the following:

  • Which is the optimal way to nest/embed the Collection Item?
  • How can I ensure the tray/modal has its own dynamic url?

Figma prototype that shows the interaction:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@Portfelio

This doesn’t seem to be an issue at all. You just have to build it.

When you’re building the modal or tray, you’ll add a collection list and choose the proper collection to call from.

You can add a collection list to anything you want. You just have to build it.

Thanks @Kevin_Mooney ! Makes sense, but how would I be able to make sure that the tray or modal has its own dynamic url? I would want the modal to be linkable, so that if a user wants to share that particular project, then he can just grab the url for it.

Felio, you probably want to think of these as two different views.

  1. One is your abbreviated modal view, which appears in your right side tray. This is invoked from any page, by clicking a project card.
  2. The other is a standard CMS item page, which represents your full project detail, and has a proper URL you can link to. This URL appears in your sitemap.xml as well, which improves SEO and Google recrawl speed,

You might be able to do a modal-only situation, but you’re talking about some fairly creative coding to solve your URL problem. I can’t see that being of value for you- particularly since you’re storing these in a CMS collection, you’ll have the collection pages anyway. Why not use them?

Hey @memetican thanks for your response.

This is the problem! I think having a modal/tray view can be a nice experience for the user, as you can view project details and then quickly exit the tray to go back to a page where all projects are available to explore, rather than have to go use the browser back button to a home or all projects page, or to be suggested another project by the project page “Related projects” section for example. It’s a pattern that is observed in many applications and websites, and I think could be viable in this scenario.

But of course this should never be to the detriment of SEO, hence why it should really be done by embedding a CMS item page. Perhaps an iframe could be used here?

Hi Felio- I was just pointing out that the URL problem isn’t a problem. It’s already solved by your regular collection pages.

For the pop-up, I thought @Kevin_Mooney was referring to the Webflow Lightbox however it does not appear to support anything but images yet. Most likely he’s referring to using a Collection List + Webflow Interactions to create your cards and to animate them in from the side of the page.

I don’t use Interactions much, but that would be pretty slick and give you that sliding tray ability you’re wanting. I’d start there.

Alternatively, you have jQuery options that are more modal / pop-up oriented. I’d just start googling. If the Interactions don’t work for you, these look interesting;

@memetican I think it would be a problem if I don’t want the urls to link to a collection item in a page state, but rather in a modal/tray state. Ideally I would be able to create and build the collection item pages from their template page, and have that embedded in a tray somehow.

Thanks for the links, I’ll check them out. But yes, it’s looking like Jquery is going to be the answer to this. Interestingly, this Youtuber looks like he kind of gets there with this interaction using a mixture of AJAX and Jquery welp

https://www.youtube.com/watch?v=fBU4mLX45HU

I think I understand what you’re envisioning, but honestly I would find that weird as a user. Let’s imagine I’m on your /about page, and I click a project card. If I decide to bookmark, or share the URL of your /about page, I wouldn’t expect to also be bookmarking the configuration of modals and side-trays that are currently showing.

It’s technically possible with some good scripting, and mucking around with your browser history to create your adaptive URLs- but that’s a lot of work and IMO it doesn’t make the user experience better. You might be better keeping it clean, and just add a [ Share ] button to your tray, so that if someone wants to share or bookmark the Project itself, they can do that independently of your About page.

But that’s a personal design choice, so go with what makes sense to you.

Your modal / tray design and content options are interesting too.

You have two overlay-design-approach options;

  1. Webflow interactions
  2. jQuery modal

And three content-sourcing options;

  1. Inline, from a Collection List
  2. Cloned from a source page, using jQuery
  3. IFRAME embed

I’ve ordered these in the order I’d personally prioritize them.

Interactions give you the most control over the slide-in effect, and are obviously the most designer-friendly. Most jQuery solutions I’ve seen are overlays, not slide-in trays, and they have limited styling. Most importantly, you cannot create them in the designer, you have to code them, and then publish to view and test them. It’s a painful dev/test cycle, at best.

For content sourcing, the Collection List approach could work great, and will give you tremendous designer support. Failing that, I’d use jQuery to extract the content I want from a “tray-card” hidden on my CMS collection page. If you’re comfortable doing some jQuery and understand the underlying HTML content, this should point you in the right direction.

I’d avoid IFRAMEs at all costs. You’ll struggle with browser inconsistencies, scrollbars, truncated content, and mobile responsiveness. Make them a last resort.

Also if you IFRAME, you’ll probably be forced to use your /projects/project-1 CMS collection page as the embedded source. The problem is, that would have to be a specialized layout- no navigation, tray content only. If someone clicks through from Google and lands on your Project page, they’ll get a tiny little card sized website with no navigation. They’ll likely assume it’s broken.

1 Like

I was curious what’s possible with Interactions and Collection Lists, and Webflow can do quite a bit. I’ve not done much styling, or added a slide-in effect, but I’m quite impressed.

I’ve mocked up 2 pop-up styles, based on @PixelGeek’s demo. No jQuery, no IFRAMES, and your Collection page will work unhindered as your full-project details page.

https://preview.webflow.com/preview/tray-demo?utm_medium=preview_link&utm_source=designer&utm_content=tray-demo&preview=4f3c82cbd65dec53e1258f3f612e6976&workflow=preview

@memetican This is exactly what I was suggesting.

Thanks @memetican and @Kevin_Mooney

As far as the user experience side of things goes, the project tray wouldn’t ever be linked from an about page. It would be linked from a home page or a projects landing page, so the user would see the project in-context of other projects, always.

I knew I had seen this before in a website, and found the AREA17 website which pretty much does exactly this.

The interactions themselves aren’t an issue, and neither is the placement of a collection list within the modal or tray. I’m comfortable with all of that.

It’s making sure that the project tray is structurally valid and content-sourced for SEO that is the main issue. So with that, it looks like it will have to be cloned, as you suggest, using Jquery and possibly Ajax. I have very little experience in either, but I suppose one has to start somewhere.

TRAY DESIGN & SEO

In my tray solution above, the interactions + collection list approach keeps the content in-line, so it will get picked up for SEO purposes. You design that content any way you like, to maximize readability and SEO for your content. An IFRAME approach would likely not pick up that content at all, and a jQuery approach would only pick it up on engines that can execute it and parse DOM results.

The questions “how do I embed and overlay content from a CMS collection on my page” is solved in my demo above.

URL LINKS

Ok, I see the effect you’re trying to mimic. It’s an illusion. The URL does not link to and recreate the popup.

Click on a project, and you’ll see the preview slide out, and the URL change. Now click refresh so that URL itself loads. The project content is loaded, but not in a sidebar, it’s the only page content.

In webflow, you’d use my example above to create your slide out preview however you like. Then you’d add a piece of script to add the Collection Page’s URL for that project to browser history. The user would see it change, and if they bookmark it, or refresh it, they get your Project’s collection page.

1 Like

I see, yes you’re correct. The project page itself loads without the context of the background and without it being in a tray. This isn’t exactly what I had in mind, but it makes sense, seeing as the project page itself will do the heavy lifting for SEO, rather than the tray version of it.

Do you know how I would go about creating a script like this? I’m assuming the stackoverflow thread you’ve linked above could be a good starting point?

That link was regarding jQuery and content-extraction. The Collection List approach does a much better job there IMO, and with no delay on the appearance of your pop-up content.

Regarding the URL change, I have a partial solution to that I was just playing with;

Here’s a Loom video to show you the functionality and how I implemented it;

2 Likes

Hey @memetican Mike, thanks for the video. That’s awesome, and will motive me to brush up my Jquery. I’m still in the design phase for the website but will come back to this in due course and post my solution. :raised_hands: