100+ checkbox filters from CMS collection

Attributes
1

Hello,

I have 160 items in a CMS list that act as checkboxes for filtering another list. The problem is that Webflow natively displays a maximum of 100 items per collection. I tried combining the two collections using Combine and setting a native collection limit to show items starting from position 101. The checkboxes display correctly, but the ones coming from the second list do not filter the target list.

In the example below, the first 4 models for the brand Rolls-Royce, which come from the first list, work correctly. Unfortunately, the others do not.

I’d really appreciate your help, as this is currently a major blocker for me.

2

Ok I managed to show all 161 items for Models with Load render-all attribute, but it still does not work. I paginated the collection due to the render-all requirements so the first page 100 items works properly. The rest that is rendered later does not.

3

@Support-Luis

I see that in the DOM the loaded checkboxes do not have unique ID and do not react with label changes (fs-filter-active) on being checked.

I am quite desperate to solve this issue, because it is crucial functionality on the website I work on. I would be very grateful for your help.

4

Hi @dzidek794!

First, add fs-cmsload-element = "list-2" and fs-cmsload-mode="render-all" to your filters list.

I made this script to prevent CMS Filter from loading until CMS Load is fully loaded.
Replace this snippet in the <head>.

<!-- [Attributes by Finsweet] CMS Filter (With preventload) -->
<script defer fs-attributes-preventload="true"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>

Then add this script before your </body> tag.

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('CMS Load Successfully loaded!');
      const listInstance = listInstances[1];
      async function processRenderingQueue() {
        try {
          // Await the fulfillment of the renderingQueue Promise
          // The result is an array of the items rendered
          const result = await listInstance.renderingQueue;
          console.log(result);

          window.fsAttributes.cmsfilter.init();
        } catch (error) {
          // Handle any errors that may occur during the execution
          console.error('Error processing renderingQueue:', error);
        }
      }
      
      processRenderingQueue();
    },
  ]);
</script>

I hope this solves your issue, let me know if you need any help!

5

@Support-Pedro

Thank you sir! That is look good. On the car list I made a workaround with native webflow lists. I am testing your code on the other page: Rims | MANSORY - Unique masterpieces that defy convention

Now it works properly however the issue that appeared is that the count results for filters works only after the first click on the filter, not immediately after load. I tried with chatGPT, but without success… Would be so kind and help also with that? I am very grateful for you help.

6

Hi @dzidek794,

Could you send me a Loom Video so I can take a look?
I couldn’t replicate the issue on my end.