Difficulties with implementing CMS Select & Filter

Attributes
,
6

Thank you for the video @Vible!

I’m afraid we cannot do this with CMS Filter, however, I’ve written some code that should achieve what you are trying to do. You can test it in a very simple, rough setup here → Range Slider

The only change needed to your setup would be adding the category of the event as a dynamic attribute with the name data-category

Screenshot 2024-12-09 at 16.15.01
Screenshot 2024-12-09 at 16.15.011920×1096 121 KB

And adding the following code to the </body> section in the page’s custom code

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsselect',
    (listInstances) => {
      console.log('cmsselect successfully loaded!');

      const eventSelect = document.querySelector('[fs-cmsselect-element="select"]');
      const opleidingSelect = document.querySelector('[fs-cmsselect-element="select-2"]');
      const listInstance = listInstances[1];
      const { items } = listInstance;

      const placeholder = document.createElement('option');
      placeholder.value = '';
      placeholder.textContent = 'Select one...';
      placeholder.selected = true;

      eventSelect.addEventListener('change', ({ target }) => {
        const selectValue = target.value;

        const filteredItems = items.filter(({ element }) => {
          if (!selectValue) return true;
          const textValue = element.querySelector('[fs-cmsselect-element]');
          return textValue?.getAttribute('data-category') === selectValue;
        });

        opleidingSelect.innerHTML = '';
        opleidingSelect.appendChild(placeholder);

        filteredItems.forEach(({ element }) => {
          const textValue = element.querySelector('[fs-cmsselect-element]');
          if (textValue) {
            const optionElement = document.createElement('option');
            optionElement.value = optionElement.textContent = textValue.textContent.trim();
            opleidingSelect.appendChild(optionElement);
          }
        });
      });
    },
  ]);
</script>

Let me know if you have any questions or issues setting this up!

1 Like