CMS Filter API - Restart collection of filterable Props

Attributes
1

Hi,

I have a Collection List with over 300 Items. That’s why I am using load more attribute and the render all items properties.

For a functionality of my page I am waiting for the CMSList event additems. Whenever the Items are added after page load their id get matched with an array of ids. If that matching is true then I change the value of an Text Property. For this question, let’s say to save.

The Problem:
This way, only the 100 first items will be filtered correctly by the checkbox that looks for the save text to be there. That happens because I’m running the matching on page load, and every time items get added with the load more attribute.

The Analysis
CMS Filter is checking for the props of the items whenever they get loaded, so if these change after that the filter will not filter them correctly. Visually the Content looks correct, because it changes when they load, but the Filter stays uneffected of that.

The (possible) Solution
If there is a way to tell the CMS Filter to restart the “looking for” props for example on the renderitems event then i could make that work.

Looking forward for Ideas!

2

Hey @stoesselleon! Any code in the renderitems event will be executed each time new items are rendered on the page, you can call your looking function there for newly rendered items

3

Hi,

Thanks for the answer.

Unfortunately my Filter also does not work, when executed in renderitems.

Maybe you can check out the read-only link:
https://preview.webflow.com/preview/burgerfest?utm_medium=preview_link&utm_source=designer&utm_content=burgerfest&preview=64b56bd9a76204fbd807274b52722401&pageId=64242f8810573dc3e45ea7f6&workflow=preview

The Filter that is not working is the one called “Favoriten”. It should Filter all Items where you clicked the Heart Icon in the List. If you “heart” an item in the List, there is a hidden Text (the one it gets filtered for) that gets changed and the heart gets colored orange.

I think the Filters just don’t read the new values, when the change correctly because the Filter gets initializied before the values change.

4

Hello @stoesselleon, try this out

  • Move your code from the renderitems event to the additems event

  • Since you will now be listening to additem event, update this code snippet
    renderedItems.forEach(item => { programmItems.push(item.element.firstChild); }); registerClickListeners(programmItems); searchForLiked(programmItems);

    to

      addedItems.forEach(item => {
  programmItems.push(item.element.firstChild);
  	});
  listInstance.clearItems();
  registerClickListeners(programmItems);
  searchForLiked(programmItems);

    Take note that I added the line listInstance.clearItems();

  • You need to now add items back to the collection list using the method listInstance.addItems(newItems);, where newItems is the array of the modified items

5

Hi @josephmukunga

Thanks for the Input. Unfortunately this does not solve the issue.

This will just result in an empty collection list. As listInstance.addItems(newItems); will always retrigger the additems event and then the list will be cleared again.

If it will help your testing i could give you more then a read-only link of course.

6

The list is cleared by listInstance.clearItems();. Using listInstance.addItems(newItems); only adds items to the existing items. That’s why we clear them 1st. Check out how we implemented the example below where we get items from an API and populates the cms list to be filtered

Live site: External Data
Webflow read-only: Webflow - Attributes Examples
Source code: attributes-examples/src/cms/populate-external-data at master · finsweet/attributes-examples · GitHub

7

Hi @josephmukunga,

Thanks again, I will be trying to implement that.

In general, do you think it would be easier to remove items whenever they get liked and add them again? This way i wouldn’t need do clear the complete list over and over.

8

Unfortunately there isn’t