Help creating localization toggle (accessing locale in Plasmic Studio)

[leafer_design]

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)

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

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

• This allows leaferdesign.com to default show zh-TW, but if your browser/OS prefers en it will show the en version: leaferdesign.com/en.
• I was only able to get it to work with uppercase “Locale” (thanks for the mention in this forum convo)

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:

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

Please advise!

• My project btw: Plasmic

Best,
Craig

[fmota]

Hi,

@leafer_design

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

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:

• Data provider docs (Using DataProvider to provide data to Plasmic Studio | Learn Plasmic)
• Next.js _app (Routing: Custom App | Next.js)

[leafer_design]

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

Here’s my setup now:

• I changed the global variant in Plasmic Studio to “lang” (for better identification)
  
• 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
It also seems like the <DataProvider> in her repo was calling upon a self defined ThemeProvider Plasmic component?

Best,
Craig

[fmota]

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.

@leafer_design

I changed the global variant in Plasmic Studio to “lang” (for better identification)

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

@leafer_design

I was only able to get it to work with uppercase “Locale” (thanks for the mention in this forum convo )

[leafer_design]

Hi @fmota,

Again, thank you for the response - and sorry for the delay!

• As you suggested, I updated mentions of “lang” in my code and in studio to “Lang”.

• Yeah, that seems to be the issue… I don’t see any locale/Lang in the data picker/Studio
  

  

• I don’t believe my /plasmic-host is handled by another application?
  

• Perhaps it’s related though, because publishing is now throwing this issue?
  

  
  
  (an error shown in Chrome devtools)
  

[fmota]

Hi, can you share the repository? You can do it privately, as explained in Collaborating with Plasmic | Learn Plasmic. Using the code that we discussed, it should be possible to use the language value in the editor. So, it would be easier if we could talk with more context on what’s being done in the code currently.

[fmota]

Hi, I just saw that your project is not configured to use the expected host. If you follow the instructions here, Host Plasmic Studio in your app | Learn Plasmic, to set up your project to use your /plasmic-host page, the value will be available.