Streaming live at 10am (PST)

Custom Dynamic Filter in Webflow

Hi @buntestrahlen :slight_smile:
Im having some trouble making this work and was wondering if you could help?
Share link
Page link

I this is where i’m going wrong, what classes to what items? :slight_smile:
Sorry for the trouble.

hey kjell. there you go.
:sun_with_face:

every collection item in your second collection list should get a class assigned with the name of it’s filter tag (code#002). the class has no styling. we just use it for the filter. when you click on a link inside your first collection list we can check if the link text matches one of the classes in your second collection list. and then we can only show those. in my case i used five tags. so for every collection item i added up to five classes. in your example you used only one tag. so your code might look like this:

// Code#002: Add Classes to Collection List Items
$('#filter-list .w-dyn-item').each(function () {

    	// One Category Text Block
      	var category1 = slug($(this).find('.category-trigger:nth-child(1)').text());
      	$(this).addClass(category1);
});

and your html after publishing should look like this:

__
you could also add a data-filter attribute to the items instead of classes. but for me this has been the easiest solution.

Hi guys.
I have now successfully made the Custom Dynamic Filter in Webflow with a lot of help from Jaro and some changes to the code.
Instead of going back and forth and telling you what you had to do differently, I’ll just tell you how I made it. I also made a video of the process where we also give it some interactions.

Add the code

<script>
    // Dynamic Filter
    $(document).ready(function() {
      
      	// Code#001: Set Slug Variables
      	var slug = function(str) {
        var $slug = '';
        var trimmed = $.trim(str);
        $slug = trimmed.replace(/[^a-z0-9-]/gi, '-').
        replace(/-+/g, '-').
        replace(/^-|-$/g, '');
        return $slug.toLowerCase();
    	}

    	// Code#002: Add Classes to Collection List Items
      	$('#filter-list .w-dyn-item').each(function () {
        									   // The five Category Text Blocks
          	var category1 = slug($(this).find('.category-inlay:nth-child(1)').text());
          	var category2 = slug($(this).find('.category-inlay:nth-child(2)').text());
          	var category3 = slug($(this).find('.category-inlay:nth-child(3)').text());	
          	var category4 = slug($(this).find('.category-inlay:nth-child(4)').text());
          	var category5 = slug($(this).find('.category-inlay:nth-child(5)').text());
          
          	$(this).addClass(category1);
          	$(this).addClass(category2);
          	$(this).addClass(category3);
          	$(this).addClass(category4);
          	$(this).addClass(category5);
    	});
      	
      	// Code#003: Show & Hide Items when Filter Navigation is clicked
    	$('.filter-item').click(function(){
          
     		var navigationCategory = slug($(this).text());
          
          	setTimeout(function() { $('#filter-list .w-dyn-item').css('display', 'none'); }, 500);
    		setTimeout(function() { $('.' + navigationCategory).css('display', 'block'); }, 500);;
          
          	$('.filter-item').removeClass('filter-active');
          	$(this).addClass('filter-active');
    	});
      
      
      	// Code#004: Show All
      	$('.filter-item:first-child').click(function(){
          
          	setTimeout(function() { $('#filter-list .w-dyn-item').css('display', 'block'); }, 500);
    	});
      
      	// Code#005: Set Active for Category "All"
      	$('.filter-item:first-child').addClass('filter-active');
      
    });
    </script>

Add the new code to the page you are working on or on site level. What ever you prefer and if you are using the filter on multiple pages.
Page: Edit page details > Custom code> Before /body tag
Site: Project settings > Custom code > Footer Code

Create the Category CMS Collection.

  • Name: Name of category
  • Add a number field
  • Name it sort order

Create the categories.
Create all categories you want + one category called ALL where you set the sort number to 1.

Create the content CMS Collection

  • Create the reference field (from 1-10 depending on what you want)
  • Create the rest of the content fields.

Create the CMS content

  • Add the references. (you don’t have to use all the fields)
  • Populate the rest of the content.

Create the page content
The filter items

  • Add a collection list and link it to the categories.
  • Add a Text Block and style it as you please.
  • Give the Collection item a Class or Subclass of filter item
  • Set the sort order to:
    • Order, Larges to smallest (this puts the ALL to the front)
    • Name, Alphabetical (this sorts the rest of the categories alphabetical)

Styling the active filter items.

This is to difference the inactive and active filter item. I set the inactive (initial state) to 60% opacity. And the Active State to 100% opacity.

  • Set Filter Item opacity to 60%
  • Add a Text Block to anywhere on the page.
  • Give it the class name of Filter Active
  • Set opacity to 100%
  • Delete the text block

The content

  • Add collection list and link it to the content
  • Give the Collection list the ID: filter-list
  • Add a div that will contain the Categories
  • Add same amount of Text Blocks that you have reference fields and link it to each field
  • Give the text block a Class or subclass of Category Inlay
  • Style it as you please.
  • Add the rest of the content in a separate Div and style it as you please.

Publish the site and test.

6 Likes

Little confused about the last part “The Content.” Any luck on the video?

Yes the video should explain it for you :).

Basically, add the filter names and give them the class of Category inlay

the video doesnt load unfortunately. any help? the filter ALL works on my page, but when i click the other categories, it doesnt filter my list. =(

Sorry, now the video should work.

I would have to see a sharelink to help you on that :slight_smile:

wow kjell thanks for the amazing video! that really explains it very well!

1 Like

https://preview.webflow.com/preview/jasonsuh?preview=a3c90a58e214656a534a964f9ef5c341

Here’s my share link. I went step by step through your vid, but I guess I’m missing something. The collection list shows for “ALL” but when I click the other filters, it goes blank.

CINEMATOGRAPHY PAGE! sorry for that

Thanks for all your help guys!

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