The List Nest solution doesn’t work on stating url webflow.io when the website is using a reverse-proxy.
That applies if the Webflow project has a custom Href prefix in the Custom Code settings.
Finsweet Attributes script does not collect any sort of user data.
Finsweet Attributes automatically assign the correct ARIA attributes to the elements they influence.
For any element not managed by a Finsweet Attribute, developers are responsible for adding the appropriate ARIA attributes.
Give your sidebar a defined height, this will allow you to scroll up or down.
This behavior is built into Webflow, whether you're using the native "load more" feature or Finsweet Attributes. Each query for a page within a collection returns HTML that includes the collection items specific to that page. If you're concerned about search engine crawling, consider adding rel="nofollow" to the Next and Previous buttons. Additionally, submit your sitemap.xml to Google Search Console. This way, search engine bots can still find the collection items through your sitemap.
Go to your Weglot Dashboard > Settings > App Settings and Add the dynamic content (related) .class or #id you want to translate in the dedicated field.
If you chose to add the class remember to add a period (.) before the class name.
This can be achieved with a little custom JS, basically follow these steps:
display:hidden and give it a unique class name (ie. ".fs_cmssort_button"). Add the script below before the </body> tag <script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmscombine',
(listInstances) => {
document.querySelector('.fs_cmssort_button').click();
},
]);
</script>
Our filter is designed to filter CMS Collections, if you are using a Collection List on the template page, it wil work with just the normal implementation.
Static lists require extra steps to implemet but are also able to be filtered. Read more here.
By default List Filter will sort the list by alphabetical order, you can change this to chronological order by targeting the date which will change the sort order. However there is no current way to combine both sorting options.
1st activate Show Query, then apply the filters you wish and copy the URL, then make it the link to the articles page. It will load the page with the filters preselected.
For a static filter UI with checkboxes, you can use Webflow’s “Start checked” option in the Checkbox Field settings to preselect one or more checkboxes on page load.
For static radio buttons, you can add the custom attribute checked="checked" to the desired radio input.
For CMS-generated checkboxes and radios, you can generate a URL with query parameters and use that as a redirect link to the page with the list to be filtered. List Filter will automatically read and apply all filters from the URL.
Yes! Define your load mode on the main list and hide the remaining collections. The load mode will be applied to the list when the page loads.
List Nest will nest collection items using the structure and styling from the template page, including images.
However, multi-image fields are not natively supported because they don’t generate a link to the current item, which is required for List Nest to work properly.
You can create a div with a message, image or just leave it empty and apply the fs-cmsfilter-element=initial attribute to it.
Sure they can!
Yes, Attributes does work with API content/data, it is not limited to Webflow CMS content.
Yes, you can use the same instance on multiple trigger elements targeting the same element. Just make sure both attributes are present on each trigger.
Yes, you are able to use them on all kind of pages.
You can check out our Slider Component for additional slider features, including looping.
No, you can't, Attributes and Attributes Legacy (v1) are not capable of running together on the same page, they are not compatible. You can however use them on different pages of the same site.
They are mandatory for the system. It was built as a solution that can manage enterprise-level filters. Forms allow for natural accessibility and screen reader functions. This also takes out the requirement to have multi and exclusive labeled filter groups.
Not likely, we're concentrating on helping you to solve your challenges with the latest version of Attributes. However the Finsweet+ community forum will always be there for you if you want to reach for help from the community. As for us we won't prioritize providing support on Legacy.
You can, but be aware we're not likely providing support for it. We recommend starting any new page or project with the current version of Attributes.
You can if you want to. However, we highly recommend building any new projects with Attributes. Once you understand the difference between CMS Library and Attributes, you won’t want to use CMS Library. We also recommend converting active development projects that use CMS Library. Converting to Attributes is going to make everything look, feel, and function better.
Absolutely yes. Attributes Legacy (v1) is only renamed, the docs, the libraries, the demos, are going to be available for the longest time. You'll always find a link to them on Attributes' home page.
This can easily be done using Attributes, by using Instances. Learn everything about instances here.
Text inputs will return results as long as the input text is contained within the filter field. You can also pair this with fuzzy search to account for user input errors.
Use fs-listfuzzy="THRESHOLD" to set the tolerance level for fuzzy matching. The THRESHOLD value ranges from 0 to 100, where 0 allows only exact matches and 100 allows the maximum flexibility. A value of 20 is a recommended starting point, but you can adjust it as needed.
Add and style both forms for their respective breakpoints, and make sure to include fs-list-element="filters" on both forms.
If you have multiple lists being filtered on the same page, don’t forget to add fs-list-instance="INSTANCE" to a shared parent element or to each form and list individually. This ensures the filters target the correct list.
This can be done with instances, you would need to add a new list to the page for each slider.
Webflow Dropdown elements aren't supported by Finsweet's Attributes filter, since it requires a native <select> element or standard form inputs.
If you want to use a dropdown-style filter, you can use Custom Form Select as a workaround. It lets you style a Webflow Dropdown while keeping a real <select> in the background, which Attributes can detect and use for filtering.
To style the active state of your sort trigger, add a combo class (e.g. is-list-asc or is-list-desc) to the trigger element and apply your styles to that class. Once the trigger is no longer active, the combo class will be removed automatically.
By default, the active classes are is-list-asc and is-list-desc.
You can override these by using the attributes fs-list-ascclass="CLASS_NAME" and fs-list-descclass="CLASS_NAME".
By default, the class is-list-highlight is used for styling the highlight. You can modify this class or define your own combo class by using fs-list-highlightclass = CLASS_NAME
You can control the disabled state of the next and previous buttons when no more pages are available by adding the combo class is-list-pagination-disabled.
