Can't get default sort for CMS Sort upon page load working

Attributes
1

Hi Community,

I have a project with CMS sort and a very basic sort button (only A/Z and Z/A currently).

Regardless, I’d like to have a default sort applied to the button upon page load. I have looked here: Can I set a default sort? - Attributes by Finsweet

and also here: Sort: set default option without opening dropdown

But I can’t make it work. Right now, I have the sort button on the page that should be hidden in the end. This button isn’t working at all, though, regardless of what I try to do (my approach was to make it work with a manual click before applying the script). Now I have the script in place, and it clicks the .sort-field but this leads to the behavior that the dropdown will get opened by the script upon page load.

Can someone help me out on this, please and correct me in the right direction?

Preview Link of the page: Image Suppliers - BAPLA
Read-only: Webflow - bapla.com

Thank you very much

2

Hey @marc! Have you tried using a select field as your sort UI?

Here is an example of how to do this but do let me know if you have any issues.

In the meantime I’ll try to find a solution for the dropdown opening

Here is the code I have at the moment, I removed the button from the page and the (A-Z) option is working correctly but the dropdown stays open

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmssort',
    (listInstances) => {
      console.log('cmssort Successfully loaded!');

      const dropdown = document.querySelector('.dropdown.w-dropdown');
      const optionToSelect = dropdown.querySelector('[fs-cmssort-field="name"]');
      optionToSelect.click();
    },
  ]);
</script>