Skip to content

Misleading documentation: fs-list empty state #742

@lmgraf

Description

@lmgraf

Related Attributes
list aka cmsfilter

Describe the bug
The attributes documentation of the "List Filter" attribute states, the user should add the [fs-list-element="empty"] attribute to Webflow's built in "Empty State" element. This is misleading, since it cannot work: Webflow removes the empty state from the DOM entirely, so Finsweet Attributes cannot detect or display it. As a result, the empty state element will not be shown if the search returns no results.

The misleading section in the documentation I am referring to:

  1. Visit the documentation
  2. Scroll down to the "Empty State" section.
  3. Open the accordion named "Empty State".
  4. Take a look at the text, images and icons.

To Reproduce

  1. Visit the documentation and add all the required fs-list-* attributes for the solution to work.
  2. In the documentation, scroll down to the empty state section.
  3. Add the [fs-list-element="empty"] attribute to the webflow empty state element, as described in the example provided in the documentation.
  4. Publish the project.
  5. Filter by anything that will return 0 results.
  6. Notice that the empty state doesn't show up.

Expected behavior
The empty state is expected to show up when the search returns 0 results.

Screenshots
The image in the following screenshot is particularly misleading, as it explicitly shows webflows cms-collection empty state element.
Image

Suggested solution
I would suggest updating the image as well as the text in the documentation, to specify that users can't use webflows empty state element. Here's a suggestion:

###Empty State

Add this attribute: [fs-list-element="empty"]
Add it to this type of element: Your own custom **empty state** element

When using a Webflow CMS Collection List for the filtered List, it's required to add 
the `fs-list-element="empty"` attribute to a your own custom **empty state** element, 
for it to function properly.
⚠️ **Important**: Webflow’s built-in "**Empty State**" element cannot be used. Webflow 
removes that element from the Page when the site is published, which means Finsweet 
Attributes cannot detect or display it.

#Example
Next to your **Collection List Wrapper**, add a new `div` element. Style it however you 
want using your own classes, then add the `fs-list-element="empty"` attribute.
Since the **empty state** appears when no results match the current filter configuration, 
it’s common to include a **Clear** button or link within it. This allows the user to reset 
the filters and start a new filtering process.

#Tip
If you want to hide the **empty state** initially, select it and go to the **settings** tab. 
Under **Custom attributes** add a new attribute `style = display:none;`.
⚠️ **Important**: Do not set the `display` to none in webflow's `style panel`, as 
Finsweet Attributes will not be able to display your `empty state` that way.

Affected devices
All

Additional context
Less tech-savvy users probably won't know, that webflow renders the collection lists on the server which removes the standard empty state element from the document entirely.

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingdocumentationImprovements or additions to documentation

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions