CMS Filter + Query Params

General
1

Hi,
i don’t know if it’s possible but i was trying to combine the query parameter tools and the filtering tool.

Ideally i want to flag a checkbox based on the query parameter but even using a texfield would be ok.

I’m now pre-populating the textfield used to filter all the fields (filter = *)
The query parameter appears correctly inside the textfield but the filter does not start. if i type a single letter everithing works. how do i trigger the filtering right after the loading and using the query parameter pasted into the textfield?

2

Hey @gianluca! You’ll need to simulate a user input. This can be done easily with this code snippet

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      const searchInput = document.querySelector('#YOUR_FIELD_ID or .FIELD_CLASS');
      searchInput.dispatchEvent(new Event('input', { bubbles: true }));
    },
  ]);
</script>

Simply modify the query selector to correctly select your input and all should work :wink:

1 Like
3

thanks, i’ll try it out and will let you know

4

I am trying to do something similar.

I have a Search in the Navbar, so when anyone searches, he is taking to Search page, where I have a query, ie:
https://cms-trials.webflow.io/search?query=lorem

Then I have the Webflow Search result

I have also added there a filtering by Search and Radiobutton.

What I want to do is to take the parameter from the query and when this Search page is loaded have that search for the Collection list where I have the filtering

I added the script but not working:

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      const searchInput = document.querySelector('#field-2');
      searchInput.dispatchEvent(new Event('input', { bubbles: true }));
    },
  ]);
</script>

Here a preview of my project
https://preview.webflow.com/preview/cms-trials?utm_medium=preview_link&utm_source=designer&utm_content=cms-trials&preview=5a0e2fcccead3989286f8549aacd32fa&pageId=63d2b3764fa61af5b25f599b&workflow=preview

Any help is welcome

5

Hey @fernandocomet! So, CMS Filter is smart enough to prepopulate the filters on the page based on the query, meaning, this ?query=lorem&*=designers&identifier=Category4 will populate Webflow’s search input, the text input used by Attributes and check the corresponding radio.

If you were to only use ?query=lorem this would prevent the Attributes search bar from being populated by us. One workaround for this would be to mirror the input from the first input into the second and then dispatching the event.

Let me know if this makes sense and which approach you would like to take. I’ll gladly help you!