Difficulties with implementing CMS Select & Filter

Attributes
,
1

Hello Finsweet team,

I am currently working on a Webflow website for a client and would like to use your Finsweet attributes, specifically the CMS Filter and CMS Select attributes. I am trying to create a registration form where users need to filter twice through a select element.

My client offers different services, such as courses, workshops, and events. In the registration form, I want users to first select a category (e.g., ‘Courses’ or ‘Workshops’). Based on this selection, specific options should then become available, such as the different courses within that category. Additionally, the user should be able to select a specific start date for the chosen course.

My question is whether this is possible with Finsweet’s CMS Filter and CMS Select attributes. I have tried to implement this, but I couldn’t get it to work as intended. If this is not possible with your attributes, could you perhaps recommend an alternative solution?

Thank you very much in advance for your help!

Best regards,
Micky

2

Hello Micky!

This should be possible with some extra JS, you can add any code to the solutions with the API, this should let you filter the second Select element based on the first Select’s value.

I can help with this code if you need me to, if so, can you please share your read-only link?

3

Hello Luis,

Thank you for your response! That sounds like exactly what I need. I would appreciate your help with the code. Here’s the read-only link: Webflow - Vidarte.nl 2.0.

Please let me know if you need any additional information!

Best regards,
Micky

4

Hey @Vible!

Could you please record a quick loom on the desired process or flow expected? As in, what options should show which options on the next select options and so on.

5

Hi Luis!

I’ve made a recording with Loom. I hope this recording helps with understanding the process I’m looking for! If you need more information, please let me know.

Best regards,
Micky

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
7

Hi Luis,

Excellent! This set-up works for me, thank you very much. Is it also possible to use this code for filtering the starting dates in the third select field based on the input of the second select field? If so, what do I need to change in the code if its necessary?

Best regards,
Micky

8

Hey @Vible! Great to hear this works for you! :muscle:

We can use a similar approach for the date filtering, you’ll need to replicate the steps of adding the date as a data-attribute and filtering the items of that Select instance.

I can help you out with the code if you need me to! Just let me know when the date attribute has been added

9

Hi Luis,

I have added the data-attribute to the date items and made an attempt to change a bit of the code.

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

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

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

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

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

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

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

I feel like I’m close, but I’m still overlooking something.

Best regards,
Micky

10

Hey @Vible!

I’ve reworked the code a little for it to work as it should, there was an error in selecting the correct list instance. Please test and let me know if any changes need to be made

<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 startdatumSelect = document.querySelector('[fs-cmsselect-element="select-3"]');

      const listInstance = listInstances[1];
      const startdatumListInstance = listInstances[2];

      const { items } = listInstance;
      const { items: startdatumItems } = startdatumListInstance;

      const createPlaceholder = (text) => {
        const placeholder = document.createElement('option');
        placeholder.value = '';
        placeholder.textContent = text;
        placeholder.selected = true;
        return placeholder;
      };

      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(createPlaceholder('Kies een optie...'));

        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);
          }
        });
      });

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

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

        startdatumSelect.innerHTML = '';
        startdatumSelect.appendChild(createPlaceholder('Kies een optie...'));

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

Hi Luis,

Thank you so much that did the trick! It is working perfectly fine.

Best regards,
Micky

1 Like
12

Hi Luis,

I want to thank you again for the code you provided, it helped me greatly. However, due to this code, I’m unable to receive submissions through this form. I suspect that the issue might be related to the Finsweet CMS Select attribute, because submissions do work with another registration form where the input of the select field is populated with CMS content using a different code.
Could you please help me with this issue?

Best regards,
Micky