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

**URL:** <https://forum.finsweet.com/t/new-to-finsweet-help-with-cms-filters-for-100-items/3915>\
**Category:** Attributes\
**Created:** [December 10, 2024, 12:25pm UTC](https://forum.finsweet.com/t/new-to-finsweet-help-with-cms-filters-for-100-items/3915 "2024-12-10T12:25:26Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![james1](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/james1/32/3480_2.png) [@james1](https://forum.finsweet.com/u/james1)\
**Post date:** [December 10, 2024, 12:25pm UTC](https://forum.finsweet.com/t/new-to-finsweet-help-with-cms-filters-for-100-items/3915/1 "2024-12-10T12:25:26Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [December 10, 2024, 1:30pm UTC](https://forum.finsweet.com/t/new-to-finsweet-help-with-cms-filters-for-100-items/3915/2 "2024-12-10T13:30:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![james1](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/james1/32/3480_2.png) [@james1](https://forum.finsweet.com/u/james1)\
**Post date:** [December 10, 2024, 1:43pm UTC](https://forum.finsweet.com/t/new-to-finsweet-help-with-cms-filters-for-100-items/3915/3 "2024-12-10T13:43:46Z")

</div>

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](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/2/235d364f8d7be71449edd9277fe0a039d9e6e010.jpeg)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [December 10, 2024, 2:23pm UTC](https://forum.finsweet.com/t/new-to-finsweet-help-with-cms-filters-for-100-items/3915/4 "2024-12-10T14:23:19Z")

</div>

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 💪

---

<div class="post-metadata">

**Author:** ![james1](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/james1/32/3480_2.png) [@james1](https://forum.finsweet.com/u/james1)\
**Post date:** [December 10, 2024, 2:28pm UTC](https://forum.finsweet.com/t/new-to-finsweet-help-with-cms-filters-for-100-items/3915/5 "2024-12-10T14:28:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [December 10, 2024, 2:38pm UTC](https://forum.finsweet.com/t/new-to-finsweet-help-with-cms-filters-for-100-items/3915/6 "2024-12-10T14:38:55Z")

</div>

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

```js
<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!

---

<div class="post-metadata">

**Author:** ![james1](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/james1/32/3480_2.png) [@james1](https://forum.finsweet.com/u/james1)\
**Post date:** [December 11, 2024, 4:40am UTC](https://forum.finsweet.com/t/new-to-finsweet-help-with-cms-filters-for-100-items/3915/7 "2024-12-11T04:40:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [December 11, 2024, 7:19am UTC](https://forum.finsweet.com/t/new-to-finsweet-help-with-cms-filters-for-100-items/3915/8 "2024-12-11T07:19:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![james1](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/james1/32/3480_2.png) [@james1](https://forum.finsweet.com/u/james1)\
**Post date:** [December 12, 2024, 4:33am UTC](https://forum.finsweet.com/t/new-to-finsweet-help-with-cms-filters-for-100-items/3915/9 "2024-12-12T04:33:14Z")

</div>

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](https://preview.webflow.com/preview/huntguidepro-1-1?utm_medium=preview_link&utm_source=designer&utm_content=huntguidepro-1-1&preview=689ca2d38c4448885b937b9c9094670d&pageId=6743f0c3bb0120b8d925bcbc&workflow=preview)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [December 13, 2024, 6:02pm UTC](https://forum.finsweet.com/t/new-to-finsweet-help-with-cms-filters-for-100-items/3915/10 "2024-12-13T18:02:30Z")

</div>

Thank you @james1!

This is the updated script

```js
<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! 💪