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