Referencing CMS Collections (as Pages or Links) to Collections


#1

Hi,

I’m trying to create a resource site for our sales agents and figured the best way would be to use Webflow’s CMS Collections. In generalized terms, I need my links on the left (of my preview) to go to a page that will display the boxes that correspond to the link a user clicked. Those links will serve as the categories. Each box is a resource, such as a flyer, link, or image.

I have the Categories Template set up, and from the top dropdown I can select the different items (Point of Sale, Saltsha Prime, and Resources) but all of the boxes are displayed rather than JUST Point of Sale if I were to click on that link.

In other words, if this was a blog I’d want my blog categories on the left and when I click on a category it would display each blog post connected to that category. I hope this explanation is a little simpler.

I’ve watched the Webflow U videos and checked out a few topic discussions in the forum, but nothing I could find truly answer my specific issue.


Here is my public share link: LINK
(how to access public share link)


#2

Okay there’s a number of ways to accomplish this:

  1. Tabs: Each tab menu button would correspond to a tab pane, which would change and populate. This is actually the easiest and most common functionality. It’s super easy to implement and everything is already connected. You can style each button and Div in the pane individually. Use unique or the same classes.

  2. Sidebar Menu w/Individual Pages: Adding buttons or Link Blocks on in a sidebar. Each link would show that corresponding content in an inner page, similiar to an iframe. Links and frames would not be connected directly, but your link would show content on a separate page that shows when clicked. The sidebar menus would be fixed to left and could be a symbol added to each page. Typically, this would be setup as a Master Page with the sidebar menu, and each sub-page would link to it. (The master page contains sidebar, header, footer like a template) But Webflow doesn’t use master pages, therefore a repeating symbol would be used.

  3. Single Sub-Menus w/Layered Divs: Same as above. However everything is on the same page insided it’s own div. These divs would stack on top of each other, layered 1, 2, 3, and so. A menu clicked would bring that corresponding content div to the front. Each menu would only need the 1st click set as an interaction.

These are just 3 ideas to contribute. Hope that offers some viable options for you.


#3

I’ll look more into these ideas. Thanks, garymichael1313!


#4

I understand what you’re saying, but what my real issue here is the referencing of collections. At least I think so.

I just can’t figure out why “Point of Sale” doesn’t display the collection bound to “Point of Sale.” Same for Saltsha Prime and Resources. I have a collection for the boxes and that works fine as far as I can tell. I have the Category Collection and then the File Databases Collection with each collection item referencing Point of Sale, Saltsha Prime, and Resources. But when I add the Categories Collection list to the sidebar, they don’t display. All of them display rather than those tied to the specific Category Collection item.

I really hope I’m making sense. haha


#5

If I’m getting this correctly you want to filter the blog posts that are shown depending on the category that is clicked correct?

When you create a collection list you can filter out what is shown. So what you need to do is on the Category template page click on the collection list element.

Once you click on the collection list go to it’s settings by clicking the gear icon on the top right.
Sorting 1

After that scroll down till you find “Filter”
Filter 2

Add a new filter. The one that you are looking to make is “Category equals current category”. This will filter out all the blog posts that don’t below in the current category.
filter 3

Anywho I hope this helps :smiley:


#6

Sure no problem. But I think you may be speaking in 2 terms. As @Modii put it, you can filter what displays. However, I don’t consider that your issue. The issue to me is “Div Display Structure”. Showing the content is the easy part. You can delete a collection list, which is really a set of divs that auto-populate, and start over to show your content right.

But it seems to me, you’re wavering on ‘how to show content structurally’. I may be mistaken, yet your menus are saying otherwise :face_with_raised_eyebrow:

If menus have issue showing content, then the div structure and layering may need attention. Focus on your nested div components, and try to visualize how they will stack. You’re making sense, don’t get me wrong. I just think the page layer foundation may need to be inspected a little further.


#7

Perfect! Exactly what I needed.

Would you believe that I just didn’t scroll down in the Filter box to see the rest of the options? Sheesh.

Thank you so much!