CMS Load and sorting items with custom code

Attributes
,
1

Hi there!

I’m currently building a site on Webflow that makes heavy use of CMS Collections. On one of the pages, I’m using Finsweet’s CMS Load (load: all) to display all teachers, current students and past students from my client’s institution.

I’m combining this with accordion elements and a custom script by Timothy Ricks YouTube Channel, which dynamically sorts the CMS items into different divs based on category.

$(".tr-section").each(function () {
  let section = $(this);

  section.find(".tr-item").each(function () {
    let cmsItem = $(this);
    let itemCategory = cmsItem.find(".tr-category").text().trim();

    section.find(".tr-contain").each(function () {
      let groupCategory = $(this).find(".tr-title").text().trim();

      if (groupCategory === itemCategory) {
        cmsItem.appendTo($(this).find(".tr-list"));
      }
    });
  });
});

The issue I’m facing is that it seems the sorting script runs before CMS Load finishes loading all items, so the items that are appended after the first 100 are not being sorted correctly.

It’s also important to mention that I’m not a developer and I don’t have deep knowledge of JavaScript, so I might be missing something basic or obvious in terms of timing or logic.

What would be the best way to ensure the sorting script runs only after all items have been loaded by CMS Load?

Read-only link: Webflow - PPG Unilasalle

Production website: Programa de Pós-Graduação em Direito - Unilasalle

This shouldaffect the items inside the “Pessoas” tab in the Metrado and Doutorado sections.

Any insights would be greatly appreciated!

Thanks in advance :folded_hands:

2

HI @eliezer.santos,
You can ensure that your script runs only afer all items have been loading by adding your code inside the List Callback:

  window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      // Your code goes here.
      $(".tr-section").each(function () {
        let section = $(this);

        section.find(".tr-item").each(function () {
          let cmsItem = $(this);
          let itemCategory = cmsItem.find(".tr-category").text().trim();

          section.find(".tr-contain").each(function () {
            let groupCategory = $(this).find(".tr-title").text().trim();

            if (groupCategory === itemCategory) {
              cmsItem.appendTo($(this).find(".tr-list"));
            }
          });
        });
      });
    },
  ]);

Replace this code in your page settings and let me know how it goes!