Combine 2 CMS Collections & Auto Sort By Date

Design help CMS
1

For this new website I am working on there are two types of posts that will be made, a blog CMS and a podcast CMS set up (they have slightly different layouts, hence why I needed to make them separate).

I want a page with thumbnails, titles, dates, and blurbs for all the blogs and podcasts. I want them combined in one large list and sorted in order of the date on the blog/podcast. I do not want a drop down with options for sorting, I just want everything to be in order by date upon the page loading.

Currently I have tried using Finsweet but the sort requires a trigger, like a drop down or button, so that has not been working. I currently have the Finsweet combine CMS in place, so everything looks like one big list. However the blogs are all grouped at the top, in order by date, and then the podcasts are grouped at the bottom, also sorted by date. I want it to act like one big list that is sorted by date, regardless of whether it is a blog or a podcast.

Hopefully this makes sense!

Read Only Link

Screenshot 2023-12-13 at 1.51.44 PM
Screenshot 2023-12-13 at 1.51.44 PM1177×895 99.1 KB

2

Perhaps this cloneable from Finsweet would help? Looks like you can simulate a click happening on a hidden button that causes the sort to happen so there isn’t any user interaction needed or a sort button to be visible.

3

I tried that but it isn’t working :slightly_frowning_face: even when I show the button and click it the sorting still isn’t right. Is there a way to do this using just CMS collections?

4

It looks like you may be missing a script which is why it’s not working -
image

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

I had all the code pasted into the head tag so I moved it to the body tag. Now when I click the button it does something, but it looks like it is alphabetizing the posts by the month, which is really weird.

6

The scripts you had in the head tag were fine as is - the code snippet I’ve pasted is what initiates the hidden button to be pressed on page load.

So inside head tag code would be:

<!-- [Attributes by Finsweet] CMS Combine -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmscombine@1/cmscombine.js"></script>

<!-- [Attributes by Finsweet] CMS Sort -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmssort@1/cmssort.js"></script>

Before body tag code would be:

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

This attribute should fix your dates sorting alphabetically:

image
image1245×493 9.96 KB

1 Like
7

Thank you so much for this help! It looks like it is organizing them now (yay!) but it’s showing the oldest first, I want the oldest to be last. Any advice for fixing that?

8

Try this:

image
image1252×386 10.7 KB

9

It worked! Thank you so much for your help!

1 Like