Filter on Form Submit

I want my Collection List to be filtered when the “Apply Filters” button is clicked. From my understanding there just needs to be an instance of a Form Submit button in your filter list. Right now, with the button inside a Modal, the filters are live.

Also, is it possible to have a scroll anchor for CMS-Load only? My scroll anchor for CMS Load also anchors whenever someone filters and that’s causing lots of unwanted jumping around.

The collection I’m working on is on the Collection page.

READ ONLY LINK

Hey @foley.patrick.gerard! Could you share a live link please?

Regarding the submit button, that is correct. No extra setup is required as long as the button is present.

Thanks, Luis. https://patrick.webflow.io/collection

Hey @foley.patrick.gerard! I’ll keep checking the issue of the submit button, my guess is as it is “hidden” within the modal the script does not recognize it and defaults to immediate filtering.

For the anchor scrolling only for CMS Load, we will need to use some custom code as both Attributes share the same trigger for scrolling.

You can remove the fs-cmsload-element = anchor-scroll attribute from the setup and use the code below

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

      const [listInstance] = listInstances;

      const anchorElement = document.getElementById('s-collection'); // Keep or change ID as needed

      listInstance.on('switchpage', () => {
        anchorElement.scrollIntoView({
          behavior: 'smooth', // You can use "auto" instead of "smooth" for instant scrolling
          block: 'start', // You can use "center" or "end" if you want to adjust the scroll position
        });
      });
    },
  ]);
</script>

Oh good point. I could go back to just hiding the modal out of view and not display: hidden. I’ll give that a shot. Thank you. I also appreciate the extra code! I’m going to give that a shot as well. This was super helpful. Thank you so much for your efforts!

1 Like

Both solutions seemed to have worked! I’ll come back if anything else happens but I’ve got a good grasp on the situation now and think I’m good to go. Thanks again!

1 Like

Great to hear and always happy to help! :muscle: