Select List Filter

Attributes
,
1

EDIT: I will eventually use this with List Select, but currently I’m trying to debug why the static select isn’t working with my List Filter.

EDIT 2: Adding read only link: Webflow - The Backyard & Beyond

I’m attempting to use the select field with List Filter and I’m running into trouble. No matter where I put the fs-list-field in the select element, I don’t seem to get the filter to work properly. Am I just wrong in assuming that you can filter using select?

2

Hey @ryan3!

You can definitely filter using select elements! The issue with the fs-list-field attribute not working on select elements is likely due to a setup configuration.

There are several ways to use select elements with List Filter:

For a basic dropdown filter, add fs-list-field="IDENTIFIER" directly to the select element:

  • Place the select inside a form with fs-list-element="filters"
  • Each option’s value should exactly match your CMS field values
  • The IDENTIFIER should match the one used in your collection items

If you’re populating your select from CMS data, you might be facing a common issue where:

  • The collection list populating the select has fs-list-element="list"
  • This makes List Filter treat it as another list to filter

To fix this, add fs-list-instance="IDENTIFIER" to differentiate between the collection list for options and the one you want to filter.

If you want to use List Filter + List Select here is the setup:

Filter + Select
Filter + Select440×385 23.5 KB

In your project, you are currently using a Dropdown element. Make sure to use a Select Field

@Support-Luis or @Support-Pedro can help further if you need additional assistance.

3

Thanks for the reply! The reason I’m using a dropdown is because I also want to use the Custom Select component/feature from Finsweet to have nicer looking select items. So essentially I want to combine all three. List Filter, Select List, and Custom Form Select. Is this possible?

4

This is the actual page I want to build. I want the shed size dropdown to filter the pricing info below. But when I select a shed size, it comes up with no results for some reason. I know there are results as I see them in the CMS.

5

Could I get a follow up here? Sorry forgot to tag. See above @Support-Luis @Support-Pedro

6

Hey @ryan3! Did you remove the filter form? I cannot see it on the read-only link or the published page :thinking:

7

Hey Luis. Ya it looks like I did. I don’t really know why I did that! Here it is all back in place

8

I’ve got it to a point where everything is working except the filter. I think it has something to do with instances, but I’m sort of confused on how instances work. I’ve tried to watch vids on it, but still not sure what’s wrong.

9

Hey @ryan3!

I made a Filter + Select + Custom Form Select setup and it worked great with this setup:

Filter + Select + Custom Form Select
Filter + Select + Custom Form Select624×550 34.6 KB

Here is my test working:

image
image841×937 171 KB

Try this approach and let me know how it goes!

11

The problem is my filter doesn’t work. Everything else works. I think it has to do with instances. If you could look at my site and see where I might have gone wrong. my problem doesn’t seem to be in the dropdown but in the filter setup

12

This is my current setup. I have the fs-list-instance on the Collection list for the feed with a value of feed

image
image476×843 39.7 KB

13

Hey @ryan3!

To make the filters work, add fs-list-instance="feed" (same as in your main list element) to your form element. This is to make sure that the form filters and the list are part of the same instance.

image
image1804×300 42.9 KB

Then, if you want only one item to be shown, don’t use Limit Items (Limit Items restricts how many CMS items Webflow renders into the DOM); instead, try this approach:

  • Enable Webflow’s Paginate Items option and set it to 1 item per page
  • Add fs-list-load="more" and fs-list-loadcount="1" to your main list
  • If you want, you can hide the pagination elements with display:none

Try this and let me know how it goes!

14

This made it work! Thank you so much!

1 Like