Clear all filters in the second layer, but now I see a double flash

Attributes
1

Hi Finsweet Heroes!

I have a filter structure like this:

  • Category1
  • Category2
  • Category3
    • Subcategory1
    • Subcategory2
    • Subcategory3

The subcategories are in a dropdown, so they’re only visible when you click on the parent category.

With a script, I made it so that when you filter by Category3 + Subcategory2, and then click on Category2, the subcategories are cleared.

However, I’m seeing a double flash—once when clearing the subcategories and once when applying the filter. How can I prevent this double flash?

Here is my script (created with ChatGPT and some tips from this forum):

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsfilter',
  function (filterInstances) {
    // Controleer of de filter instances zijn geladen
    if (!filterInstances || !filterInstances[0]) {
      console.error('Finsweet Filter instance is not available.');
      return;
    }
    const filterInstance = filterInstances[0]; // Gebruik de eerste (en in jouw geval enige) filter instance
    console.log('Aantal filter-instanties:', filterInstances.length);
    // Selecteer alle categorie radioboxen
    const categoryRadios = document.querySelectorAll('.category-radio-selector');
    // Voeg een event listener toe aan het document
    document.addEventListener('change', function(event) {
      if (event.target.classList.contains('category-radio-selector')) {
        console.log('Category changed:', event.target.value); // Log de geselecteerde waarde
        // Reset alle subcategorieën zodra een categorie wordt geselecteerd
        filterInstance.resetFilters(['subcategories']);
      }
    });
  }
]);
</script>

Live url: https://designwolf-dev.webflow.io/
Read only link: Webflow - Designwolf

2

Hey @support1!

As you’ve correctly mentioned, the issue stems from this line: filterInstance.resetFilters(['subcategories']);.

It seems that the change event is triggering the callback twice, which is causing the double flash.

Could you clarify what you’re aiming to achieve with this functionality? I might be able to rewrite the code to eliminate the flashing issue.

3

Thank you for your response! I’ll try to explain it clearly:

Under one of the main categories in a dropdown, I have subcategories (see ‘Tentoonstellingen’). I want the subcategory filter (‘cultuur, geschiedenis, natuur’) to reset when a main category (‘interieur, producten’) is selected.

So, in summary: whenever you click on a main category, all subcategories should be reset.

Screenshot 2024-10-14 at 09.24.03
Screenshot 2024-10-14 at 09.24.03668×1028 38.3 KB

Your help is greatly appreciated. Thank you in advance!

4

Awesome, thanks! Can you please test this code?

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    function (filterInstances) {
      if (!filterInstances || !filterInstances[0]) {
        console.error('Finsweet Filter instance is not available.');
        return;
      }

      const [filterInstance] = filterInstances; // Use the first filter instance
      console.log('Number of filter instances:', filterInstances.length);

      // Select all category radio buttons
      const categoryRadios = document.querySelectorAll('.category-radio-selector');

      categoryRadios.forEach((radio) => {
        radio.addEventListener('click', (e) => {
          // Navigate up to the parent category item
          const categoryItem = e.target.closest('.w-dyn-item');

          if (categoryItem) {
            // Find the subcategory list within the same dropdown
            const subcategoryList = categoryItem.querySelector('.nav_project-filters_subsub');

            if (subcategoryList) {
              // Check if the subcategory list has any items
              const subcategoryItems = subcategoryList.querySelectorAll(
                '[fs-cmsfilter-field="subcategories"]'
              );

              if (!subcategoryItems.length > 0) {
                console.log('No subcategories found.');
                filterInstance.resetFilters(['subcategories']);
              }
            } else {
              console.log('No subcategory list found.');
              filterInstance.resetFilters(['subcategories']);
            }
          }
        });
      });
    },
  ]);
</script>
5

Whoop! The code works! Thank you so much!