Help creating localization toggle (accessing locale in Plasmic Studio)

Hi all,

I’m trying to get localization working for my website, but am struggling at setting up a button for switching between locales.

My situation:
(Context: My website is NextJS pages router)

:white_check_mark: I followed approach 2 and created global variants for my main supported locales:

:white_check_mark: I set up routing in next.config.js, and also added the suggested lines in my [[...catchall]].tsx file:
image

:thinking: Added elements in Plasmic Studio for toggling/dynamically loading external integrated CMS locale content. Specially, I added (a) a menu button to toggle locale, and (b) a GraphQL variable in article content for locale:


:sob: However, to use those, I need to access locale from Plasmic Studio, and I couldn’t figure that out…

  • I believe the solution is something similar to setting up dark/light mode toggle mentioned here? However, my basic brain wasn’t able to successfully implement it :cry:

Please advise!

Best,
Craig

Hi,

Yes, you can solve it in a similar fashion. As you already have the locale value provided by the router, you should be able to provide the “locale” value as data to Plasmic. This way, you can access this data directly into the studio. To be able to access this data, it’s recommended that you add it _app.

You can refer to this project from @alyssa_feola GitHub that implemented the dark mode approach.

In your case it would be something like this:

<DataProvider name="locale" data={locale}>
   <Component {...pageProps} />
</DataProvider>

This way, when you open the data picker, this value will be available to be used in the expressions. You can also change the way that you implemented the switch.

Useful links:

1 Like

Hi @fmota,

Thanks for the reply!

I’m not a developer by background, so I wasn’t quite able to figure out based on @alyssa_feola’s repo example :sweat_smile:

Here’s my setup now:

  • I changed the global variant in Plasmic Studio to “lang” (for better identification)
    image
  • My [[...catchall]].tsx is the same, besides switching out “Locale” for “lang”
  • I converted my _app.js to _app.tsx and added the <DataProvider> lines you suggested

I couldn’t get the lang variants in Plasmic Studio to connect with the Next Router locale being shown :frowning:
It also seems like the <DataProvider> in her repo was calling upon a self defined ThemeProvider Plasmic component?

Best,
Craig

Does the /plasmic-host page of your project is handled by another application ? From what I can see of your code it looks good, do you mean that the locale is not visible in the data picker ?

When I set up with the same DataProvider structure as you, I was able to see it in the Studio.

You need to be careful with this change because of the case sensitivity issue right now.