Native Webflow Filtering (No Code)
HTML-код
- Опубликовано: 4 авг 2024
- Join my Webflow Wizards Community
/ timothyricks
In this video, we'll cover how to build a real time, dynamic filtering option for user using dropdowns, collection lists, and collection pages. Add new filter categories from the CMS. Filters cannot be combined at the same time.
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096 
Хобби
DUDE! Literally, every time I'm stuck in Weblfow, somehow I end up finding the answer in your channel. I almost paid for a filtering add-on too.
Lifesaver! I was getting so confused by other coded options
God bless you for this tutorial, you realy helped me a lot. I am an intern at a Brazilian company, and we stuck on this cms form, today was my last day to find a soluction for this item, cause we need to show the project for our client tomorrow, so i prayed for some type of help to understand and find a way to solve this problem, and find the answer in a church project is realy a proof of a miracle provision.
Tim: You're a Genius. Been trying to do this for ages. :0)
This helped a lot! Thank you so much!!!
clutch lol. Thank you. Logic to do this is insane but it's clean and it works
Hi Timothy, when I'm trying to create a condition, I'm not being able to find the filter for the 'current category', could you think of the issues that could lead to this?
Thanks
Very good tutorial..
you're a legend
super awesome!
Thanks for your content this is great, it help me a lot ! Despite that, I'm still facing a problem and I can't find the solution (quite new on webflow). As I have many filter link to the same dropdown menu I try to find a way to have a scroll on my dropdown menu when it's open. I saw that, at the start of your video, you have a scroll enable on your filter. How do I make that happen ? Thanks in advance and keep up the good work, it is perfect ! 👏
Thanks a lot!
Mann! this is a life saver. I however have one small issue (or well crucial issue). when I'm on the collection page I cannot seem to select the option that filters the current page? Is there something I'm clicking wrong in the selector ? I'm trying to filter on the collection list which should be good right?
Thanks!!
Very cool
hey tim this is really super easy to work. Cant we avoid reloading?
Any idea how I can add the page section to the collection link? Otherwise I have to scroll anytime I choose an item from the dropdown. Looking forward to your answer …
What devilry is this! Only seen the title but curious!
Thank you so much. Do you know any way to do it without whole page reload?
Hey Tim, thanks for all your work not only on this tutorial but your entire channel. This is such a great filtering method, the only downside being that if there is any content above the collection list, you have to scroll down every time a new filter is selected. Is there a way to auto-scroll or load the page on a particle section using in page linking somehow? Thanks again
exactly my problem
That is really awesome! Is there a way to add the initial page as a link? So when users click on it they will get back to the initial state (without filtering)?
This is great thanks man. Have you got a tutorial on how you customise your drop down styles? I thought they natively take on the system styles?
Tom Piggott Thank you! I think you’re thinking of form drop downs. Webflow’s regular drop downs are easily styled. Feel free to check out my cloneable for this project to see how. webflow.com/website/Native-Webflow-Filtering-No-Code
Timothy Ricks I am thinking of form drop downs, but I actually didn’t realise there was a difference so thank you!
I was wondering is there a means to do this on one page using a tabs component setup as a dropdown? And man got thank you so much for ur channels content
Hi! I did everything correctly i believe, is there a way to go back to ALL TOPICS? I have access to both filtered results but haven't been able to see the full collection again.
This is awesome. I only need one dropdown filter and I'm amazed at how the fact that no one seems to have done this. Is there any way - with only one dropdown - of avoiding the page reload and having the filter apply directly on the page?
I'm curious about this too.
Question, does this have any extra merits than just hiding and showing different CMS collections with the applied filters on the same page?
random, but your keyboard sounds very nice
Thank you for this tutorial! However, my dropdown list dissapears behind my CMS collection. How do I have it appear over the top of my collection?
You could try setting your entire dropdown to a higher z-index than your collection list.
@@timothyricks oh ***facepalm*** had a 'derp' moment. My div was in the header section, not the section where the collection list is. Problem solved! :) Thanks!
This is great stuff and thank you for all your good videos.
BUT. How do you set an option to show ALL items ? I am struggling to find a solution. Since with your solution you have the filter applied to the template page and not to the original page, you are actually navigating to another page without the user realizing it, but in this way I lose the all items tab / content set up in the original page.
hope he'll answer this one, im struggling as well
You can add a option in your CMS collection that says 'All Items' or "All Topics', then when adding the multi reference items to each individual CMS page just make sure to select 'All Items' when attaching the other multi reference fields... If that makes sense, If you arrange it well you can have the option of 'All Topics' drop down at the top of the drop down list 😉
It is possible to perform 2 filtering toghether with this method? By the way, very good tutorial finally
It's not possible to perform 2 filters together with this method. If that's a requirement, I'd highly recommend the CMS Library by Fin Sweet. cmsdocs.webflow.io/filter
yea thats works but you creating alot of pages instead of using the same one and dynamically filtering cms items without reloading or redirecting
Please do a video of filtering with a slider content
👍⚡
does anybody know how to prevent the page refresh/ jumping to the top when selecting a filter from drop down menu???
Best thing i can think of is to link to the section rather than the page and have the link preload set to prerender