You can enable user sorting of CMS items in Webflow using a custom “sorting number” field and Memberstack by combining Webflow CMS, Memberstack user data storage, and some JavaScript for dynamic filtering. Below is how to implement this functionality.
1. Enable CMS Sorting with a Custom Field
- Create a CMS field in your Webflow Collection named "Sorting Number" (use the Number field type).
- This field will act as the basis for ordering your CMS items.
- Sort your Collection List in the Webflow Designer using Sorting Number (ascending or descending) under Collection List Settings.
- In Webflow, build a form or UI controls (e.g., button or numeric input) that lets logged-in users assign a "Sorting Number" to items they "own" or are allowed to interact with.
- Use Memberstack’s front-end API to store the user's preferences (sorting values) in Memberstack’s custom fields, or use Memberstack’s JSON user data field if storing multiple entries.
3. Handle Data Mapping Per User
- Memberstack does not enable direct updates to Webflow CMS fields, so you can’t write a user’s sorting number back to the CMS directly.
- Instead, store each user’s preferences in Memberstack’s user data, and use JavaScript on the front-end to sort the displayed items based on the user’s choices.
4. Use JavaScript to Reorder the CMS List Dynamically
- After the CMS list loads, use JavaScript (e.g., via jQuery or vanilla JS) to:
- Pull the user’s stored sorting preferences from Memberstack (using their Front-end API).
- Match those preferences to the CMS items displayed.
- Reorder the list in the DOM based on the sorting numbers stored by the user.
- This does not change CMS data—it only reorders items visually after page load.
5. Limitations to Consider
- Since Webflow CMS rendering is static, you can’t dynamically sort CMS items at the server level based on individual users.
- Reordering with JavaScript after the list has rendered may cause Flicker or Delayed Sorting, especially if you're using Webflow’s default pagination or lazy loading.
- You must load all items you plan to reorder on the page; any items not currently rendered cannot be reorganized dynamically.
Summary
You can implement user-specific sorting of CMS items by adding a "Sorting Number" field, capturing user preferences with Memberstack, and applying client-side JavaScript to reorder elements after load. This approach works around Webflow’s limitations by using Memberstack’s user data storage and front-end scripting.