Jump to content
lokomotivan

Language Switcher On Front End

Recommended Posts

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>
  • Like 8

Share this post


Link to post
Share on other sites

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>
  • Like 2

Share this post


Link to post
Share on other sites

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>

🙂 

  • Like 5
  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...