Stacking multiple CMS Sort fields on combined collection

[Poetic]

Context:
I have a client with many different resource types (blogs, news, case studies, etc.). Each resource type is a collection, but they want to have one information hub with all resource combined and filterable. I have the following attributes set up on the page: CMS Combine, CMS Nest, CMS Filter, CMS Load, CMS Sort. The client want the resources sorted by date(newest-oldest), and they want to select ~3 featured resources “pinned” (sorted) to show at the top of the list.

Issue:
I’m having trouble stacking the sorts, would the “feature” sort field be able to be added to the same trigger button if it is sorting the same combined collection list?

My current setup (not working) is to have a second trigger button, with fs-cmssort-element = “trigger-2” and the combined collection list has the attribute fs-cmssort-element = list, list-2?

Any insight on how to get this working?

I found this on the sort documentation but I’m still a bit confused: “If more than one trigger belongs to the same list (currently only supported with Button Triggers), all the triggers must match the list instance number.”

Read-Only Link:
https://preview.webflow.com/preview/insidetrack?utm_medium=preview_link&utm_source=designer&utm_content=insidetrack&preview=62e29e4f093b1097bf3346c9d4065c4a&pageId=64d664f168e7ae977aa60308&workflow=preview

[Support-Luis]

hey @Poetic! the -x suffixes are used when we have more than one list to be sorted/filtered/loaded. If you only have one list all your elements should not have any suffixes as they belong to the same fs-cmssort-element = list.

For multiple sort triggers, what will differentiate them is the IDENTIFIER you use to link the fields to be sorted. Let me know if this makes sense

[Poetic]

This makes sense, I adjusted my setup accordingly. However, even though this is set up correctly according to automated support, neither sort is working. Any ideas on how to get this functional?

https://insidetrack.webflow.io/resource-hub?fs-attributes-support=true

[Poetic]

@Support-Luis

[Support-Luis]

Hey @Poetic! I see you are using fs-cmssort-field="IDENTIFIER" on your date fields. I do suggest you use another identifier such as date or published.

Also, when combining CMS Nest and CMS Combine you’ll need to prevent the script from running instantly, you can do this by using this script for CMS Combine

    <script
      defer
      fs-attributes-preventload="true"
      src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmscombine@1/cmscombine.js"
    ></script>

And then using this callback to initialize and click the button after both scripts have done loading

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

          const [listInstance] = listInstances;

          window.fsAttributes.cmscombine.init();

          window.fsAttributes.push([
            'cmscombine',
            (listInstances) => {
              document.querySelector('.fs_cmssort_button-').click();
            },
          ]);
        },
      ]);
    </script>

You are also missing the fs-cmssort-type = date on your trigger button.

For the featured field we will need to think of another way as all items have the same content in the Featured element inside the blog card and the sorting does not affect them. Can you add the featured field as an embed like on the image attached? Once you have the date sort working correctly we can jump on this other field

[Poetic]

@Support-Luis

Thanks for the help! I’ve made the following changes to the build:

• added the code snippets

• updated the identifier for the date sort to fs-cmssort-field = “published”

• added fs-cmssort-type = date to the trigger button

• Added an embed to each resource collection in the conditionally visible div block as you described above.

Next Steps:

1. The date sort is still not functioning properly, even after the changes above
2. Would the featured element embed be the element with the “featured”
   
   
   
   
   
   
   sort attribute?

[Support-Luis]

Can you share your link? https://insidetrack.webflow.io/resource-hub goes to a 404

[Poetic]

@Support-Luis
https://preview.webflow.com/preview/insidetrack?utm_medium=preview_link&utm_source=designer&utm_content=insidetrack&preview=62e29e4f093b1097bf3346c9d4065c4a&pageId=64d664f168e7ae977aa60308&workflow=preview

[Support-Luis]

@Poetic I am afraid we will not be able to use the same button to trigger both sort fields. Nor a combination of two sorting fields. So a compromise on which field should the list be sorted by must be made. If you go with the date field, removing the featured identifier from the trigger will do the trick.

If you go with the featured field you’ll need to remove the date from the trigger and move your fs-cmssort-field = featured to only the HTML embed.

I also see that you have the CMS Sort script added twice, one without the prevented load and one with the setting applied. I also made a typo on the class name for the sort button it should be .fs_cmssort_button my bad.

[Poetic]

@Support-Luis Thanks for the explanation my last few questions are:

1. To clarify, are you saying that CMS sort can only apply 1 sort per list? And we can’t add an additional trigger button to sort by both fields?

2. Can you show where you see the CMS sort script added twice? Do you mean the CMS sort or CMS combine script?

[Support-Luis]

1. CMS Sort can have several sort fields per list but there is no current what of sorting by two fields at the same time. The list will be filters by “featured” or by “date” but it does not stack the sorts as “Sort by featured then by date”

2. The duplicated script is in your page settings, you can remove the top one as it is missing the fs-attributes-preventload = "true" setting

e