Cms Sort support

Attributes
1

Hi @Support-Luis ,

I have a client that needed a sort functionality for their landing page. There are multiple Collection lists on the page with their content coming from multireference lists.

My client wanted a sort feature based on the date field. And it should happen on page load.

So this is how I’ve set it up.

  1. fs_cmssort_button - for a default button sort and the custom code -

  2. fs-cmssort-element attribute on the list

  3. fs-cmssort-type and fs-cmssort-field set as “date” on the date field.

This is just for one list.
For the other list, I’ve used the list-2 and fs_cmssort_button-2 for the buttons with another script added.

What I’m noticing is that the second sort works, but not the first. Feels like the second resets the first back to no sort.

Can you please help debug this?

So basically, I want the feature of multiple sort by date on a page. All the sorting happens based on the date only.

Attaching the staging preview link- Webflow - QED

Also @Support-Luis , can you please add me to the Slack channel?

Thanks,
Bernice

2

Hey @berniceebenezer2020! For your first list, you do not need to add the -x instance to the elements, having just the fs-cmssort-element = trigger and fs-cmssort-element = list will do!

For your custom code, you are using two window.onload functions, this makes it so only the last one is correctly executed.

I recommend using the API callback function to execute code after the script has loaded successfully.

Here is the snippet needed

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmssort',
    (listInstances) => {
      console.log('cmssort Successfully loaded!');
      document.querySelector('.fs_cmssort_button').click();
      document.querySelector('.fs_cmssort_button-2').click();
    },
  ]);
</script>

Can you please let me know if these changes work on your end? Thank you!

1 Like
3

Also, here is the link to join the Community Slack!

https://join.slack.com/t/finsweet-community/shared_invite/zt-2h611cg2e-53CqXBGGkSda~3Gk97v4bw

1 Like
4

Hi @Support-Luis , I was able to fix the issue. I have updated the fs-cmssort-type and fs-cmssort-field needed to be set as “date” on the date field.

I also added this script for my sorts:

Thanks @Support-Luis