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

Attributes
1

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

2

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:

3

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

4

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:

5

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

6

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>
7

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:

8

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:

9

Hi @Support-Luis, first of all, thanks again for your script! With my previous set-up, which had only 10 items, it seemed to work fine. I now retrieve items from another collection in the CMS, which has 31 items. The few first clicks still seem to work fine, but after checking +/- 6 filters, the white items start to reduce instead of add up. Also, I get this error in my console sometimes:

cmscore.js:2 Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
at https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmscore@1/cmscore.js:2:5870

I also ran into another issue, which can be easily reproduced: when you check three filter checkboxes, a static item will be added as intended, for example ‘Machine Learning’. However, if I check the filter box for ‘Machine Learning’ it will still show up, even though it’s unchecked now in the second filter group.

I hope you can find some time to have another look at this!

Thanks in advance :slight_smile:

10

Hey @studiopiraat! Is there a way I can see the actual setup? It may be easier to debug that way. You can DM me the link if you’d like :slight_smile:

11

Hi @Support-Luis, I’ve been out sick for quite some time, but I just sent you a DM with the links!

12

Answered!

13

Hi @Support-Luis, thanks! However, I can’t seem to find where these DM’s are located? Am I completely missing something here? Thanks in advance!