How do i clear everything except one engaged filter?

Attributes
1

Hello!

I have a search filed and a search clear button, and I also have category filters. I want the clear button to clear everything EXCEPT the engaged category filter. I have tried using fs-cmsfilter-clear=[all identifiers listed here except Category] and it breaks the whole thing… How do have my clear button clear everything but not the engaged Category filter?

https://preview.webflow.com/preview/conors-fabulous-furniture-reference-cms?utm_medium=preview_link&utm_source=designer&utm_content=conors-fabulous-furniture-reference-cms&preview=d7e95067f2cdfcb7a3d3fb9eac6ac5c3&workflow=preview

Thanks @Support-Luis !

2

Hey @conormckiernan! I’m afraid we don’t have this natively for CMS Filter, however, we can add some custom code on top of the solution to achieve this.

You’ll just need to:

  1. Remove the fs-cmsfilter-element = clear and the fs-cmsfilter-clear=[all identifiers listed here except Category] from your clear button
  2. Add an id such as reset to this element
  3. Add the following code to the </body> tag on your custom code section of the page
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;
      const resetButton = document.getElementById('reset');

      // Function to save the selected radio button to localStorage
      function saveSelectedRadio() {
        const selectedRadio = document.querySelector('input[name="Radio"]:checked');
        if (selectedRadio) {
          localStorage.setItem('selectedRadio', selectedRadio.id);
        }
      }

      // Function to load the selected radio button from localStorage
      function loadSelectedRadio() {
        const selectedRadioId = localStorage.getItem('selectedRadio');
        if (selectedRadioId) {
          const selectedRadio = document.getElementById(selectedRadioId);
          if (selectedRadio) {
            selectedRadio.checked = true;
          }
        }
      }

      resetButton.addEventListener('click', () => {
        saveSelectedRadio();
        filterInstance.resetFilters();
        loadSelectedRadio();
      });
    },
  ]);
</script>

Let me know how it goes! :muscle: