Filter on Form Submit

Attributes
1

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

2

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.

3

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

4

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>
1 Like
5

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
6

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
7

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