Language Switcher

mmustafasheikh

Has anyone implemented a lang switcher that works without sending user back to home page. This is my setup:

Two languages AR and EN (EN will be default)

CMS data from Hygraph. Enabled Localization of 2 Languages (AR / EN) and CMS content has fields for (title, content) for both languages
Then I pull this data in Webstudio via GraphQL.
I have 2 individual GraphQL queries for each language ( localizations(locales: ar) and locales: en - respectively)
in WS, I have all pages on root (default language english) and then a folder called "AR" in which Arabic copies of the same pages (including CMS pages such as Post and Post directory)

All this works fine until here. My Directory shows correct content in Arabic (via Locales:ar) and english (via locales:en) and my post detail shows correct content too.

so example my URLs are like this
example.com/news/hello-world (For en post detail page)
example.com/ar/news/hello-world (for ar post detail page)
example.com/news/ (En posts page)
example.com/ar/news/ (ar posts page)

Rest of the pages are static so no hygraph required for that.

Now the question:
How do i correctly implement a lang switcher in header slot
So that, user can easily switch languages from one click while staying on the same page, but get directed to "/ar/slug" when clicked on AR or "/slug" when clicked again on EN in the switcher

And set Language in page settings dynamically too (if possible but not mandatory)

Thanks

3 comments

mmustafasheikh

Hello again - does anyone from WS team or otherwise have any pointers to impletement this (language switcher) please Thanks

JJeremy

Hi @mustafasheikh, I'm taking a wild guess here without testing...

Option 1 (better if it works - but would only work for dynamic content)
English button → /{slug}
Arabic button → /ar/{slug}

Option 2 (add JS)
<script>
function switchLang(toLang) {
const path = window.location.pathname
const isArabic = path.startsWith('/ar')
const slug = isArabic ? path.replace(/^/ar/, '') : path
const newPath = toLang === 'ar' ? '/ar' + slug : slug
window.location.href = newPath
}
</script>

<button onclick="switchLang('en')">EN</button>
<button onclick="switchLang('ar')">AR</button>

Both of these are just guesses at the moment.

mmustafasheikh

Thanks Jeremy, will give it a shot
I tried a few JS solutions from Chat GPT that do half the job ( i guess on page refresh they didn't fire) but ill try this thanks

Add a reply

Join the Webstudio community

Language Switcher