(2022) Webflow CMS Complex Filter Walkthrough - No-Code Attributes
HTML-код
- Опубликовано: 5 авг 2024
- In this video, we learn how to build a Complex Filter in Webflow. We'll go step-by-step & implement Attributes in your Webflow project. We'll use demo data, build the UI, implement Complex Filter the data. This demo site is for one of our enterprise clients at Finsweet.
TIMESTAMPS:
00:08 - Intro
00:44 - Live Example
09:13 - Use Form Elements
10:22 - Add Form Elements to the page
13:59 - Connect Checkbox
18:01 - Add Search option
22:08 - Enable multiple items search
23:47 - Search for all CMS fields option
25:17 - Add Filter-by Checkbox
28:42 - Add Filter-by Radio buttons
35:07 - Add Filter-by Dropdown
39:16 - Multiple Filtering
40:01 - Add Reset All option
42:22 - Add category-specific Reset button
45:55 - Add Active Tags feature
52:38 - Add the category to the Active Tags
54:36 - Remove Flashing from the content
55:48 - Add Attributes to the correct elements
58:15 - Add items count
01:00:56 - Using CMS Load to break the 100 items limit
01:04:00 - Important requirements for applying CMS Load
01:04:57 - Add Pagination Option to the Collection List
01:11:48 - Advanced Pagination Features
01:12:20 - Create page button template
01:16:20 - Customize the number of page buttons to show
01:22:26 - Summary
01:23:34 - Thank You
ATTRIBUTES: Add advanced features to your Webflow project without code. Attributes is the new way to implement @Finsweet into your @Webflowproject.
See all videos from the playlist: • Attributes
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Attributes: finsweet.com/attributes
Live Example - CMS Filter: cms-filter-example.webflow.io/
Get help with implementation: attributes@finsweet.com
Subscribe to Finsweet: ruclips.net/user/Finsweet?su...
-----------------------------------------------
// ABOUT US
We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!
🙌 Join our community - finsweet.com/fin-pro
🛍 Shop our merch store - finsweet.com/merch
💪 Superpowers for your Webflow website - finsweet.com/attributes
🧰 Your toolkit for Webflow - finsweet.com/extension
-----------------------------------------------
// SOCIAL
Facebook: / thatsfinsweet
Twitter: / thatsfinsweet
Instagram: / thatsfinsweet
Dribbble: dribbble.com/thatsfinsweet
Behance: www.behance.net/thatsfinsweet/
Webflow: webflow.com/team/Finsweet/
-----------------------------------------------
// TAGS
#webflow #attributes #filter
-----------------------------------------------
Thanks for your support! 🤟
Even in 2024, this is the best webflow tutorial I have watched, thanks Joe & Finsweet!
I consider this an official Webflow release, that’s how good it is. I can’t thank you all enough!
It does provide huge benefit to Webflow users, but definitely not an Official Webflow release.
WOW! I am feeling so incredibly accomplished! Thank you for this fantastic video and moving at the speed you did!
Thank you for this in depth tutorial and explanation! Super grateful for the Finsweet team for making this so fineasy.
Wow! Thank you so much for this video and all the effort you guys put in to help the Webflow community. :)
Used the filter all over my website and it works so good and is so easy to use!! Thank you!
F'in amazing!! Thanks so much for putting this together! The pacing on the video is perfect - feels patient and encouraging. Really will add loads of value to my project and looking forward to learning more about the Attributes ecosystem!
Thank you so much for your effort on putting this out. Great resources and training!
I cannot even express how grateful I'm to the Finsweet team for all these amazing functionalities. I could have never achieved what I did without the high quality tools and content that you guys provide. Thank you so much guys.
Amazing tool and top-notch walkthrough! Thank you.
Find myself returning to this great walkthrough again and again for different projects. So much value here. Thanks!
It's not outdated? My worry is that tech moves fast and this may not be relevant or proper to use anymore.
How cool is that!! Gonna apply this for the first time on my project tomorrow.
I am now officially a Attributes maxi - thank you for the great breakdown!
Diligent. Patient. Inspirational. Invaluable. You’re all that and more Joe + Finsweet.
wow.. this is the best filter solution I've seen, for the Webflow!
I've been at it with the mighty and powerful Webflow since 2018 and this is the most powerful thing I've learned. Cheers, Finsweet!
Raw and unfiltered content! Thank you so much for letting me decide for myself how much detail I do or do not want to sit through!!! I didn't scrub through a single second, and I hope you make all your walkthroughs like this one!
Thank you Timothy. 🙏🏼
Very very important video on complex filtering in webflow.! Thanks very much @finsweet ! Much appreciated. Cant thank enough haha !!!
Thanks for all the help in getting us past these roadblocks.
Great video, very clearly explained. Love it 🔥🔥🔥
Joe you are a legend! I will share my projects with you too and give you credit. 🤩
Amazing tools, so easy to use, brilliant. Can't wait to try this. Thank you so much! 🙏
Let us know what you build with it
I am trying all these.. absolute lifesavers
Only just had time to watch this tutorial from scratch. Awesome as always. And the accents for NJ and NY didn't go unnoticed 😂.
you have no idea how much you helped me! thanks alot! keep up yr good work :)
Absolutely game changer! Thanks for providing these tools!
You are most welcome. Thanks for hanging on the stream with us!
I'm gonna play with this! Damn, it opens up so many possibilities! Mad lad
This is just the beginning. Let us know if you get any ideas. Finsweet.com/vote
THIS. IS. GOLD.
This is soooo valuable! Thanks a lot for this
This is just brilliant. This will save us so much time...and money!
Thank you, Finsweet team!!!
Glad you like it. Let us know what you would like to see us build next.
Wow! Thanks for showing the whole steps like adding a new search element to the existing page was so helpful to see. Also the clonable helps answer other questions of how all this should be structured within the form block.
You guys are the best!! Amazing job here. I've just got a combo: the power of Attributes and a cms framework for a project which deadline is in January and that I've not started... yet. Now I know.
Thanks again @Finsweet.
Awesome Albert! This is great to hear. Thank you for the great comment.
This is GOLD, well done thanks Guys!
😎🚀
That's so amazing!! Thank you so much for everything you guys are doing!
Thank you! We appreciate the support
Just amazing! You saved me, guys!
This is just brilliant. This will save us so much time...and money!
Thank you, Finsweet team!!😍😍😍😍😍
🙌🏽- Happy to give back to the community
Life saver.. God bless you guys!!
You saved me!!! I love FinSweet!
Wonderful tutorial !
This is awesome!
Crazy good! Thank you
I just love you guys. The cms-filter is such a joy to use - and it just works. Could you guys please take over webflow? I cannot imagine what your team would be able to build with the resources of webflow. Or even better - you could lunch your own web-builder-cms alternative? Heck I'd switch to a finsweet CMS-Web builder with no questions asked.
This was amazing!!
Thank you! Love this. BTW: Awesome intro music!
Glad you like it. thank you.
I was struggling with filtering not working with pagination. So Glad I watched this.
What's mindboggling is how this is not baked into webflow.
Thank you kind man) you are the best in these spaces))))
"Come on Designer!" Joe really gets frustrated when things don't work as they should. Joe really gets frustrated when things don't work as they should. It must be because of that focus that Joe puts in that Finnsweet has such incredible products! Don't stop! This is amazing!
this blows CMS library filter and pagination out of the water!!! amazing guys, thanks for all the hard work! im sure you know its greatly appreciated!
Thank you for the support Derek
Thank you Derek! Really appreciate this!
Awaiting the clonable implatiently however absolute stellar job at creating something that was missing, surely the webflow team is extatic too. You've truely found your niche, going to kill it moving forward no doubt. WIll be hopefully implementing the attributes ones I get the grasp in multiple projects. F'in Sweet.
Is this the cloneable you are looking for? webflow.com/website/CMS-Filter-Example-by-Attributes
Great! Thank you!
This is great, just great
lifesaver! thank you
Just perfect!
Amazing!! Thank you so much!! 🤩🤩
You are most welcome
absolute legend!
OMG I LOVE YOU!!!
It's quite amazing ! Thank you so much to offer us a such tutorial
Thank you
great video
thank you
AMAZINGGGGGGGGGGGGG 🔥🔥🔥
Gold!
Hi guys, it's amazing how powerful and easy to implement your solutions are!! 🔥We already work with a number of them on our projects, thank you so much! There's just one thing we didn't achieve yet: search by date range. I understand that 3 attributes need to be set on each filter-fields and collection-fields relating to the "from" and "to" dates: field identifier, filter type and range, right? However, we didn't succeed yet! Is there any specific tutorial on this topic? 🙏
You guys really are changing the economic game for a lot of people...love this no-code ecosystem
although it is powered by the code itself
Thank you Miqdam!!! Really appreciate that
Awesome stuff! Can you please go over how to highlight text when searched?
Killer!!!
Love the content and how RAW they're delivered, but I do have ONE REQUEST. Can y'all add CHAPTERS to your videos so we can navigate to the content that's important to us? Y'all cover a lot in this video WHICH I LOVE, but I'm specifically looking for the CMS Load discussion and how to implement with CMS Filter.
*BTW* - I just built a website that I never thought I'd be able to by using Attributes. Super easy to learn and implement!! THANK YOU!!!
Love it! Thank you very much. Is there still a Slack page to get support or where's the best place to get some help? I have the problem, that Interaction do not work on items that appear with the load more component.
Thank you guys! Did part 2 ever come out? I struggled to find it, so I assume not? Any release date in the works?
amazeballs
amazing tutorial it helped me so much thank you !!
question: is it possible to apply filters on the navbar? can you filter using the navbar?
This is an amazing addon to Webflow!!! Thank you so much for this integration and great tutorial. I applied everything seamlessly to a Recipe Blog website. The only thing is that my client is getting submission data from this form. I've already applied the 'fs-formsubmit-disable=true' to the 'Form' element but it didn't change anything. Has anyone run into this issue?
Legend
It's a great tool and I found it very useful :)
I only encountered one problem and would appreciate your help @Finsweet. If I filter using the radio buttons, after selecting one of them, using the search field is problematic. The same in the other direction. If I use the search field then I cannot filter by radio buttons.
Great
Thank you for this. I would like to add the following: use radio for single reference and the checkbox for multiple. It took me almost a hour and a few tears to figure that out 🤣because if you mixed this up it just won’t work
I created a couple of filters on different projects and it works just great! I was just wondering if there is an option to show results only if all filters are selected. I work on a project where we want users to first choose all filters and then we display only one result that matches what they selected. Thnaks!
Hey this is really helpful video! Wondering is it possible to have a checkbox in dropdown?
Really nice tools guys! Fantastic work! One thing I can't seem to find an explaining for in this video or in the documentation is having multiple category item to select like you show in your documentation. In your documentation you show it is possible to select different categories like "Park", "Paid tour" etc, but you have seem to forget to show how to implement it? Or am I completely missing something obvious? xD
Amazing video. Used this to build out a browse experience on my site. Any tips on how to make a collection list + filters on mobile? This doesn't scale well on smaller screens. Thinking to nest the filters UI list within a sidebar but can't figure out how to do that if you have any tips!
Hi, this is very very helpful, thank you. Is there a way I can make the search run only is you "hit enter"? Or maybe to add a little load time?
Awesome Library! Huge fan. Is there way to choose multi-reference field using select options?
Amazing, been waiting for this from you guys. Super excited to try it out! Does this work with eCommerce CMS?
Hey Vincent! Yes, it does! Let us know what you think
Love the simplicity ❤ However I can't get highlighting a searched term to work. Searching works and I've applied the [...highlight="true"] to the search field attributes. I looked at the cloneable and it looks the same. Anyone got any suggestions?
Hi! This is SUCH a great option for complex filtering - THANK YOU! I wanted to quickly ask: It seems I can't add more than 1 filtered list on the same page... is that correct? I would have multiple lists that would need to be able to be filtered on the same page.
Absolutely amazing... thank you so much for this!
@finsweet Do you think it is possible to make the selector options be completed automatically depending on the cards that you have, and not completing them one by one manually? For example: if there is no car from the year 2021, it does not appear and then when theres is a new car from 2021, you automatically have this new option ? Thank you very much !!
This has been really helpful! Does this also work with Weglot or the new Webflow Lokalization? If anyone has tested it
This is amazing! Just what I need. I got stuck in one of the filtering and would like to chat. Which method is best to contact and share?
Amazing!! Does it work with once I export it to Shopify through Udesly Adapter? I’m trying to setup a simple Product filter system with a custom theme! Thanks a lot!
Thanks so much for making this! It works great except for one issue… I cannot get the animation to ease. No matter what I do, the animation remains linear… do you know how to fix this?
Hey, amazing content! Does it work inside a nav menu on mobile?
This looks great! 1 question: If I use the "*" to set up a search field, will it search ALL the fields in the CMS, or only what is displayed in the relevant list? E.G. setting up filters for a blog page. The blog homepage (where the filters are) has blog cards with title, summary, etc. The full text of the blog article is in the blog post page. If I use the "*" will it search the full text of the article, or only what is in the card?
This is amazing! Thank you so much! Question on using the load more feature: I have an accordion on my CMS content. For content that displays on page load, the accordion effect works perfectly, however, the content that loads after clicking "load more" does not. When I click the trigger nothing happens. Does the load more feature affect the initial state?
Did you ever find a solution to this?
this is amazing!!!!! Thank you so much!!! I may have missed it in the video but is there a way to show something if no results?
All sorted :)
This is awesome, Joe. New subscriber here!! Is it possible to filter if the items for the same collection are set up in different grids? Since they're all from the same collection, would the filter read each collection individually to find the right tags/labels and only show those on the screen, no matter what collection grid they're in? Or do all of the items need to be in the same collection grid in order for the filter to work? I hope I'm making sense...
This is pretty cool! Is it possible to do combine two 2 CMS collections into a complex CMS filter?
This is awsome. But for some reason my next and previous buttons stopped working when i added page buttons and dots
Hi, great video! Question, my "no results" or error message isn't generating anything when there isn't any search results. Any tips on how to generate this?
This is one beautiful, functional work of art! I can't quite figure out the multiple instances (i.e. having multiple filter controllers on one page... "filters-2", "filters-3"). Though it says this works on the main page, I can't seem to get it to work, and I don't think you covered it in this video. Any resources to help me get that working?
Thank you so much for your Webflow contributions. Finsweet makes Webflow F'n SWEET!!
Maybe I misinterpreted. *IS* is possible to control one list with two controlling filters? I was able to add a filter (down the side column) and filter-2 (across the top of the page) to a single collection list, but maybe I can't control one list with two filter forms. Any help or advice is appreciated.
Either way... kick ass suite (sweet) of tools.
EDIT... I came to find out later. No it is not.
Great set of tools! Implementing them is so easy. There's just one glitch that I'm facing with this: On Safari and Firefox, the filters work on first load, but if you refresh the page then they don't. Works well on Chrome though.
Following this to see finsweet's reply
@@andreaso.1549 Got the fix for this. Remove any other forms from the page and this will work. Your page should have only one form block for the filters.