CMS Filter - Is it possible to add a few items to a filtered list, that listen to the exact opposite of the active filters?

Hi, I can imagine the title is a bit vague, so here’s some context: We are currently working on a website for a client where students can discover various courses and obtain more information about them. We have created several filters for this purpose. Everything is functioning properly, but we would like to incorporate an additional feature that I’m struggling with: every 10th card in the list, should be an ‘outside of your comfort zone’ card. The idea behind this is to offer students something that falls precisely outside their applied filters.

My idea was to populate a second list with items from the CMS and attach a second filter group to it. This second filter group would have the exact opposite checkboxes checked compared to the first one. This way, you would have a second list containing precisely the items that fall outside the applied filters. I managed to make this work in the testing environment below, but I’m struggling to combine the two lists. If I do this, I can no longer filter the two collections separately.

My question is, is this functionality and my approach even possible within Finsweet? Or do you have any ideas on how it could be done better/more elegantly?

Thanks in advance, and I look forward to hearing from you!

https://preview.webflow.com/preview/cms-sort-and-combine-and-randomize?utm_medium=preview_link&utm_source=designer&utm_content=cms-sort-and-combine-and-randomize&preview=d95839dd2f1f2810c76cc917ef458aee&pageId=65ba45229bc09c4c8867ea7d&locale=en&workflow=preview

Hey @studiopiraat! There is no native solution for this at the moment. However, we can add some custom JS that could achieve what you are looking for. Let me try some things and I’ll get back to you :wink:

Thanks a lot, Luis! If you need any additional info, please let me know!

Hey @studiopiraat! No worries! The setup is fine as is. I have some progress but I’m 100% done. I’ll let you know when something useful is done :wink:

Thanks for your effort and the update @Support-Luis!

Hey @studiopiraat! Sorry for the delay.

Can you please test this script? You’ll need to add more items to the first list to fully see the suggested elements working as expected.

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

      const primaryListInstance = filterInstances[0].listInstance;
      const suggestedListInstance = filterInstances[1].listInstance;

      let suggestedCards = [];

      function createStaticItems(element, index) {
        return {
          itemElement: element,
          targetIndex: (index + 1) * 2, // Starting from index 1, add 2 spaces for each item
          interactive: false, // Set to true if the structure should be interactive
        };
      }

      function addStaticItemsToList(listInstance, cards) {
        cards.forEach((card, index) => {
          const staticItem = createStaticItems(card, index);
          console.log(staticItem);
          listInstance.addStaticItems([staticItem]);
        });
      }

      function updateStaticItemsFromRenderedItems(renderedItems) {
        suggestedCards = renderedItems.map((item) => item.element);
        addStaticItemsToList(primaryListInstance, suggestedCards);
      }

      filterInstances[1].listInstance.items.forEach((item) => {
        suggestedCards.push(item.element);
      });

      addStaticItemsToList(primaryListInstance, suggestedCards);

      suggestedListInstance.on('renderitems', updateStaticItemsFromRenderedItems);
    },
  ]);
</script>

You, sir, are a true Finsweet king! The script works like a charm on our test page. Now I just have to implement it in our actual client website. And no problem at all that it took a bit longer; I’m aware it was a rather unusual and pretty demanding request. Thanks again for your hard work! :pray:

Great to hear! Let me know if you need me to add anything else or if some bug appears somewhere!

I would love to see the final implementation! :raised_hands: