Can I use the search bar in the translated language(s) ?
In this article, you'll learn how to use the search bar in your translated language(s).
How does it work?
Weglot allows users managing a WordPress or Shopify project to translate their search bar with JavaScript integration.
When users browse your website in a translated language, the website searches in its original language. Weglot circumvents this by modifying the query sent.
This feature is based on a "Translate-Back" process and works as follows:
- A user enters one or more words in the search bar on a translated website version.
- Weglot translates the word(s) entered from the translated language to the original one.
- The result is sent to the original search system, which processes it as a normal request.
This process will create new language pairs in your Weglot Dashboard > Translations > Languages > Translation List, made up of searches from the translated language(s) to the original language.
The following example shows how the feature works when you manage an English website with a French translation:
Let's assume that the word "like" is included in your website's original content. "like" means "aimer" in French. The following error may occur:
- French user enters "aimer" in the search bar.
- Weglot translates back "aimer" into "love."
- A new French-to-English translation pair is created.
- Weglot's translation doesn't match the original request.
- The search system cannot link between "like" and "love".
To avoid such behavior, you can edit translations via your Translation List to ensure the search matches the result.
You may consult the article here to have more information on how to edit your translations via the Translation List.
I am using WordPress.
If your website is built with WordPress, you must activate the "Translate search in your visitor language" option to translate searches into the visitor's chosen language.
You can do this from your Weglot Dashboard > Settings > WordPress settings.
If you've activated this feature and edited the translations to match the original search query, but the search remains untranslated, please contact us at support@weglot.com.
I am using Shopify.
When using Shopify with JavaScript integration on your website, you must activate the "Translate search in your visitors' language" option to translate searches into the visitor's chosen language.
You can do this from your Weglot Dashboard > Settings > Shopify settings.
Should you change the translations and the search feature does not work as expected, you can use "Searchanise" or "Search +" instead. These are professional search platforms and our trustworthy partners.
I am using another technology.
You may use a technology other than WordPress or Shopify under a subdomain or subdirectory-based integration. In this case, please follow the instructions below:
While installing Weglot, copy and paste the JavaScript code snippet between the <head></head> HTML tags on your website to trigger the application.
The "api_key" option, which links your website to the Weglot project, is mandatory.
However, it is not the only one that you can add to this code snippet. To see all the options available, please click here.
You can add more options to modify the switcher's default behavior or to change other parameters.
In search bar translation, these three options are important:
- translate_search
- search_form
- search_parameter
The "translate_search" option
By default, the "translate_search" option is set to false, but you can switch it to true:
{
api_key: "wg_xxx",
translate_search: true
}
Switching it to true will allow Weglot to translate the search queries made on your website.
This option is not sufficient if it is used alone; you also need to use the "search_forms" and "search_parameter" options to select the forms and parameters you want to translate.
The "search_forms" option
This is a list of selectors to identify the forms containing the elements you want to translate.
By default, the forms indicated are transmitting the "q" parameter. If you want to translate another parameter, you need to use the "search_parameter" option.
To ensure that the "search_forms" option works as intended, you need to have the "translate_search" option set to true.
The "search_parameter" option
This option allows you to target precisely which input(s) of your form(s) will send keywords.
You can usually find this parameter in your URL with a query looking like "?q=xxx".
An example of code:
{
translate_search: true,
search_forms: ".my-form", // <input name="q" class=".my-form" />
search_parameter: "q" // it's the name value of your form's search input
}
If you have any problems during this process, please do not hesitate to contact us at support@weglot.com.