New to Finsweet: Help With CMS Filters for 100+ Items

Attributes
1

I have a collection list with >100 items. The items are listings in a directory. I have a series of filters for the collection list, but they only return items that are displayed on the page, which is only 100 items. I’ve read that I can use one of the CMS Load attributes, but I’m not sure which one (pagination, infinite scroll, etc.)? And also, will the filters automatically “search” through all items in the collection after I’ve added that attribute? Thanks in advance!

2

Hey @james1!

Yes! CMS Load will help CMS Filter look through all of the items on the list.

The recommended load mode is pagination but any will work with the filtering

3

Thank you, @Support-Luis. I really appreciate your response.
My newbie-ness is going to show, but I simply cannot get this CMS Load attribute to work. I have added the Pagination attribute to the Collection List. See screenshot below. I also set the Collection List to Pagination, which you can also see in the screenshot. However, when I run my filters, they still only filter the results from the first 100 results (page 1). What am I missing?

Screenshot 2024-12-10 074153
Screenshot 2024-12-10 074153260×436 23 KB

4

Hey @james1! Don’t worry!

I assume you’ve also added the CMS Load script to the <head> section fo the custom code right?

If so, the only thing that seems to be missing is the fs-cmsload-element = list attribute on your list and you should be good to go!

If you are still facing issues please share a read-only link and I will take a look :muscle:

5

That worked! Thanks a ton!
One other question, when the filter loads an item from page 2+, it doesn’t bring along the number field formatting, which I’ve adding to the head of the page using custom code. This code formats the number field to USD. What I see is that the items from page 1 of the collection are formatted with USD, but the script/custom code doesn’t seem to be applying to the deeper pages of the CMS collection.

6

Great to hear!

To execute code you’ll need to use the API, this runs the code once CMS Filter loads. We also have a renderitems event that fires each time filter results are rendered on the page.

This is the basic structure

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

      const [filterInstance] = filterInstances;

      // Define the fucntion to format the text elements here

      // Call it here to format the items on the first pafe upon rendering

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);

        // Call it again here for the filter results
      });
    },
  ]);
</script>

Let me know if you have any other questions!

7

Is there a video or resource I should use to more fully understand this? I’m not a trained coder and am trying to follow the logic, but it’s not working for me.

8

You can share a link and I can take a look if you’d like :muscle:

9

Thanks so much. Here’s that link. It is on the Hunts tab. Goal is to get the price field in each CMS collection item to format as USD on all pages in the collection list. Not all of the items have a price field showing. I set it to conditional visibility to hide when no price is entered at all.

preview link

10

Thank you @james1!

This is the updated script

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

      const [filterInstance] = filterInstances;

      // Function to format numbers as USD
      function formatAsUSD(number) {
        return (
          '$' +
          number.toLocaleString('en-US', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0,
          })
        );
      }

      // Function to find and format all numbers with a specific attribute
      function updateCMSNumbers() {
        document.querySelectorAll('[data-number="usd"]').forEach((el) => {
          // Parse the raw number from the element's content
          const rawNumber = parseFloat(el.textContent.trim());
          if (!isNaN(rawNumber)) {
            el.textContent = formatAsUSD(rawNumber);
          }
        });
      }

      updateCMSNumbers();

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        updateCMSNumbers();
      });
    },
  ]);
</script>

I wanted to let you know that it seems all elements have the correct data-number attribute but they are missing the usd value. Be sure to add it so the elements are targeted correctly.

Also, the CMS Filter script should be on the <head> section of the page and this code should be added to the </body> on the page’s settings.

Please give it a try and let me know how it goes! :muscle: