I can't add a link to a collection list item!

Hi,

I’m trying to do something very basic but struggling and not sure whats going wrong.

I have a CMS collection list of videos, each styled in a card. When I click on the card I want it to take you to the video player page for that video.

Every time I try to add a link to a Div that houses the card, I get an error saying “Collection list wrapped cannot be placed in a link”. I would have thought this is basic functionality but maybe I’m missing something.

Here’s my read only link : Webflow - GRNDHOUSE

Thanks in advance!


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

Hi @Heoudy :wave: hard to say without the link that’s failing included in your project. Can you add it back in so I can see how you’re doing it?

I whipped up a quick demo of successfully using a link within a Collection List Element, maybe this will help?

Example site:

https://link-in-a-collection-list.webflow.io

Read only link:

https://preview.webflow.com/preview/link-in-a-collection-list?utm_medium=preview_link&utm_source=designer&utm_content=link-in-a-collection-list&preview=560fca7f0ee9d15762f0f61c05490e8d&mode=preview

Let me know…

1 Like

https://preview.webflow.com/preview/altinco?utm_medium=preview_link&utm_source=designer&utm_content=altinco&preview=8388ca069399ccfeebb84275a77e7f58&mode=preview

ha. i thought this was my question as it’s similar. I’m trying to make anchor links / links to another list item on the same page though. I can only link to other pages, like in your example. Any ideas?

Hi @ChrisDrit!

I’m not sure what you mean by adding in the failing Link back? The problem is the Webflow Editor won’t even let me add or convert one of my Div blocks into a Link because its inside a collection list so I can’t add the failing link back in.

Screenshot 2020-10-19 at 10.33.29

The problem is that I can’t convert the Div “Video Item” (as seen in the screenshot) into a Link as to make the whole card clickable.

Any ideas how I can make the whole card clickable?

Thanks!

Without any custom code, you’ll need to use a Link Block element instead of the Div Block element. Checkout that read-only link I published, you can see that the link is really a Link Block element nested within the Collection Item.

Does that fix the problem?

It would be best to start a new thread with your question, but a quick answer is that you’ll need to use some Javascript for that.

@ChrisDrit Thanks Chris, although this doesn’t fix the problem.

I tried adding in a Link Block underneath the Collection List Item, and then dragging the Card (and all its Div’s/components) into the Link Block but I get the same error message saying “Collection List Wrapper cannot be placed within a Link”

Surely this is simple functionality? To be able to click anywhere on the Card and it takes you to that specific CMS page. Am I missing something here?

Hmmm… frustrating :rage:

Nothing huge stands out when I compare my version against yours. That said here are a couple of thoughts…

Screen Shot 2020-10-19 at 10.13.02 AM

I don’t have this :point_up_2: listed on my version. That stands out as something to review at the very least.

Also, you have some Javascript + CSS listed within the Home page settings, could this be causing anything?

My suggestion…

…create new, blank “test” page and recreate a very, very basic Collection List structure without everything else (e.g. JS, CSS, etc…) and see if you can get a Link Block element nested within the Collection List element as I have on my read-only link (e.g. mimic the uber basic approach I’ve taken in my read-only link, on your site).

Reply with the results of taking that approach.

I tried a thread with no joy, but I’m such a newbie at WF I’m probably going about it the wrong way. I was worried it would need javascript as I’m not a coder - and especially if it means the CMS isn’t straight forward for the client. It might mean just not having links - I don’t understand why those particular types of links aren’t easy!?

@ChrisDrit Thanks for your help Chris!

I resolved it now.

It turns out the issue was because I was using a nested collection list, so I couldn’t convert the outer wrapper div block into a link because of that. I assume the reason for this is that the link wouldn’t know which collection list to go to since there is nesting going on and two CMS items to choose from.

I changed the “trainer” field to a reference instead of multi-reference and this meant I didn’t need to use a nested collection list. After that I was about to convert the outer div wrapper into a link block.

Thanks again Chris!

1 Like

Interesting! Glad you got it figured out. Thanks for following up and letting me know what the issue was :slightly_smiling_face: