Fs-cmsfilter-showquery remembers, but doesn't load Search field

Attributes
,
1

This page has multiple blog posts where users can search, filter, and click on blogs. They should be able to come back and the information they’ve already entered is saved and the location in the CMS list is the same.

I’m having an issue where I set up the cmsfilter to write all filter data into the URL using cmsfilter-showquery so it will remember the information when you come back from a blog. However, the CMS cards just ignore the search filter. (The other filters work correctly with showquery, it’s just the search bar)

If someone could help me figure out how to solve this, that would be an enormous help!

Example:

I enter “3D Print” into the search field. The URL updates and content are updated according to the plan:

finsweet-support-1
finsweet-support-11495×597 278 KB

I click on one of the blogs:

image
image1488×55 3.25 KB

I click the back button. The query param is still in the URL, and loads the correct text into the search filter, but the cms content resets and is no longer being searched by the search filter.

image
image1490×605 141 KB

Here is my read-only link:

https://preview.webflow.com/preview/fluxspace?utm_medium=preview_link&utm_source=designer&utm_content=fluxspace&preview=1af32dba4a16c5ce09da5a966cb8b63b&pageId=6488c123dfc59607019a5158&workflow=preview

Here is the live site too:

2

Hey @jay! We can dispatch an input event once the page loads and this should fix the issue.

Here is the code needed to dispatch the event after CMS Filter is done loading, please add it to your </body> section of the custom code!


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

      document
        .getElementById('search-field-2')
        .dispatchEvent(new Event('input', { bubbles: true }));
    },
  ]);
</script>
3

Hey @Support-Luis! Wow, that worked perfectly! I uploaded and tested it and the Search field is now working properly.

However, I’ve now run into another issue with cmsload-showquery not remembering the correct page. On back, It seems to reset to page 1 when any of the filters are selected, even the checkboxes. It seems like the cmsload-showquery only works properly when none of the filters are selected.

4

Hey @jay! I’m afraid the combination will not work if you intend to share a link like this: https://www.fluxspace.io/resources?category=Blogs%2CTutorials%2CInterns&994da820_page=2.

The list will be filtered on load, displaying the first page of the results. This will reset the pagination query parameter to 994da820_page=1.