Hi all,
So I’m working on a website that will need to be in both English and Portuguese. The client would like it so that before entering the website, there is a page where you can choose the language.
How would I go about doing this?
This was a middle of development request, thankfully adding a second language wasn’t difficult through Kirby panel but am looking for ways to add that splash page without having to restructure my current homepage blueprint.
Thanks!
How is this multilanguage website set up domain-wise? Are you using subdomains for the languages? A language portal for only two languages 
?
You could use $kirby->detectedLanguage() (more info) in the home-controller to try to detect the language of the visitor.
You can enhance the experience by adding a modal in the client-side (via JS) where you politely ask the user if the current language is ok, and if not present him/her with options. Please store his preference in a cookie afterwards and let this setting have priority above all of the above (don’t redirect on detected language / don’t show JS modal anymore).
The reason for the portal is the client doesn’t want one language to appear to be the default given they have a lot of English and Portuguese speaking visitors to the site.
I haven’t thought of how to best approach the domain. I just set up the languages through the panel last night and saw that Kirby creates separate subdirectories for different languages. That’s fine with me tbh but if you believe feel setting up different subdomains would be easier, I’d be happy to hear how so.
Is there a tutorial on how to store a cookie? and would there be a way to change the language after the fact using this method?
Nope, but it’s not more that setting and reading the cookie: Cookie | Kirby CMS (and checking if it has already been set).
Alright thanks. I also would like to know.
Would there a way to create the portal and switch between languages without javascript?
That’s why I was asking about the domain setup. Big sites like IKEA, for example, use a .com domain for the language portal, and country/language specific domains for the different language versions, but such a solution would probably be overkill? I think it also depends on which domain has been the go-to domain in the past, and there are probably SEO considerations to take into account (but I can’t give advice on this). Kirby already has an option for automatic language detection based on browser language, which you can set in the config. It would still allow you to switch languages. I’d probably go with something like this rather than a portal, but if the client absolutely wants that?
There wouldn’t be a language specific domain, I agree that it’s overkill. They just want when someone loads “www.clientdomain.com” that it’s a page where it can lead to “www.clientdomain.com/pt” or “www.clientdomain.com/en”
Automatic language detection sounds good but I think the client would still like to give the visitors the ability to choose as well as the ability to alternate.
I think you could probably just get away with language switcher in the header or footer then?
something like this (i took this from one of my K2 sites, but i think i should still fly on Kirby 3, or nothing a quick look in the docs wont fix):
<nav class="languages" role="navigation">
<ul>
<?php foreach($site->languages() as $language): ?>
<li>
<a class="<?php e($site->language() == $language, 'active') ?>" href="<?= $page->url($language->code()) ?>">
<?= html($language->name()) ?>
</a>
</li>
<?php endforeach ?>
</ul>
</nav>Code for language switcher options can be found here: https://getkirby.com/docs/guide/languages/switching-languages
(Note: it’s now $kirby->languages(), not $site->languages())
Yeah I used the switcher options to make sure that it works properly. It’s more that it needs to be full page before viewing the actual site.
How about a full page overlay that works on every page instead? (the sort of thing people do to make u turn off an adblocker). You can remember the choice via cookie so that it doesnt show again.
That way, it wont matter which page someone hits first. You cant gaurentee they will always enter the site on the home page. Put the language switcher inside the popup.
Then you have to either go with a Javascript option or use another URL, e.g. make the lang switcher page the home page, but then you would have the home part in the URLs for the actual home page.
Alright, will test these out tomorrow. Thanks for the suggestions
Am trying to figure out the cookie bit, I’ve never done this before. Where would I set the cookie?
I currently have an overlay in the header like this:
<div id="overlay">
<nav class="languages">
<ul>
<?php foreach($kirby->languages() as $language): ?>
<li<?php e($kirby->language() == $language, ' class="active"') ?>>
<a href="<?php echo $language->url() ?>" hreflang="<?php echo $language->code() ?>">
<?php echo html($language->name()) ?>
</a>
</li>
<?php endforeach ?>
</ul>
</nav>
</div>
With Javascript code:
$(document).ready(function () {
$('#overlay').fadeIn();
});
$('button').click(function () {
$('#overlay').fadeOut(200, "linear");
});I normally set and read cookies with Vanilla JS like this, set the cookie in the button click to choose the language, then just wrap your fade in to happen if the cookie value does not equal what you set it too.
I think in this case you also have to read the cookie on the server side, to decide if language redirection based on browser language should happen or not depending on the user preference stored in the cookie.
So I added in the code from the tutorial you gave me and am trying to tie it to each language option like this:
<a onclick="createCookie('language', <?php echo html($language->name()) ?>, 30)" href="<?php echo $language->url() ?>" hreflang="<?php echo $language->code() ?>">
<?php echo html($language->name()) ?>
</a>
but I keep getting a reference error that the function create cookie doesn’t exist…
Is your javascript in the head of the page, or the footer? Personally, I would do it on javascript click event in the javascript file, rather then directly on the html elememt.