Input Counter + CMS Filter

Design help CMS
1

I’m working on a custom pricing section for a client using CMS.
I would love to use an input counter so user can select the number of people of in their group and then see the packages available. I’m using Finsweets’ CMS filter for this, but unfortunately I cannot get it to work with the input counter. Any ideas of what could be happening/ possible solutions?

Thank you!

Here is my public share link: Webflow - Sail Luna

2

Hi Ana,

Your input counter is setup well, and so is filtering. If you edit the number field manually and hit enter you’ll see the filtering happen. It’s just not getting automatically triggered when you hit the + and - buttons.

FS may have a setting or configuration for this, so I’ve dropped them a message to ask. If not, it’s possible to trigger filtering manually with JS, but hopefully that’s not necessary. I’ll circle back when they reply.

1 Like
3

Hi Michael,

Thank you so much!! Fingers crossed there’s a workaround!

4

Well, it’s as I feared, there isn’t a setting to make the Input Counter “filter aware”.
But Luis at FS support shared some code to try.

If you use FS products regularly I highly recommend you join FS+ for their ace support and additional resources.

<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>

You can follow the thread here-

5

Thank you so much!!! I really appreciate the help. It works perfectly when I press the buttons now, but it still doesn’t filter when I first open the page according to the initial input I included. Is there a way to make that happen?

I will definitely look into FS+! I really love their resources.

6

Hi Ana, I’ve added that to the FS ticket, I suspect Filter doesn’t pick up the value because of an initialization timing issue between the two libraries.

Likely there is a separate piece of code you’ll need to handle filter init and have it re-query the filter fields for their settings.

1 Like
7

Just got a message from Luis that the page was blank, but I’m seeing it OK.
Do you want to join FS+ and jump in on the ticket?

1 Like
8

So sorry about that! Will do!! Thank you so much!

9

Adding the second feature to the record;

<script>
  window.fsAttributes = window.fsAttributes || [];

  // Apply the initial input counter value as filter state
  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 }));
        });
      });
    },
  ]);

  // Handle filter updates on increment / decrement 
  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
10

Thank you so much Michael!!!

1 Like