Locale change widget - Is it possible to add a live component that puts a value into the session and then reloads the page?

poipoi · December 24, 2024, 5:47pm

Hi everyone and Merry Christmas.

I am trying to implement the simplest and smallest “change language” widget in my small web app.
I will be using a plug that detects the locale stored in the session and calls Gettext.put_locale.

For this, I need a way for the user to set the locale.
I was thinking to add something in my sidebar, which is defined in the root layout.
Is it possible to add a live component or something else that puts a value into the session and then reloads the page?

Thanks a lot

rhcarvalho · December 25, 2024, 2:57pm

Hi Jacopo, Merry Christmas!

I created a gist out of some code I wrote for managing a multi-locale Phoenix LiveView project:

gist.github.com

https://gist.github.com/rhcarvalho/e2e74a945fba71cdb6dfa95b3819120d

README.md

# Phoenix LiveView Multiple Locales

This gist was extracted from a Phoenix LiveView project where I needed to support multiple languages.
Translations are managed using GetText and the standard commands available in projects generated with Phoenix 1.7.

The code in this gist demonstrates how to use a Plug to store the locale in the session and a LiveView on_mount hook to set the current locale in LiveView assigns.

The Plug integrates with the rest of the project through a router pipeline, and the on_mount hook is attached to every LiveView by updating the generated `...Web` module.

lib-hello_web-components-layouts-root.html.heex

<!DOCTYPE html>
<html lang={@locale |> String.replace("_", "-")}>
  <!-- ... -->
              <.link
              :for={
                {locale, description, language} <- [
                  {"pt_BR", "Mudar idioma para", "Português"},
                  {"en", "Change language to", "English"},
                  {"de_AT", "Sprache ändern zu", "Deutsch"}
                ]

This file has been truncated. show original

lib-hello_web-plugs-set_locale.ex

defmodule HelloWeb.Plugs.SetLocale do
  @moduledoc """
  This plug is responsible for setting the locale in the session based on the
  `lang` query parameter, existing session locale or `accept-language` HTTP
  header.

  ## Behavior

  - If the `lang` query parameter is present, it overwrites any existing locale
    in the session and updates the session with the new locale.

This file has been truncated. show original

There are more than three files. show original

If memory serves me well, we cannot change the session from LiveView (see also a recent post Any way to store auth details in cookies using phoenix liveview - #2 by josevalim).

The solution I use in the gist involves updating the session via Plug, and reading/sharing the locale between Plug (available in controllers) and LiveView using a global on_mount hook.

Hope that helps!

BartOtten · December 26, 2024, 12:11pm

The other solution is to have a separate route for every locale. This might seem a lot of work but most of the heavy lifting can be done by a lib called Routex. It has several benefits over ‘setting session language + gettext’, one of them: instead of setting a session value, you can simply link to a localized page.

Tutorial: Localized Routes with Routex — Phoenix Routes Extension Framework v0.3.0-alpha.4

Demo: https://routex.fly.dev/

poipoi · December 26, 2024, 5:01pm

Thanks, great suggestions, I will try them!

poipoi · December 27, 2024, 6:54pm

Since I didn’t need localized routes, I ended up trying your solution and it worked great.
The only issue I have with that is that when I change the language, I get redirected to the index page.
Maybe it is possible to work around this by doing an AJAX request? I don’t know if it can be done in LiveView. I think the current page may need to be reloaded also?

rhcarvalho · December 27, 2024, 7:09pm

If you store the user language in your database, you might be able to simplify things.

You can update the database from a LiveView, without touching the session (which is by default backed by cookies which you need a regular HTTP resquest-response to set on the browser).

BartOtten · December 29, 2024, 7:06pm

Maybe it is possible to work around this by doing an AJAX request? I don’t know if it can be done in LiveView. I think the current page may need to be reloaded also?

If you store the user language in your database, you might be able to simplify things.

You might reconsider picking the ‘simple solution’ as it already causes issues and asks for additional ‘less simple solutions’.

Here are a few additional thoughts:

Search engines love 1-url-per-locale. If the routes are behind a login, having localized routes may have less impact.
Have a look at Cldr Plug — Cldr Plug v1.3.3. This a great Plug with many options for locale retrieval; including non-session based.
I forgot to mention that the translation extension from Routex as mentioned in the tutorial is not required, if the additional translation work was a concern.