Language Switcher On Front End

[lokomotivan]

I needed a language switcher so i searched the forum and docs, found very useful stuff, but as im new in processwire (came from joomla) all this is still a bit confusing for me, need time to get use to it i guess. There's probably other people like me get confused in all the power of pw, and need language switcher on the site, so i decided to share what i came up with. 

Actually its very simple, a lot easier then i thought. There is very nice example in docs using select box (there i found out about $languages array, and its clicked), but you need additional script if you wanna style it, so i came up with something simple:

TADAAAAA

<?php foreach($languages as $language) : ?>
<a href="<?=$page->localUrl($language)?>"><?=$language->title?></a>
<?php endforeach;?>

Here's another example, but now active language is just a span with active class. (Style used on most websites).

<?php foreach($languages as $language) : ?>
<?php if($user->language->id == $language->id) :?>
<span class="active"><?=$language->title?></span>
<?php else : ?>
 <a href="<?=$page->localUrl($language)?>"><?=$language->title?></a>
 <?php endif;?>
<?php endforeach;?>

 

Here is UIkit dropdown example, same can do with bootstrap, just a bit different markup.

 

<div class="uk-button-dropdown" data-uk-dropdown>
<button class="uk-button"><?=$user->language->name?></button>
<div class="uk-dropdown uk-dropdown-bottom">
<ul class="uk-nav uk-nav-dropdown">
<?php foreach($languages as $language) : ?>
<?php if($user->language->id != $language->id) :?>
<li><a href="<?=$page->localUrl($language)?>"><?=$language->title?></a></li>
<?php endif;?>
<?php endforeach;?>
</ul>
</div>
</div>

[flydev]

A bootstrap 4 alpha version exemple with navbar and dropdown :

<nav class="navbar  navbar-dark bg-primary bg-faded">
        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
            ☰
        </button>
        <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
            <a class="navbar-brand" href="#">Responsive navbar</a>
            <ul class="nav navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Languages <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <h6 class="dropdown-header">Dropdown header</h6>
                        <?php
                        foreach($languages as $language) {
                            // determine the "local" URL for this language
                            $url = $page->localUrl($language);
                            // output
                            echo "<li><a class='dropdown-item' href='{$url}'>{$language->title}</a></li>";
                        }
                        ?>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

[bernhard]

Just wanted to share the simplest language switcher possible if you only have two languages:

<a href="<?= $page->localUrl($languages->findOther()->first()) ?>">DE/EN</a>

??