Join the Webstudio community

Updated 7 months ago

How do i achieve dynamic language switching based on user selection

At a glance

The community member is trying to implement multilingual functionality in their Webstudio project, with three languages: English, Japanese, and Chinese. They have set up language-specific folders for the pages, and a fixed language selector in the menu. The issue they are facing is that the language selector currently redirects to the home pages for each language, requiring users to navigate to the specific page they want in the desired language.

The community members discuss various approaches to achieve the desired functionality, including using a slot for the language selector, linking directly to the language-specific pages, and using a CMS. They note that using a slot has the limitation of not being able to access page-specific variables. The community members suggest using global variables or a CMS-based approach as potential solutions.

The community member also encounters an issue with the URL structure when publishing the site, where the URL is doubled. Another community member suggests adding a leading slash to the URL to resolve this problem, which the original poster confirms works.

Additionally, the community members discuss the current limitations of Webstudio, such as the inability to reorder and arrange pages and folders, and provide a link to a related GitHub issue to track the progress on this feature.

Useful resources
sorry if my post title is a bit wrong as im bad at wording but i hope my issue is understood?

Hello, i tried to do localization within webstudio, and i have 3 languages - english, japanese and chinese - EN,ZH,JP
i made a fixed lang selector on my menu nav.
atm i have it redirecting to the lang specific home pages ( i remade all the pages in lang specific folders in ws )

here's what i wanted help with and what i wanted to achieve -

when visiting a page, if the user wants to see it in different language. i wanted webstudio to redirect them to page which is in that specific lang

for example - is the site i made, if a user is looking at this page. and they want to see the Japanese version. if they click on " JP" on the left top menu i want them to see the JP site - which is this -

atm i currently have the lang selectors redirect to home sites. so users have to navigate to the specific page through the menu so there's alot of clicking.
idk how to do it the way i wanted! is this currently possible?

can you guys guide me how i can achieve this?
J
O
18 comments
i did the lang folders like this? i did check some older posts here which mentioned this is one of the ways to do it?
Attachment
Screenshot_2024-07-21_191939.png
about the lang selector
i current have it inside a slot so each lang specific pages have their own lang specific menu.
Attachments
image.png
image.png
seems like you chose to make multilinugal completely static, in this case you just need to link from language selector to the right with language in the path ... I don't see a problem
wait there was a way to make it dynamically? but that would be via cms right? i am using notion for cms so its using the slug ( like the notion tutorial)
in this case you just need to link from language selector to the right with language in the path

so one of the way i could do it would be to, not use a slot and add it normally? and individually link it? right?
but how would i do it if i wanted to use a slot? since if im using it as a slot - i'm not able to see system variables. but if i'm not using it as a slot i can? idk why?
yeah, current limitation with slot is it can't see page variables, since it can be on any page
we need global variables for that which would be visible everywhere
with cms you won't need a slot
i see~ so when global variables comes out ill go with that way.
was there a different alternative way to do multilinugal? instead of this method i chose to do?
okie~ so i was able to figure it out~ since i used notion's slug for dynamic page.

there's this weird thing i noticed -
so here im using
Plain Text
"jp/joqnix/livestreams/stream-summary/" + system.params.slug 

so in the href field it shows the correct link - jp/joqnix/livestreams/stream-summary/17-7-24 ( so it populated the slug data too.

if testing from preview it shows the correct url -
but when published to live site - idk why the url structure is doubled like this - https://onaixia.com/jp/joqnix/livestreams/stream-summary/jp/joqnix/livestreams/stream-summary/20-7-24
Attachment
image.png
is this a bug or did i do it wrong? i doubt its wrong, if it was then it wouldn't navigate properly via preview right? but here it does on live site.
add a leading slash
thank you! it worked! :kafyay:
atm its not possible to reorder and arrange pages & folders right? so i found the best way to move folders is to make a new folder and put folders i want to move into it and revert back to root.
yeah, will get there at some point, here is the issue to follow https://github.com/webstudio-is/webstudio/issues/403
Add a reply
Sign up and join the conversation on Discord