Fs-list search not working properly with pagination & multiple languages (Webflow Localization)

Consent Pro
,
1

Description :

Actually it is in the “Attributes” category but I cannot choose it because it’s in “read-only” mode..

Hi Finsweet team :waving_hand:

I’m facing an issue with fs-list search + pagination on a multilingual Webflow site, and after several attempts I can’t get a reliable behavior. I’d love your input in case I’m missing something or if this is a known limitation.

Context :

  • Webflow CMS

  • Webflow Localization enabled

  • Main language: English

  • Secondary languages: French, Spanish, Italian, Dutch

  • Using Finsweet Attributes v2

  • Feature used: fs-list (search + pagination)

  • No alpha filter on this page (simple search only)

Setup :

  • A Form with:

    • fs-list-element="filters"

  • Search input with:

    • fs-list-field="*"

    • fs-list-operator="equal"

    • fs-list-fuzzy="20"

  • A Collection List with:

    • fs-list-element="list"

    • fs-list-load="pagination"

  • Each Collection Item contains:

    • A visible title with fs-list-field="title"

    • A second text field called hidden-title

      • Same title but without accents

      • Visually hidden using display:none

      • Attribute: fs-list-field="hidden-title"

The idea is to allow users to search with or without accents.

Expected behavior :

  • Search should:

    • Work across all pages (pagination)

    • Return results regardless of accents

    • Work consistently in all languages

Actual behavior :

  • Everything works perfectly in English

  • In other languages:

    • Search often returns no results

  • The same CMS structure and attributes are used across all locales

What I already tried :

  • Ensuring identical DOM structure across languages

  • Making sure hidden-title exists and is filled for every locale

  • Trying another method without using display: none but using a CSS utility class visually-hidden with these elements :

    <style> .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } </style>

  • Testing different operators (contains, equal)

  • Increasing fs-list-fuzzy

  • Verifying that filters and list are not duplicated per language

My question :

  • A known limitation of fs-list with Webflow Localization?

  • Or is there a recommended approach to make search + pagination work reliably in multilingual setups, especially with accent normalization?

Any guidance, workaround, or confirmation would be super helpful :folded_hands:
Thanks a lot for your time and for the amazing tools!

Site URL

Steps to Reproduce :

  1. In the english version, try typing “José”, “josé”, “jose” or any other word containing accents in some articles’ titles, and it works.
  2. Then go to the french version, type the same thing, you’ll have the correct article filtered. Then try the same words without accents and… nothing happens.. only no results.

Screenshots :

2

Hey @bechir!

You’ve done some impressive troubleshooting on this multilingual search issue

This looks like an edge case where Webflow Localization and fs-list search functionality aren’t playing nicely together. The localization system might be affecting how fs-list indexes searchable content across different language versions

You should try force re-initialization

Sometimes Finsweet initializes before Webflow has fully swapped the localized content in the DOM. Add this script to your Before body tag to ensure the CMS library resets when the locale changes or the page loads:

window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsload',
  (listInstances) => {
    // This ensures the list is fully indexed in the current locale
    console.log('CMS Load initialized in current locale');
  },
]);

window.fsAttributes.push([
  'cmsfilter',
  (filterInstances) => {
    // Force a data refresh for the search engine
    const [filterInstance] = filterInstances;
    filterInstance.storeInstance.updateData();
  },
]);
3

Hi @jesse.muiruri !

Thanks for the suggestion :slight_smile:
I tried this approach, but unfortunately it doesn’t seem to resolve the issue.
From what I can see, updateData() doesn’t re-scan the DOM, and fs-list still appears to rely on the initial index built before Webflow localization swaps the content.

This would suggest a deeper limitation with fs-list + Webflow Localization timing rather than a simple reinitialization issue.

Is there currently any supported way to force fs-list to re-index CMS content after localization has been applied?

4

Hi @bechir

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

Try this code in the meantime

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsfilter',
  async (filterInstances) => {
    const [filterInstance] = filterInstances;
    const listElement = filterInstance.listInstance.list;

    // 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
      await filterInstance.init(); 
    };

    // 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 = listElement.querySelector('[fs-list-field="title"]');
    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();
      filterInstance.init();
    }, 1000);
  },
]);
</script>