How do I set up a hidden button to automatically sort items by name on my Webflow homepage using Finsweet's CMS Combine and CMS Sort?

To set up a hidden button to automatically sort items by name on your Webflow homepage using Finsweet's CMS Combine and CMS Sort, follow these steps:

1. Install CMS Combine and CMS Sort:

• CMS Combine: Go to the Finsweet CMS Combine website (https://cmsdocs.webflow.io/) and follow their installation guide to add the CMS Combine code snippet to your Webflow project.
• CMS Sort: Visit the Finsweet CMS Sort website (https://cmsdocs.webflow.io/) and follow their installation guide to add the CMS Sort code snippet to your Webflow project.

1. Create the hidden button:

• Select the element (e.g., a button) that you want to use as the hidden button for sorting.
• Set the visibility of the button to "None" by going to the Styles panel and changing the "Display" property to "None".

1. Add the custom attributes:

• Select the hidden button element and go to the "Settings" tab in the right sidebar.
• Click on the "+" button next to the "Attributes" heading to add a new custom attribute.
• Set the "Name" of the attribute to "onclick".
• In the "Value" field, enter the following JavaScript code to trigger the sorting:
  ```
  CMS.sort('collection-name', 'field-name', 'asc');
  ```
  • Replace 'collection-name' with the name of your collection in Webflow.
  • Replace 'field-name' with the name of the field you want to sort by (e.g., 'name').
  • Choose either 'asc' for ascending or 'desc' for descending sorting.

1. Set up the dynamic lists:

• Make sure you have added a dynamic list to your Webflow page that is connected to the desired collection.
• Set any initial sorting options in the dynamic list settings as desired (e.g., by date, featured, etc.).

Now, when a user interacts with the hidden button on your Webflow homepage, the items in your dynamic list will be automatically sorted by name in the specified order.

Note: Make sure that you have already populated your collection with items before testing the sorting functionality.

This setup not only enhances the user experience on your Webflow website but also allows you to showcase your content in a well-organized manner based on your sorting preferences.

Additional questions:

1. How do I add CMS Combine to my Webflow project?
2. Can I use multiple sorting criteria with Finsweet's CMS Sort?
3. How do I create a dynamic list in Webflow's CMS?