How to limit CMS number of items showing up with Finsweet CMS Filter + Combine

Hi Finsweet support team,

My goal is to simply use those two librairies together: CMS Filter + CMS Combine AND to limit the number of items showing up.

I’d like to limit the results to 8 items max and I noticed that using JS was not enough in order to interact with your API.

Could you help me to solve this issue? Thanks a lot!

Live site: NEW | ACADEMY

Preview link: Webflow - Ramify

Hello @arthur.xuan.vu, it’s not possible to limit the number of items when using combine using attributes. Anyway you could limit number of cms items rendered using webflow before publishing and our attributes library will only combine the limited items

Hi @josephmukunga,

I have a need to limit the number of CMS items shown in a combined list to 1 (date sorted by the most recently added).

Have you seen a way of doing this at all since this post was created?

Thanks a lot,
Tristan

Hey @tristanpringle! I’m afraid we have not seen a different approach yet. However, you can share a link and I’ll see what I can work out for you

Hey, thanks, that would be great!

This is the share link: Webflow - Creative Business Company Staging

There are two instances of CMS Combine on the page which are working also with CMS filter and Static item.

I need to limit the first feature list to only show 1 item, so where it says “Secure the branding budget you need to unlock the next phase of growth” and “Helping an NGO secure $3.6m in revenue in a single month with an always-on brand campaign approach” – this would only show the most recently added item

This is the live site: Solutions components

@tristanpringle, one question. Between these two items, how are you doing the sorting to know which is the newest? To avoid a whole new CMS Sort setup you might want to add the dates to the items and we can sort with some JS.

Even though the list is the first to show on the page, it is the second instance of the CMS Combine Attribute. Having this in mind this script should do what you are after

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

      if (listInstances.length > 1 && listInstances[1].items.length > 1) {
        const listInstance = listInstances[1];

        // Add sorting to ensure the first newest item is shown first

        for (let index = 1; index < listInstance.items.length; index++) {
          const element = listInstance.items[index].element;
          element.style.display = 'none';
        }
      } else {
        console.log('Not enough items in the list to hide.');
      }
    },
  ]);
</script>
1 Like

Hey @Support-Luis, thank you so much for this.

The script is working perfectly on the first feature list. However, I need to repeat this functionality for 2 more combined feature lists on the page (there are 3 feature lists in total on the page).

Could you help update the script that you gave me to have the same functionality on all three feature lists?

I’ve also added the date text into each of the CMS items so that we can add the sorting using that.

This is the latest live link: Solutions components

I’ve added labels to reference where each combined list should show on the page

Sure thing! Let me know how this script works

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

      for (let i = 1; i < listInstances.length; i++) {
        const listInstance = listInstances[i];
        const items = listInstance.items;

        // Sorting logic
        const sortedItems = items.slice().sort((a, b) => {
          const dateA = new Date(a.element.querySelector('.date-sort').textContent);
          const dateB = new Date(b.element.querySelector('.date-sort').textContent);
          return dateB - dateA; // Sort in descending order (newest first)
        });

        items.forEach((item) => {
          item.element.style.display = 'none'; // hide all items initially
        });

        if (sortedItems.length > 0) {
          sortedItems[0].element.style.display = ''; // Display only the first item
        } else {
          console.warn(`No items found for instance #${i}`);
        }
      }
    },
  ]);
</script>

Thanks @Support-Luis, that works great for limiting all of the feature lists to 1 item and sorted by date!

There is an issue though that the CMS filters are not working with the static elements that contain the featured lists. Is there a solution for that?

The latest live link is here: Solutions components

1 Like

Hey @tristanpringle! I’m not sure I 100% understand the question. Could you please record a quick loom on the desired behavior?

Hey @Support-Luis , sure thing, thank you – a screen recording is attached.

The desired behaviour is that the content of the feature lists is included and filtered by the CMS filters at the top of the page. E.g. when ‘Guide’ is toggled, only items with the category of ‘Guide’ should show.

However, at the moment, even if a Guide item is not the first item in a feature-list, when that category filter is active, the feature list still shows with a ‘Case Study’ item at the top.

The way the page is set up is that each of the combined CMS feature lists are nested inside a div with the class of ‘static-item’. These static items use Attributes to get positioned at position 1, 8 and 24 within the main combined (non-featured) collection list on the page.

The Static items are given the attribute of ‘fs-cmsstatic-interactive = true’, so that they should interact with the CMS filters are the top.

Before adding the scripts you created, the CMS filter was functioning correctly on both the featured and non-featured lists, so I’m wondering if something can be added to the script to get that functionality working again?

Thank you!!

Hey @Support-Luis did you think you’ll be able to take a look this again for me? Really appreciate the help!

Hey @tristanpringle! Yes, I’ve been taking a look the whole day. I’ll report back when I find a possible solution…

I can’t fully test as when I override the content the filters stop working on my end. To give you an idea of a possible fix, I am trying to remove from the page the items instead of hiding them as I believe CMS Filter finds a match inside the static item corresponding to the other categories.

I’m close to a solution :muscle:

Hey @Support-Luis, thank you, really appreciate this!!

That method of removing items from the page instead of hiding them in the featured lists sounds exactly like what I thought we need, like you say it seems like the CMS Filter still finds a match inside the static item even if it isn’t the first one shown.

Let me know when you have anything I can try!! :muscle::muscle::muscle:

Hey @tristanpringle! Could you test this for me?

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

      for (let i = 1; i < listInstances.length; i++) {
        const listInstance = listInstances[i];
        const items = listInstance.items;

        // Sorting logic
        const sortedItems = items.slice().sort((a, b) => {
          const dateA = new Date(a.element.querySelector('.date-sort').textContent);
          const dateB = new Date(b.element.querySelector('.date-sort').textContent);
          return dateB - dateA; // Sort in descending order (newest first)
        });

        listInstance.clearItems();
        listInstance.items.push(sortedItems[0]);
      }
    },
  ]);
</script>

@Support-Luis that hasn’t helped unfortunately, the same behaviour is happening still. Here’s the live link:

https://creative-business-company-staging.webflow.io/solutions-components

Hey @tristanpringle! Which version worked the best for you? I’ll try to build the solution on top of that

Hey @Support-Luis, I’ve made some progress just now…

The current live version is here: Creative Business Company Staging

All that’s missing now is making the Static items fit into the combined collection list.
The divs that should be static are called ‘static-item’ – the first one on the page should be at position 1 in the combined list, and the second one should be at position 8.

This will be awesome when it’s working and will use all of these attribute solutions: Combine/Sort/Filter/Static

Can you see how I can get the Static functionality working?

Here is the share link:
https://preview.webflow.com/preview/creative-business-company-staging?utm_medium=preview_link&utm_source=designer&utm_content=creative-business-company-staging&preview=c54fc9a2533bbb03faf8c1008adb4368&pageId=65783fa40a31d79407e1f87d&itemId=657866bfde2f1c5d562d5a50&workflow=preview

Hey @tristanpringle! I am taking a look now and I think I’ve found the issue.

Can you please remove the fs-cmssort-element="list" attribute from all but the first list?

Below is the structure after removing the extra attributes. Let me know if you test this.

Hey @Support-Luis thank you! I tried that and the date sorting still works, but the static items still isn’t doing its thing!

So close but not quite there… :sweat_smile: Anything you can see for the static item functionality specifically??