-
Notifications
You must be signed in to change notification settings - Fork 6
Description
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:
- Visit the documentation
- Scroll down to the "Empty State" section.
- Open the accordion named "Empty State".
- Take a look at the text, images and icons.
To Reproduce
- Visit the documentation and add all the required
fs-list-*
attributes for the solution to work. - In the documentation, scroll down to the empty state section.
- Add the
[fs-list-element="empty"]
attribute to the webflow empty state element, as described in the example provided in the documentation. - Publish the project.
- Filter by anything that will return 0 results.
- 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.
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.