Translate back to english before sending the search parameter using weglot

Question

I am using Weglot in my single-page application (Angular). The following code adds a language switcher in my application on all pages.

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
    Weglot.initialize({
        api_key: 'YOUR_API_KEY'
    });
</script>

Initially, the application is rendered in English and the user can switch it to any other language using language switcher. Now, there is some data displayed in an angular grid that has a search option to perform server side search.

Let's say the user has switched from 'English' to 'French'. There is a word 'Submitted' which is translated to 'Soumis'. The user is trying to search the word 'Soumis' in the search box. As soon as the user stops typing, there will be an API call sent to the server to fetch the results according to the search criteria. I want to translate back 'Soumis' to 'Submitted' before making the API call. The weglot provides APIs for doing this by using the translate function.

Weglot.translate(
    {
    'words':[ { "t":1,"w": "Soumis" } ],
    'languageTo':'en'
    } 
    , function(data) { console.log(data) }
);

Now here comes the tricky part. The search is triggered when the user types in atleast 3 characters and then stops typing in. Let's say the user started typing 'Sou' which should match with the word 'Soumis' in the French language but if I translated back 'Sou' to the English, it translates it to 'Penny' instead of matching with a substring of 'Submitted'.

Now I think I cannot rely on the translate function instead I should build custom logic to achieve this. When I change the language from the language switcher, I can see in the 'Network' tab that there is a XHR call to the weglot server which takes 'original text as input' and returns 'original and translated text as output'. If I get control of this response and manage to store it in local storage then I can write the custom logic. Now if the user searches for 'Sou', I can find this in the saved response translated array. If any match is found, I can find its original word and send it to the API.

So in short, I am looking for a solution which is provided by the weglot to handle this. If not, then share me few pointers to store the response from the API which is triggered on change of language from the switcher.

I am also open to switching to any other tool like 'Lokalise' if they provide a solution to this.

Answer 1

Are you still experiencing the same issue with the translate search method?

If you do, as you may already know, the Search feature actually works as a "Translate Back" so the default search system (in the original language) always takes care of the Search feature.

You can notice that the feature works when you have, into your Translation List, translations from your translated language to your original one.

For instance, you manage a site in English with a French translation. If the original content is "Hello", Weglot generates the translation "Bonjour" for the French translation. By searching for the word "Bonjour" for example, Weglot will translate the word "Bonjour" from French to English. There will, therefore, be into the Translation List, a language pair FR > EN to translate back the word of the search (in addition to the language pair EN > FR)

NB: Weglot's "translate back" must match the original word! For example, by searching for the word "Hello", Weglot could create a translation "Hi" and not "Hello". The search would therefore not be able to match the "Hello" with the "Bonjour". In this case, by editing the translation of "Hi" by "Hello", the search system would work.

In your case, maybe the Weglot.search() function could be helpful. I'm pleased to send you below the documentation related to this function https://developers.weglot.com/javascript/javascript-functions#weglot.search-term-callback-boolean

In this function you can submit a string as argument and the function will send true if you're currently navigating on a translated version. The search query will then be submitted and stored into your Translation List, in the searched language pair, i.e the language pair from your translated language to your original language. Can this method help you submit the search query only once the query is entirely entered? See an example here

Weglot.search("searched query", function(data) {{console.log(data)}})