How can I resolve the issue of not being able to sort items on a CMS page in Webflow when using button sorting instead of a dropdown select, especially when navigating to different pages?

If you're facing the issue of not being able to sort items on a CMS page in Webflow when using button sorting instead of a dropdown select, there are a couple of solutions you can try.

1. Manual Sorting: One approach is to manually set the order of items in your CMS collection. In the Designer, go to your CMS collection, and in the Collection List Settings panel, select "Sort Collection." Then you can manually drag and drop the items into the desired order. Keep in mind that this method requires you to manually update the order whenever new items are added.

2. Using a Reference Field: Another option is to use a reference field in your CMS collection to specify the order of items. For instance, you can create a "Sort Order" field of type number in your collection, and then assign a specific numeric value to each item to define its order. In the Collection List Settings, choose to sort by the "Sort Order" field. This way, you can update the sort order easily by changing the numeric values in the Reference field.

3. Custom Code and Query Parameters: To enable sorting based on button clicks and navigation between pages, you'll need to utilize custom code and query parameters. Firstly, create separate buttons for each sorting option and give them unique value attributes. Then, using JavaScript or jQuery, listen for click events on these buttons, take the selected value, and construct a query parameter string (e.g., `?sort=latest`). Append this query parameter to the URL when navigating to different pages.

Next, in your CMS collection page template, use JavaScript to dynamically read the query parameter from the URL and update the sort order of the Collection List based on the value. By default, you can set the sort order to a specific field (e.g., "Date" or "Name"). However, when a button is clicked and a query parameter is present, you can override the default sorting and apply the desired sorting based on the query parameter value.

Finally, when navigating between pages, make sure to retain the query parameter in the URL so that the sorting remains consistent across different pages.

Keep in mind that implementing this solution involves custom code and may require some JavaScript/jQuery knowledge. If you're not comfortable with coding, it might be helpful to consult with a developer or reach out to the Webflow community for assistance.