Enhancing User Experience with Filtered Results

[Support-Luis]

@sitegrowteam the error is here, you are using fs-countitems-element which is another solution on its own → Count List Items - Count the number of items in a Webflow CMS Collection List

CMS Filter has this option by default, please change the attribute in the picture below to fs-cmsfilter-element="items-count"

Let me know if this makes sense!

[sitegrowteam]

Hey @Support-Luis,

It works just fine now! It seems I mixed up the attribute values a bit.

Thanks a lot!

[sitegrowteam]

Hey @Support-Luis,

Could you please take a look at an issue I’m encountering with the range slider filter for the price field? The slider itself functions correctly, but there’s a problem with the filtration. Instead of providing results based on the range between the two handles, it only gives results based on the exact position of the handle. Can you check this out?

Read Only: Link
Live Link: Link

Thanks!

[sitegrowteam]

Hey @Support-Luis, just following up on my previous message about the range slider filter issue. Could you take a look? Thanks!

[Support-Luis]

Hey @sitegrowteam! This value should be set to to you have the from attribute repeated on both inputs.

Let me know if this solves the issue

[sitegrowteam]

Hey @Support-Luis,

Just a little error on my part. However, that doesn’t seem to be the problem. I fixed it on the Our Fleet page, but the issue still persists.

Thanks for your help!

[Support-Luis]

@sitegrowteam, great rabbit hole you just sent me down haha, can you try moving the collection list outside of the form element?

This seems to work on my end, please let me know if it works on yours!

[sitegrowteam]

Hey @Support-Luis,

I apologize. I added everything into a form block because I tried to follow what was done in THIS tutorial, where if I’m not mistaken, a form element covered everything. I didn’t realize this would cause the price filter not to work. The idea was to allow me to place more filters anywhere I want. It works perfectly now.

Thanks very much!

[Support-Luis]

Great to hear! Let me know id you need any more help!

By the way, all of the tutorials are going to be reworked and updated soon

[sitegrowteam]

Hey @Support-Luis,

That’s great to hear! Thanks again.

[sitegrowteam]

Hey @Support-Luis,

Could you please help check why my home page filter isn’t working properly? I used the previous code you provided but made some changes, so I’m sure there’s an error in my code. I have just one field for now, which is the search field.

Here’s what’s happening:

• When I click on the search button without typing anything in the search input field, it leads me to the intended destination page, “Our Fleet”.

• However, when I type something in the search input field and click on search, the content of the search field gets appended to the URL, causing a redirect to a 404 (page not found).

• Lastly, the default form submission isn’t prevented because I receive submissions after clicking on search.

Here’s my code on the Homepage:

<!-- Home Page Search Filter -->
<script>
    document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('home-search-form');
    const input = document.getElementById('filter-search-field');

    form.addEventListener('submit', (e) => {
      e.preventDefault(); // Prevent default form submission

      const inputValue = input.value;
      const queryParam = inputValue ? inputValue.replaceAll(' ', '+') : '';

      let url = '/our-fleet';

      if (inputValue) {
        url += (url.includes('?') ? '&' : '') + '*=' + inputValue;
      }

      // console.log(url); // For testing
      window.location.href = url; // Uncomment this line to redirect to the constructed URL
    });
  });
</script>

Here’s my code on the “Our Fleet” page:

<!-- Handling Search Input From Home Page-->
<script>
    window.fsAttributes = window.fsAttributes || [];
    window.fsAttributes.push([
      'cmsfilter',
      (filterInstances) => {
        console.log('cmsfilter Successfully loaded!');
        document
          .querySelector('[fs-cmsfilter-field="*"]')
          .dispatchEvent(new Event('input', { bubbles: true }));
      },
    ]);
  </script>

Here’s my Read-Only
Here’s the Hosted Link

Thanks!

[Support-Luis]

Hey @sitegrowteam! I recently found out that if we are only going to use one input we can do this natively with the Form actions.

Here is how to do it:

1. Set the form action to your target page
   

   

2. Set the name of the field to match your identifier on the target page
   

   
   

And that should be it!

We apparently don’t need the extra code on the target page but please try this out and let me know how it goes!

[sitegrowteam]

Hey @Support-Luis,

Amazing! This works perfectly. This will be sufficient for now that I am only going to use one input. If I need to add more inputs, I will let you know.

Thank you!