(2022) Webflow CMS Complex Filter Walkthrough - No-Code Attributes

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 309

  • @rorym8543
    @rorym8543 8 месяцев назад +16

    Even in 2024, this is the best webflow tutorial I have watched, thanks Joe & Finsweet!

  • @conafam
    @conafam 3 года назад +60

    I consider this an official Webflow release, that’s how good it is. I can’t thank you all enough!

    • @Finsweet
      @Finsweet  3 года назад +9

      It does provide huge benefit to Webflow users, but definitely not an Official Webflow release.

  • @darshanvyas2535
    @darshanvyas2535 11 месяцев назад +2

    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.

  • @miqdamsajid875
    @miqdamsajid875 3 года назад +3

    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

    • @joekrug8980
      @joekrug8980 3 года назад +1

      Thank you Miqdam!!! Really appreciate that

  • @MarkFaamaoni
    @MarkFaamaoni 3 года назад +3

    This is just brilliant. This will save us so much time...and money!
    Thank you, Finsweet team!!!

    • @Finsweet
      @Finsweet  3 года назад +1

      Glad you like it. Let us know what you would like to see us build next.

  • @timothysolly4689
    @timothysolly4689 2 года назад +12

    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!

    • @Finsweet
      @Finsweet  2 года назад +2

      Thank you Timothy. 🙏🏼

  • @derekrungsea4051
    @derekrungsea4051 3 года назад +3

    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!

    • @Finsweet
      @Finsweet  3 года назад

      Thank you for the support Derek

    • @joekrug8980
      @joekrug8980 3 года назад +1

      Thank you Derek! Really appreciate this!

  • @RocknRollCEO
    @RocknRollCEO 2 года назад

    Only just had time to watch this tutorial from scratch. Awesome as always. And the accents for NJ and NY didn't go unnoticed 😂.

  • @thekyser
    @thekyser Год назад

    "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!

  • @squidux
    @squidux 4 месяца назад

    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.

  • @manni-io8625
    @manni-io8625 Год назад

    I am now officially a Attributes maxi - thank you for the great breakdown!

  • @josephgraham6098
    @josephgraham6098 Год назад

    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!

  • @shaimoomnewaz1
    @shaimoomnewaz1 2 года назад

    Diligent. Patient. Inspirational. Invaluable. You’re all that and more Joe + Finsweet.

  • @nirubansatchithanandakumar3266

    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.

  • @evgheniliuft
    @evgheniliuft Год назад

    wow.. this is the best filter solution I've seen, for the Webflow!

  • @MM-bi9nj
    @MM-bi9nj 3 года назад +1

    This is just brilliant. This will save us so much time...and money!
    Thank you, Finsweet team!!😍😍😍😍😍

    • @Finsweet
      @Finsweet  3 года назад

      🙌🏽- Happy to give back to the community

  • @virathedon
    @virathedon 2 года назад +1

    THIS. IS. GOLD.

  • @salzundlicht513
    @salzundlicht513 9 месяцев назад

    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.

  • @lennyhe2762
    @lennyhe2762 2 месяца назад

    It helps me a lot! Thank you Team for this amazing work!

  • @SuperStevestan
    @SuperStevestan Год назад

    Thanks for all the help in getting us past these roadblocks.

  • @Gustavoandrighetto
    @Gustavoandrighetto Год назад +1

    Thank you so much for your effort on putting this out. Great resources and training!

  • @ZWlify
    @ZWlify 3 года назад +2

    Absolutely game changer! Thanks for providing these tools!

    • @Finsweet
      @Finsweet  3 года назад

      You are most welcome. Thanks for hanging on the stream with us!

  • @albertfranklin2317
    @albertfranklin2317 3 года назад +2

    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.

    • @joekrug8980
      @joekrug8980 3 года назад +1

      Awesome Albert! This is great to hear. Thank you for the great comment.

  • @jacobajay7804
    @jacobajay7804 2 года назад +1

    Very very important video on complex filtering in webflow.! Thanks very much @finsweet ! Much appreciated. Cant thank enough haha !!!

  • @jkuehn2001
    @jkuehn2001 Год назад

    Find myself returning to this great walkthrough again and again for different projects. So much value here. Thanks!

    • @denniszenanywhere
      @denniszenanywhere Год назад

      It's not outdated? My worry is that tech moves fast and this may not be relevant or proper to use anymore.

  • @lukawalli
    @lukawalli 3 года назад +2

    Amazing tools, so easy to use, brilliant. Can't wait to try this. Thank you so much! 🙏

    • @Finsweet
      @Finsweet  3 года назад

      Let us know what you build with it

  • @kdcan724cnls4
    @kdcan724cnls4 3 года назад +2

    This is GOLD, well done thanks Guys!

  • @johnlilly1053
    @johnlilly1053 2 года назад +1

    Thank you for this in depth tutorial and explanation! Super grateful for the Finsweet team for making this so fineasy.

  • @charles6685
    @charles6685 3 года назад +2

    I'm gonna play with this! Damn, it opens up so many possibilities! Mad lad

    • @Finsweet
      @Finsweet  3 года назад +1

      This is just the beginning. Let us know if you get any ideas. Finsweet.com/vote

  • @realguitarshredder
    @realguitarshredder 2 года назад

    I am trying all these.. absolute lifesavers

  • @johnkrueger6622
    @johnkrueger6622 2 года назад

    Used the filter all over my website and it works so good and is so easy to use!! Thank you!

  • @RonWebDev0188
    @RonWebDev0188 9 месяцев назад

    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?

  • @thewebart
    @thewebart 3 года назад +2

    Thank you! Love this. BTW: Awesome intro music!

    • @Finsweet
      @Finsweet  3 года назад

      Glad you like it. thank you.

  • @exploresque95
    @exploresque95 2 года назад

    How cool is that!! Gonna apply this for the first time on my project tomorrow.

  • @EliSoprano
    @EliSoprano 2 года назад

    WOW! I am feeling so incredibly accomplished! Thank you for this fantastic video and moving at the speed you did!

  • @roerover
    @roerover Год назад

    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!

  • @and2good2
    @and2good2 2 года назад +4

    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

  • @cristina.aytecdigital
    @cristina.aytecdigital 9 месяцев назад +3

    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? 🙏

    • @pheal
      @pheal Месяц назад

      Yeah, but it ain't that great. Their CMS Load attribute prevents Google from indexing pages correctly. It's a known issue that I unfortunately discovered after some months of using it. The worst is I saw on their forums other people were complaining about it, but they decided to ignore instead of putting a warning on their site. Absolutely awful behavior.

  • @thegalhorowitz
    @thegalhorowitz 3 года назад

    Joe you are a legend! I will share my projects with you too and give you credit. 🤩

  • @mariamsmadness
    @mariamsmadness 8 месяцев назад

    Life saver.. God bless you guys!!

  • @juanroque6459
    @juanroque6459 11 месяцев назад

    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!!!

  • @michielwils8401
    @michielwils8401 5 месяцев назад

    You saved me!!! I love FinSweet!

  • @webbado
    @webbado 2 года назад +1

    Wow! Thank you so much for this video and all the effort you guys put in to help the Webflow community. :)

  • @DjSoulsaver
    @DjSoulsaver 3 года назад +2

    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.

    • @Finsweet
      @Finsweet  3 года назад

      Is this the cloneable you are looking for? webflow.com/website/CMS-Filter-Example-by-Attributes

  • @lg8159
    @lg8159 Год назад

    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

  • @alex-pattison
    @alex-pattison 2 года назад

    Amazing tool and top-notch walkthrough! Thank you.

  • @sabrenaarref9038
    @sabrenaarref9038 2 года назад

    you have no idea how much you helped me! thanks alot! keep up yr good work :)

  • @LiseKorsedahl
    @LiseKorsedahl 26 дней назад

    Awesome video!!!!!

  • @lpaveld
    @lpaveld 2 года назад

    Just amazing! You saved me, guys!

  • @ramon4695
    @ramon4695 3 года назад +1

    This is awesome!

  • @360Creators
    @360Creators 3 года назад +1

    Amazing!! Thank you so much!! 🤩🤩

    • @Finsweet
      @Finsweet  3 года назад

      You are most welcome

  • @vince10nats
    @vince10nats 3 года назад +1

    Amazing, been waiting for this from you guys. Super excited to try it out! Does this work with eCommerce CMS?

    • @joekrug8980
      @joekrug8980 3 года назад

      Hey Vincent! Yes, it does! Let us know what you think

  • @emmamccanntravel
    @emmamccanntravel Год назад

    Awesome stuff! Can you please go over how to highlight text when searched?

  • @c7407
    @c7407 3 года назад

    That's so amazing!! Thank you so much for everything you guys are doing!

    • @Finsweet
      @Finsweet  3 года назад

      Thank you! We appreciate the support

  • @sergeybogachuk7320
    @sergeybogachuk7320 2 года назад

    Thank you kind man) you are the best in these spaces))))

  • @bramdoe3303
    @bramdoe3303 2 года назад +3

    Can you please set up the chapters for this? Would make it much easier to navigate

  • @yo_skelly
    @yo_skelly Год назад

    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!

  • @theaicreatives
    @theaicreatives 9 месяцев назад

    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...

  • @AnjuliStudioJunk
    @AnjuliStudioJunk 5 месяцев назад

    This is pretty cool! Is it possible to do combine two 2 CMS collections into a complex CMS filter?

  • @GregDolan
    @GregDolan 2 года назад

    Great video, very clearly explained. Love it 🔥🔥🔥

  • @carlosgil697
    @carlosgil697 2 года назад

    This is soooo valuable! Thanks a lot for this

  • @ClairolZamSalazar
    @ClairolZamSalazar 8 месяцев назад

    Hey this is really helpful video! Wondering is it possible to have a checkbox in dropdown?

  • @skottmellins4584
    @skottmellins4584 2 года назад

    Wonderful tutorial !

  • @jaroslavdlask
    @jaroslavdlask 3 года назад +1

    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!

  • @VladCristeaYT
    @VladCristeaYT 10 месяцев назад

    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?

  • @ItsKwamzilla
    @ItsKwamzilla 2 года назад +1

    Does CMS Attributes have anything for working with Google Maps?
    e.g. Being able to search by Zip code and moving the map to show pins?

  • @OmerAviram
    @OmerAviram Год назад

    Hey, I implemented the "pagination" mode and it works very good!
    But - I have an elemnet trigger interactions on the CMS items which only displayed on the first group of the pagination... how can I resolve it?

  • @serhadiletir2403
    @serhadiletir2403 2 года назад

    Howard Schultz, the CEO of Starbucks, was working for Starbucks once upon a time at the marketing department. I guess it wasn't called starbucks back then. Then he was fired because his ideas sounded too wild. Schultz set up another coffee shop, got an investment, and later bought starbucks. And made it what it is today. I wouldn't be surprised if Joe does the same thing on webflow.

    • @Finsweet
      @Finsweet  2 года назад

      That is a bold prediction, not sure this is our goal here, but appreciate the sentiment.

  • @Nchitayat
    @Nchitayat 2 года назад +1

    Does this work if you have more than 100 items in your collection? I'm concerned that since it's filtering on the actual page and not the collection, it won't include the items that are on the second page of my collection.

  • @octacreative2763
    @octacreative2763 3 года назад +2

    Hey, can you do a tutorial on the range slider! Please!

    • @joekrug8980
      @joekrug8980 3 года назад

      Yes! Working on it. Go ahead and copy more examples from Finsweet Extension. Is there anything specific you would like covered?

  • @Василь-г3п
    @Василь-г3п Год назад

    Hello @Finsweet
    Is it possible to check the filter checkboxes if they have any value (without clicking on it) and to just disable them?
    I need this functionality to avoid 'No items found' message.
    Thanks!

  • @CH-yb2vi
    @CH-yb2vi Месяц назад

    How did you get 2 collection lists inside the vehicle cards without using Nest? i.e. how did you get "make" and "fuel type"? I keep getting an error.

  • @OmerAviram
    @OmerAviram Год назад

    Hey, is it possible to make a single radio button label to have multiple values to filter?
    E.G. - a radio button with a label "Shirts, Pants" -> apply filter for "Shirts" + "Pants" text on the cms item
    Thanks!

  • @albinvarghav7823
    @albinvarghav7823 2 года назад

    This was amazing!!

  • @merylbenitah9383
    @merylbenitah9383 2 года назад +1

    It's quite amazing ! Thank you so much to offer us a such tutorial

  • @JimibobThun
    @JimibobThun 3 года назад

    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.

  • @Morkvitalja
    @Morkvitalja 3 года назад +1

    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?

  • @turbolike7
    @turbolike7 3 года назад +2

    Does the fs-cmsfilter-field work for a multi-reference field? I can get it to work for a single but not multi.

    • @joekrug8980
      @joekrug8980 3 года назад

      Hi Kyle, yes this does work with multi-reference. What is not working about it? Is it a native Webflow nested collection?

  • @javierbarreda9357
    @javierbarreda9357 Год назад +1

    Amazing, thanks! Just a question, how were you able to display multiple CMS collection lists(make, location, fuel type) inside your main CMS collection list (cars)?

    • @kristinarudolf2187
      @kristinarudolf2187 Год назад

      In my case, it doesn't work.. :( This filter is so cool but I have the same problem.

  • @jpponline1
    @jpponline1 3 года назад +1

    Gold!

  • @nishantjain4453
    @nishantjain4453 2 года назад

    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.

    • @andreaso.1549
      @andreaso.1549 2 года назад

      Following this to see finsweet's reply

    • @nishantjain4453
      @nishantjain4453 2 года назад

      @@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.

  • @sebobastiseppobas
    @sebobastiseppobas 2 года назад +1

    And one more thing: If you use Javascript in your list elements, it will only be loaded/rendered on elements that are visible initally. JS is not loaded/rendered on elements that become visible through CMS Load or CMS Filter. But this can be fixed, because Jetboost had this problem at the beginning too. Probably there must be some kind of command that reloads all scripts every time a filter, search or load function is used.

    • @baltazarfajto
      @baltazarfajto 2 года назад

      Just found out this the hard way...

  • @garryweisblum2409
    @garryweisblum2409 2 года назад

    absolute legend!

  • @61642806
    @61642806 2 года назад

    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?

  • @AlabaOdu
    @AlabaOdu 2 года назад

    This is great, just great

  • @jennifersanjines1111
    @jennifersanjines1111 3 года назад +1

    OK #1 I RE-implemented everything on my current site I'm building that had used finsweet tools with the new Attributes in under a few hours and It was so easy!!! I love it so much. Question on this video though, you mention "there is no delay" when it filters, is there a way we can add a delay so that the content fades or animates in? In my case multiple items I click still load the first result and it's not very clear to the user that the filter is working.

    • @joekrug8980
      @joekrug8980 3 года назад

      Hey Jennifer! Great to hear this. You can adjust the duration the filer duration in ms. The example right now is set at 0. I've just changed to it to 50 to show the fade effect: cms-filter-example.webflow.io/. On your Collection List, find the attribute fs-cmsfilter-duration = 0 and change that to 50, 100, 200, or whatever!

  • @sarahrain4371
    @sarahrain4371 2 года назад

    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?

  • @magalere
    @magalere 3 года назад +2

    Hey Joe, love it! Question: is it possible to integrate it with Google Maps? I’m building a filter system where visitors can filter a location by street name. Not sure though how to build it yet in combination with your great Filter resource. Have you done something like that before? Any recommendations? Thanks!!

    • @joekrug8980
      @joekrug8980 3 года назад +2

      Hey! We are going to release a developer api for Attributes next year. This is going to allow you to write code on top of Attributes for implementations exactly like this!

  • @mgu5402
    @mgu5402 2 года назад

    Crazy good! Thank you

  • @ErikaK003
    @ErikaK003 Год назад

    lifesaver! thank you

  • @schaffan
    @schaffan 3 года назад +2

    Great update! Thank you for your dedication. Quick question: Can the module be modified so that the CMS list is not shown at the initial state? Also, regarding the filtering buttons, can this be set so that only one button can be selected at a time? Again, thank you for you and your team to bring this to the community.

    • @joekrug8980
      @joekrug8980 3 года назад

      Hey Andras. To select only one button at a time, use radio buttons! By default this element can only be selected one at a time. Works the same way in the filter system. We have had several requests for the list to start empty. It's on radar for a feature addition

    • @schaffan
      @schaffan 3 года назад

      Thank you Joe for your answers. Great work.

  • @chirantanx
    @chirantanx 2 года назад

    Awesome Library! Huge fan. Is there way to choose multi-reference field using select options?

  • @ansabkhan9857
    @ansabkhan9857 11 месяцев назад

    Is it possible to rearrange collection items on website using GSAP flip while using CMS filtering from finsweet no-code attributes?

  • @supersonic.a
    @supersonic.a 2 месяца назад

    Was it explained here how to design an empty state?
    I've been using attributes to do that in my own project, created div that should be shown when 'no results found', applied name and value to it. But it only appears when the div is actually visible on the page. When I put display to 'None' or choose 'Hidden', it doesn't appear. Please advise what can be done to make it work properly.

  • @jonathanhislop5464
    @jonathanhislop5464 2 года назад

    Thank you guys! Did part 2 ever come out? I struggled to find it, so I assume not? Any release date in the works?

  • @konstantinbodnenko5842
    @konstantinbodnenko5842 Год назад

    Could we use your great cms searching system to search the data that store inside webflow cms template page?

  • @growthbranding
    @growthbranding 4 месяца назад

    Hello guys! Would be anyway to select items and add to a list for a quote, kind of Ecommerce but with not buying option, just request a quote or information of all product selected. Any way to do it? Thanks a lot!

  • @hiroyukinumaguchi1984
    @hiroyukinumaguchi1984 Год назад

    Great! Thank you!

  • @adriangavrila1792
    @adriangavrila1792 3 года назад +1

    Thank you

  • @derekgaspard5194
    @derekgaspard5194 24 дня назад

    I have to press RESET ALL button on my website for all items to show up. Initially when loading the page, its empty with no items. When I press RESET ALL text link I added, then all the items show back up. What do I do? How can I have all items to show up initially loading the page like yours?