Custom Dynamic Filter in Webflow

On what page is the filter set up? Cant find it

CINEMATOGRAPHY PAGE! sorry for that!!! appreciate your help @krubens!

You should watch the video again :slight_smile: Because you have mixed the category/filter collection and the content collection. I have made a video HERE correcting it. but I cant test it. Hopefully its correct. Its a bit back and forth, because I had to understand what you didā€¦

1 Like

@krubens I GOT IT TO WORK!!! your second vid was so helpful! i literally followed you move by move!!! awesome!! this community rocks!

1 Like

Hello @krubens,

Thanks for the great video and explanation on how to create this fab filter! I have couple of questions or requests if possible.

  1. I was wondering if there was any way to add a ā€˜load moreā€™ function so it loads perhaps 6 to begin with then the user has a load more option. Looking to limit the initial page load time.

  2. I was also wondering if it was possible to have multiple filters on the same page? I am currently working on a golf package page so my initial version allows the user to filter by location. I would like to give them the option to filter by number of nights or even price high to low. Would this be possible?

Here is published link to what I have achieved so far: Click here

I wonā€™t bother with my read only link as this is not really a help request, just a wishlist or sorts!

Thanks again for sharing this!

Cheers
Kevin

hey @kevin.fogarty.

  1. this is definitely not possible because the way this filter works is by loading every item in the collection and then show/hide according to the set active filter. also i donā€™t think webflows prerendering (published site is not connected to any database) allows that.

  2. that is definitely possible. but this method would not allow multi-selects and i guess thatā€™s what you are trying to achieve, right? so you could set both the location and the number of nights filter active at the same timeā€¦ i have already written another solution for a multi-select filter but i guess its hard to understand and use without any explanation. maybe iā€™ll find the time to post it.

also please be aware that sorting by price (high to low) is actually not a filter function but sorting only. thatā€™s pretty easy to accomplish also working with the filter at the same time. would you also need some custom code for that?

1 Like

Hey @buntestrahlen,

Thanks for the reply!

Regarding my first question: Would it be possible to have one of the filters named (as an example) ā€˜Featuredā€™, then make that the default for when the page loads. Maybe I could make the text of that one white so the user canā€™t actually see it. Maybe just clutching at straws! :blush:

Regarding my second question: Yes I guess I would like the option to have a multi-select, but itā€™s not a game changer, Iā€™d be willing wait until you find the time to show us the multi-select filter. :+1:

How would I set both the location and the number of nights filter active at the same time?

It would be great if you could show me how to sort price high - low as well if you would be so kind.

Cheers
Kevin

Hi All,

So Iā€™ve added the filter to my collection list which works great. However, I want to add a number for each collection item (number of packages) that I manually enter into the backend when creating the destination.

Here is my public share link

Here is the live link to the page in question, which is the ā€˜Scotland Golf Packagesā€™ static page.

As you can see from my link, the numbers show below each collection item which is what I want. However the filter has stopped working now. Could someone take a look and see why.

The filter works perfectly fine until I add an additional item to the list.

Not sure if you can preview changes made in public share link as I think the filter only works on published. If not let me know and I can change it back so the filter works then change back once someone has a look.

Just a heads up the site is only designed for desktop so far! Might look terrible on any other device :grinning:

Thanks,
Kevin

Does anyone have an explanation or video showing how to accomplish the multi-select filter for custom dynamic filters with the code and all? @buntestrahlen perhaps?

@Tony_Jones maybe you want to check out Sort and Filter content
on Webflow with MixitUp3
by @sabanna

3 Likes

Thank you for sharing, @matthewpmunger. Iā€™ll check it out and see if it helps

@ krubens

This is amazing! Thank you so much.

Is there any way to adjust it slightly so that filter buttons remained press, rather than switching off when you select a new button.

This way, you could select more than one button at one time?

@krubens
So i made this work here http://vefverslunsimans.webflow.io/simi/2fyrir1 but it seems to have stopped working all of a suddenā€¦ not sure why? Any ideas?

working here! would you please describe your problem in more detail?

I am also interested in this option @buntestrahlen

Here is my site:

https://nicholaspfosiphoto.webflow.io/archive

I am using your filter system to allow the user to sift through my archive (essentially a link bank) and feel as if it would be natural for the user to be able to apply multiple filtersā€¦ i.e. click ā€œfilmā€ then click ā€œphoto essayā€ and have all events which are tagged with ā€œfilmā€ and ā€œphoto essayā€ (both not either/or) be displayed.

Iā€™m also having some trouble customizing the ā€œfilter-activeā€ styling. I tried applying the styling to the empty filter-active class but it seems like something is overriding it? Only the 100% opacity styling is coming through (not the text weight styling, for example). Thinking this might have to do with the fact that the filter-text-block has subclasses which define its styles (based on css styling Iā€™ve used in other parts of my site). Do you think that would be possible? If so, I suppose a solution would be to do all the styling within thefilter-text-block class and not use any subclasses?

Hereā€™s my read-only link too: https://preview.webflow.com/preview/nicholaspfosiphoto?utm_source=nicholaspfosiphoto&preview=6532666811a6dde76efa787602d44637

Nick

also for what itā€™s worth @buntestrahlen ā€¦ I am also struggling to think of a way to dynamically display the years. You can see in my site what I meanā€¦ I want to break up what would otherwise be a list of links essentially by what year they were published in (they are already sorted by publish date newest to oldest). I have tried making ā€œemptyā€ year items in my collection but that runs into the problem of when I go to filter out anything, the years go with them, unless I give the ā€œyearsā€ each tag, but then because I am limited to 5 references per item, I have more tags than slots in the item to reference them! Any advice?

I recognize one solution would be to make a new collection list for each year, which is probably what I will try next, itā€™s just not IDEAL, although certainly seems like a plausible solution. Will update once I implement it. Giving it a go now.

UPDATE ON MY ATTEMPT: already hit a problem. I canā€™t seem to filter a collection list by year, only by ā€œposted with in x number of days from todayā€ which isnā€™t the most intuitive. . .

@buntestrahlen are you still available to help people troubleshoot this?

@buntestrahlen this is great solution but having just looked at your site now you seem to have updated the filtering system to a better solution. Is there a tutorial for this change, is it a modification of this original version? Would be interested to find out more about the new method.

hey @npfosi, i am sorry but i currently cant find the time to help you out. maybe @krubens is there for you.

and @andydlines, about the filter upgrade: yes, i did a modification of the original version allowing multi-selection. if you have some jquery knowledge, you can find my solution on the live website. but i am sorry to say i cannot provide a tutorial for this at this time. hopefully sometime in the future!

:relaxed:

Hey @buntestrahlen and @krubens !
Thank you for the post.

Do you know if this Dynamic filter coding would function with an Ecommerce site?

Or if anyone else reads this ā†’ any good tutorials? Looking to build a drop down list that allows the customer to View products by Brand, By Price, OR By Item Category. For example:

Thank you!