Streaming live at 10am (PST)

Help with a dynamic collection filter please


#1

Hi all, this is my first experience with webflow and I am lost on some things. I inherited this site project and am drowning! I have a collection page template that has two sections in it pulling from collection list and this template is used for 3 pages for different age groups,

and depending on the age group a different package is shown, I guess lol,

and the template page is like so,

They go to same collection but have some custom filter maybe? What is that lightning bolt?

The problem is that there are 3 pages and two age pages have just one section and one ( the 4-10 year old party ) has two sections, which I dont understand how when the template itself has two sections??

Also, main issue is that on the 4-10 page with two sections, both are pointing to the same package contents. I think it has to do with that lightning bolt filter but I cannot find what that is anywhere.

Any help would be greatly appreciated, thank you much.


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


#2

Hey @thatryan, welcome to Webflow and the forum!

The :zap:indicates that the filter is dynamic instead of static.

The reason that you’re seeing a different number of sections is that the 2nd EatSection has a conditionaly visibility set on it. You can see the colored icon which means that it is tied to dynamic data in some way.

So if the Name of the CMS item equals “Ages 4-10” then the section will become visible.

Not sure, but I think the cms collection inside the 2nd section should start at the 2nd item in the data set in order to show the other package and not repeat the 1st again.

Not sure if you’ve visited the Webflow University, but you’ll find some great material over there. Check it out, and I hope this helps.


#3

Thank you very much, the dynamic filter is what I thought may be an issue I was guessing, but where does that dynamic part get “set” from?

Odd thing is before the second section with the “epic” was on the top on this page…


#4

Hey @thatryan

The current cms item is the template page that you are currently on whether in the Designer (like screenshot below) or via the published url such as website.com/collection/item. It’s dynamic because it will pull information based on or related to that current cms item.

Not sure what happened but you can use the Sort Order to change that. Make sure to adjust it on both collection list though.

Hope that further helps.


#5

Thank you so much for your help!


#6

If I may bug you one more question :slight_smile:

Why does this tell me no fields? When the collection item has an image field in it… I am trying to make that bg image dynamic per package…


#7

Hey @thatryan

It’s no bother, ask as many questions as necessary.

The reason you can’t connect to an image field is two-fold.

  • The EatRight element is not inside the Birthday Packages collection list so it can’t get images from that list.
  • There are no image fields in the Age Groups template to choose from.

These two screenshots show that the bg-image is coming from a combo class and not from the cms.

Here you can see that their are no image fields in the main collection.

In the Navigator panel, we can see that the div containing the bg-image is outside of the collection list so therefore it can’t pull in an image from that list.

This can be solved by rearranging the elements so that everything within that section is contained inside the list. Like so:

This gives us the same design but with more control. Now looking at the EatRight element we can connect to the cms image field from the Birthday Packages.

Now you or the client can update the cms to change the images on the site without needing to do any design work.

Let me know if that doesn’t make sense. Remember to do the same thing for the second collection list to. This will make the template more dynamic and have a better structure.


#8

You are awesome thank you, but what am I not understanding here?

I moved the div into the collection item and it lets me connect, however, it moves the section to the left and nothing shows up…?


#9

@thatryan
If you take a closer look at the new structure, there are some more things to do.

  • Move the collection list out of EatMenu
  • Move EatMenu inside the collection list
  • Move all other elements inside the collection list directly into the EatMenu div
  • Move EatLeft inside the collection list
  • Again move EatMenu but this time inside of EatLeft
  • Remove the class EatSection from the section element
  • Add the class EatSection to the collection item element

Your structure should look like this.


#10

@matthewpmunger thank you so much for walking me through this. Crisis is solved! You have been instrumental and I greatly appreciate your time.


#11

@thatryan It’s my pleasure. Glad to help. :raised_hands: