Input Counter + CMS Filter

Attributes
1

I have a site using FS Input Counter with FS CMS Filter. Changing the input value manually filters well but using the + and - buttons doesn’t trigger filtering.

Is there a setting to make that happen?

https://sail-luna.webflow.io/test

2

hey @memetican! Can you add this code to your page?

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'inputcounter',
    (counterInstances) => {
      console.log('inputcounter Successfully loaded!');

      const counterButtons = document.querySelectorAll('.fs_inputcounter-1_button');
      const counterValue = document.querySelector('.fs_inputcounter-1_input');

      counterButtons.forEach((button) => {
        button.addEventListener('click', () => {
          counterValue.dispatchEvent(new Event('input', { bubbles: true }));
        });
      });
    },
  ]);
</script>
1 Like
3

Thanks as always Luis! That works elegantly for responding to the increment/decrement changes.

We’ve found another issue that may or may not be related which is that the initial value set for the Input Counter ( of “2” ) isn’t applied as a default filter setting.

I tried the obvious fix which is to duplicate the counterValue.dispatchEvent code outside of the forEach, so that it executes once as soon as inputcounter is initialized. It’s not working though, I suspect because FS Filter may not be initialized at that point?

4

Hey @memetican! The test page is now blank. Where could I find the component to test?

5

I can see it fine, here- she might have been experimenting. Webflow also seems to be glitching today with 404s on staging.

https://sail-luna.webflow.io/test

6

Hi Luis any thoughts on how to best approach this one?

7

Hey @mwe! I am sorry for not getting back to you earlier!

This should fix the issue now, we are dispatching a new event to the value after CMS Filter is done loading and also adding the event listeners for the buttons as we did before:

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const counterButtons = document.querySelectorAll('.fs_inputcounter-1_button');
      const counterValue = document.querySelector('.fs_inputcounter-1_input');

      counterValue.dispatchEvent(new Event('input', { bubbles: true }));

      counterButtons.forEach((button) => {
        button.addEventListener('click', () => {
          counterValue.dispatchEvent(new Event('input', { bubbles: true }));
        });
      });
    },
  ]);
</script>
2 Likes
8

Thanks Luis! Works perfectly.

1 Like