How to limit multiple combined lists

Attributes
1

I am working on a tab component that has a few combined lists in it. These lists are sorted by a hidden date field currently, which is working properly with some additional custom code. Preview of the combined lists looking good:

Sandbox here

I also want to duplicate this list on the home page, but limit each tab to 6 items. I still want to sort each tab by the hidden date field, so the sort would happen first, then the limit. What is the best way to do this?

2

Hi @kristen.m.samuelsen

You could either utilize CSS or update the custom script to hide items after the 6th one

Using CSS

Since you want the sorting to happen via your custom script first, the safest way to ensure only 6 items show up is to hide everything after the 6th item using CSS. This ensures that even after Finsweet combines and re-sorts the list by your hidden date field, the layout remains intact.

Add this to your home page’s <head> or a Style embed:

/* Target the combined list on the home page specifically */
.r-cl_list .r_item:nth-child(n+7) {
    display: none !important;
}

Using the custom script

window.FinsweetAttributes = window.FinsweetAttributes || [];
window.FinsweetAttributes.push([
  'list',
  (listInstances) => {
    listInstances.forEach((listInstance) => {
      // 1. Set the sorting parameters
      listInstance.sorting.value.fieldKey = 'date';
      listInstance.sorting.value.direction = 'desc';

      // 2. Listen for the 'render' event which happens after sorting/combining
      listInstance.on('renderitems', (renderedItems) => {
        // Check if we are on the home page (modify selector as needed)
        if (window.location.pathname === '/' || document.body.classList.contains('home-page')) {
          const limit = 6;
          // Hide items beyond the limit
          renderedItems.forEach((item, index) => {
            if (index >= limit) {
              item.element.style.display = 'none';
            }
          });
        }
      });
    });
  },
]);

If you don’t want to load every item from your CMS just to show 6 (to save on page load speed), set your Webflow Collection Lists to a “Limit” of something like 10 or 15 items each. This gives the Finsweet script a smaller “pool” to sort, but still enough variety to ensure the top 6 are truly the most recent.