Query Parameters in new List Load attributes bug: when going back from a second page, it doesn't load the first page

Finsweet Components
1

Description

Good morning!

I have added the new attributes to the Blog CMS page and especially the Query Parameters, so that the URL updates with the filters and the page number.

The problem is when you apply filters or go to the second page of the CMS Collection, if I press back in my browser it navigates me to the last page that I was, not on the same page with the previous filters selected.

Site URL

Required: Please provide a staging/production URL where we can see the issue

Steps to Reproduce

  1. Go to blog page
  2. Select some filters and go to the second page of the CMS
  3. Press back in your browser

Expected Behavior

When I am on the second page of the CMS (and the URL updates), when I press back I want to be navigated to the first page, before selecting any filters.

Actual Behavior

It navigates me to the last page that I was on, forgeting about the CMS filters and/or pagination that I have selected.

Video/Screenshots

Required: Please provide a short screen recording showing the issue

2

Hi @sccurelaru1!

We need to use the CMS filter API to re-apply filters whenever the user navigates

Add this script to your page settings at the ‘Before </body> tag’ custom code section

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsfilter',
  (filterInstances) => {
    // 1. Get the filter instance from the page
    const [filterInstance] = filterInstances;

    // 2. Listen for the browser's back/forward button (popstate)
    window.addEventListener('popstate', () => {
      // 3. Tell Finsweet to read the new URL and update the list
      // The timeout ensures the browser has finished updating the URL
      setTimeout(() => {
        filterInstance.applyFilters();
      }, 100);
    });
  },
]);
</script>
3

Hi @jesse.muiruri, thank you very much for your response!

I added your script and it is published here on staging: Blog
Surprisingly it’s working on Mozilla, but not on Chrome. On Chrome it keeps the filters applied, but not the pagination.

Would you know what would be the problem please?

4

Hi @sccurelaru1

Try replace that script with this one to accommodate Chrome

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsfilter',
  async (filterInstances) => {
    const [filterInstance] = filterInstances;
    
    // Get the CMS Load (Pagination) instance
    const loadInstance = await window.fsAttributes.cmsload.init();

    window.addEventListener('popstate', () => {
      // 1. Small delay to let Chrome finish updating window.location
      setTimeout(() => {
        // 2. Re-apply filters
        filterInstance.applyFilters();
        
        // 3. Specifically tell the pagination to sync with the new URL
        if (loadInstance && loadInstance.pagination) {
          loadInstance.pagination.render();
        }
      }, 150); 
    });
  },
]);
</script>
5

It’s still not working unfortunetaly. After some testing I figured that on Mozilla it works regardless if the code is present or not. It seems to be a problem specifically with Google Chrome.

6

Try this

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsfilter',
  async (filterInstances) => {
    const [filterInstance] = filterInstances;
    
    // 1. Wait for the CMS Load (Pagination) to be ready
    const loadInstance = await window.fsAttributes.cmsload.init();

    const handleBackNavigation = () => {
      // Small delay to ensure Chrome has updated window.location.href
      setTimeout(() => {
        // 2. Force the filter to re-read the URL query params
        filterInstance.applyFilters();
        
        // 3. Force pagination to sync and re-render the correct page
        if (loadInstance) {
          loadInstance.resultsInstance.render();
        }
      }, 50);
    };

    // Listen for back/forward
    window.addEventListener('popstate', handleBackNavigation);
  },
]);
</script>

Also on your Collection List settings, make sure “Show page count” is checked. Even if you hide the page count with CSS (display: none), Finsweet needs it active in the DOM to handle back-button logic correctly in Chromium browsers.

7

Unfortunetaly still not working. I can see the good link loading (with the page number selected) and then immediately changing to the first page. It is really weird.

“Show page count“ was already checked for faster loading time of the CMS items.

8

Hi @sccurelaru1

Not sure how far you’ve got with this

Unfortunately I have to take a pause at the moment since I’ve just been informed Attributes support is exclusive to Finsweet+ users