Pagination error when loading in webflow locales

Hello,

I have a project where I have Attributes v2 installed and I’m using Finsweet’s pagination and filters to show a list of articles, in the filters form I have another collection (categories) that serves as a filtering system to show only articles that match the selected category.

The issue is that although everything works fine in the main locale (Spanish) when I switch to any other locales the pagination functionality gets all messed up because instead of showing the next page of articles it shows the categories and only the first page of the pagination shows articles.

Here is the preview link of the project:

and here’s the live link with the error:

I recorded a video explaining everything here:

Hope you guys can help me. Thanks in advance.

Hey @aaron! :waving_hand:

We checked your setup and your attributes look correct — this isn’t a configuration error on your end. What you’re experiencing is a known interaction between Webflow’s localization system and Attributes v2.

What’s happening:

When Webflow switches between locales, it updates the page content in the DOM, but Attributes v2 may initialize before that update fully completes. This causes the script to work with the “old” locale’s content structure instead of the new one. That’s why everything works perfectly in your main Spanish locale (the first to load), but breaks when you switch to other locales.

We’ve helped with this before in a similar case where someone had pagination and search working in one locale but failing in others. The root cause was the same: localization timing.

The solution:

You’ll need to add a re-initialization script that forces Attributes to refresh after Webflow completes the locale switch. This script listens for the locale change and tells Attributes to re-index the page content.

Since the previous verified case used search+pagination and your setup uses filters+pagination with a dynamic categories collection, the script may need slight adaptation for your specific scenario.

Here’s what we’d recommend:

We can help you implement the re-initialization approach — if you can share a read-only link to your project, we can test it directly on your setup and make sure it works with your filter configuration too :folded_hands:

The categories collection you’re using for your filter radio buttons is a standard dynamic filter pattern — that setup looks good. The primary cause appears to be the localization timing, but if the re-initialization doesn’t fully resolve it, we can also investigate whether there’s any interaction with the secondary collection.

To clarify: The attributes we can see in your HTML are all correct:

  • fs-list-element=“list” on your blog collection ✓
  • fs-list-load=“pagination” for pagination ✓
  • fs-list-element=“filters” on your form ✓
  • fs-list-field=“category” and fs-list-value on your radio buttons ✓
  • fs-list-element=“page-button” for pagination buttons ✓

If the re-initialization approach doesn’t fully resolve it, we’ll loop in @Support-Luis or @Support-Pedro who have more experience with localization edge cases. Let us know how it goes or if you’d like us to provide the specific script implementation!

Hey @aaron

Try out this code in your Before </Body> tag custom code section

<script>
window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    "list",
    (listInstances) => {
      console.log("List Successfully loaded!");

      const [listInstance] = listInstances;

      // 1. Create a function to re-index the list
      const reIndex = async () => {
        console.log("Localization detected. Re-indexing Finsweet...");
        // We destroy the store and re-run the internal init
        listInstance.triggerHook('start');
      };

      // 2. Setup a MutationObserver to watch for text changes
      // This detects when Webflow swaps English text for Localized text
      const observer = new MutationObserver((mutations) => {
        observer.disconnect(); // Only need to trigger this once
        reIndex();
      });

      // 3. Start observing the first item's title
      const firstItemTitle = document.querySelector('[fs-list-field="name"]');
      if (firstItemTitle) {
        observer.observe(firstItemTitle, { 
          characterData: true, 
          childList: true, 
          subtree: true 
        });
      }

      // Fallback: If no mutation happens in 1 second, re-index anyway
      setTimeout(() => {
        observer.disconnect();
        listInstance.triggerHook('start');
      }, 1000);
    },
]);
</script>

Thanks @Support-Finn for the very detailed explanation. I’ll standby and wait what @Support-Luis and @Support-Pedro suggest.

@jesse.muiruri I’ve tried your code but the problem still persists.

Hello @Support-Finn

Do you have an update on this regard? I shared the preview link in the original post.

Let me know, thanks.

Hey @Support-Finn is there any chance you can take a look at this? Thanks.

Hi @aaron

I’ve re-checked the site

There’s this code

window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmslist',
  (listInstances) => {
    removeNonMatchingLanguages(); // runs after Finsweet has indexed everything
    
    const [listInstance] = listInstances;
    listInstance.triggerHook('start'); // re-index after DOM cleanup
  }
]);

It’s all v1 and so it’s never triggered

Replace with this

 window.FinsweetAttributes = window.FinsweetAttributes || [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      removeNonMatchingLanguages();
      const [listInstance] = listInstances;
      listInstance.triggerHook('filter'); // re-evaluates items after DOM cleanup
    }
  ]);

Then comment out this line

document.addEventListener('DOMContentLoaded', removeNonMatchingLanguages);

Finsweet will call your callback after it has fully initialized

Also as a sidenote make sure all articles have their wf-lang="" populated with the correct lang

Let us know!