# Creating a language portal before entering website

**URL:** <https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039>\
**Category:** Questions\
**Tags:** v3\
**Created:** [January 30, 2020, 7:33pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039 "2020-01-30T19:33:31Z")\
**Posts on this page:** 13\
**Page:** 2

<div class="post-metadata">

**Author:** ![Brighurst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/brighurst/32/9714_2.png) [@Brighurst](https://forum.getkirby.com/u/Brighurst)\
**Post date:** [January 31, 2020, 7:54pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/22 "2020-01-31T19:54:19Z")

</div>

I had it set in the footer but then moved it to the header and am still getting the error.

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [January 31, 2020, 7:55pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/23 "2020-01-31T19:55:08Z")

</div>

See my edit above. If you set the language in a data attribute on the link tag, you can pick it up from the javascript.

---

<div class="post-metadata">

**Author:** ![Brighurst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/brighurst/32/9714_2.png) [@Brighurst](https://forum.getkirby.com/u/Brighurst)\
**Post date:** [January 31, 2020, 8:13pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/24 "2020-01-31T20:13:04Z")

</div>

This is what I have now but it’s still not working. Do I have to create separate ids for each language button?

```
var langButton = document.getElementById('language'); 
langButton.addEventListener('click', event => {
  createCookie("language", langButton.dataset.language, 30);
  var language = readCookie("language");
});
```

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [January 31, 2020, 8:21pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/25 "2020-01-31T20:21:41Z")

</div>

Actually, I think what would be better is a form radio group in the popup to choose language, then you can pick up the radio from the button press and set the cookie. You can read the same cookie back with PHP to persist the language selection when the user comes back, and hide the popup.

Sorry to send you down the wrong path before, sometimes this stuff is trial and error and evolving an idea.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [January 31, 2020, 8:33pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/26 "2020-01-31T20:33:40Z")

</div>

> [@Brighurst](#):
>
> Do I have to create separate ids for each language button?

Note that you can only use an id once per page! Use a class for multiple elements. On the other hand, if you only have one language (the one that is not currently shown), it doesn’t matter.

---

<div class="post-metadata">

**Author:** ![Brighurst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/brighurst/32/9714_2.png) [@Brighurst](https://forum.getkirby.com/u/Brighurst)\
**Post date:** [January 31, 2020, 8:56pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/27 "2020-01-31T20:56:25Z")

</div>

Would there be a way to associate an image with each language and have that be set from the panel? So when the portal loads, it can pull this image in?

---

<div class="post-metadata">

**Author:** ![Brighurst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/brighurst/32/9714_2.png) [@Brighurst](https://forum.getkirby.com/u/Brighurst)\
**Post date:** [January 31, 2020, 9:17pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/28 "2020-01-31T21:17:07Z")

</div>

So I’ve set the cookie but when trying to redirect, it just keeps loading and reloading. I don’t know how to get it to only redirect once and that’s it.

Current code

```
if (languageSite == "English") {
  
} else if(languageSite == "Português"){
  var url = window.location.toString();
  window.location = url.replace("/en", '/pb');
} else {
  console.log('language is not set');
  $('#overlay').fadeIn();
}
```

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [January 31, 2020, 9:25pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/29 "2020-01-31T21:25:11Z")

</div>

I think thats the wrong approach. Use the cookie to send the desired language through to PHP and redirect with PHP acordingly, rather than doing the redirect with Javascipt.

---

<div class="post-metadata">

**Author:** ![Brighurst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/brighurst/32/9714_2.png) [@Brighurst](https://forum.getkirby.com/u/Brighurst)\
**Post date:** [January 31, 2020, 9:34pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/30 "2020-01-31T21:34:02Z")

</div>

Is there a way to pick the specific language through kirby? So I’m doing an if statement and if the cookie is set to portuguese then redirect to the url of the portuguese language?

@jimbobrjames. This is what I have but the redirect isn’t working. Is it something with how I’m calling the url?

```
<?php if($_COOKIE["language"] == "Português") { 
    header($kirby->languages()->find('pb')->url()); 
} elseif ($_COOKIE["language"] == "English") {
  header($kirby->languages()->find('en')->url());
} else { ?>
<div id="overlay">
<nav class="languages">
  <ul class="portal">
    <?php foreach($kirby->languages() as $language): ?>
      <li class="slideshow">
      <input class="slideshow" type="radio" name="language" value="<?php echo html($language->name()) ?>" data-url="<?php echo $language->url() ?>">
        <label><?php echo html($language->name()) ?></label>
    </li>
    <?php endforeach ?>
    </form>
</nav>
</div>

<?php
}
?>

```

It just points back to the default english version

---

<div class="post-metadata">

**Author:** ![Brighurst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/brighurst/32/9714_2.png) [@Brighurst](https://forum.getkirby.com/u/Brighurst)\
**Post date:** [January 31, 2020, 9:34pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/31 "2020-01-31T21:34:41Z")

</div>

I want to use variables that aren’t dependent on the actual set url since right now it’s all being hosted locally. I don’t want to have to reset the url when the website goes live.

---

<div class="post-metadata">

**Author:** ![Brighurst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/brighurst/32/9714_2.png) [@Brighurst](https://forum.getkirby.com/u/Brighurst)\
**Post date:** [January 31, 2020, 10:53pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/32 "2020-01-31T22:53:08Z")

</div>

I’ve managed to figure this out! This is the final code I’ve used:

```
<?php if($_COOKIE["language"] == "Português") { 
    $pageURL = $page->url() ;
    $siteURL = $kirby->languages()->find('pb')->url();
    
    if(strpos($pageURL, $siteURL) !== 0) {
      echo "FALSEFALSE";
      Header::redirect($kirby->languages()->find('pb')->url());
    } else {

    }
    //
} elseif ($_COOKIE["language"] == "English") {
  $pageURL = $page->url() ;
  $siteURL = $kirby->languages()->find('en')->url();
  
  if(strpos($pageURL, $siteURL) !== 0) {
    echo "FALSEFALSE";
    Header::redirect($kirby->languages()->find('en')->url());
  } else {

  }
} else { ?>
<div id="overlay">
<nav class="languages">
  <ul class="portal">
    <?php foreach($kirby->languages() as $language): ?>
      <li class="slideshow">
      <input onClick="window.location = '<?= $language->url() ?>'" class="slideshow" type="radio" name="language" value="<?php echo html($language->name()) ?>" data-url="<?php echo $language->url() ?>">
        <label><?php echo html($language->name()) ?></label>
    </li>
    <?php endforeach ?>
    </form>
</nav>
</div>

<?php
}
?>

```

Let me know what you think. Also am still looking for a way to associate an image with each language so suggestions would be helpful

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [January 31, 2020, 10:53pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/33 "2020-01-31T22:53:48Z")

</div>

Well u need two radios, one for english and one for portugese. Dont set the radio values with php, since that will make it dynamic. You want the radio to set the language to what the php value would be, and then pick that up and redirect. You will need to redirect with javascript on the first showing of the popup, but after that you can read the cookie php and silently know which language they prefer.

I think its going round in circles becuase you are dynamicaly setting the window location with php. So php is setting it, then the page redirects and php set it again to real language… its just chasing its tail. It needs to be a hard string in there, not PHP.

So heres what needs to happen in my mind…

1. User hits site for the first time… get a pop up
2. Two radios in a form, choice of English or Portugese with hardcoded values, not values from PHP, but the value needs to be a valid language code
3. User picks one of the two radios, clicks the button… on the button click, you set the cookie with the valid language and redirect to that language at the same time with javascript, and close the popup

4a. User comes back to the site later, javascript checks the cookie has been set, and does not show the popup if it has

4b. PHP also checks the same cookie and silently redirects to that language if the current language does not match

Does that make sense?

---

<div class="post-metadata">

**Author:** ![Brighurst](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/brighurst/32/9714_2.png) [@Brighurst](https://forum.getkirby.com/u/Brighurst)\
**Post date:** [February 14, 2020, 6:45pm UTC](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039/34 "2020-02-14T18:45:21Z")

</div>

To circle back on this, yes this does!

Update: Client needs more time to prepare materials for the alternate language so I’ll have more time to do this properly through what you’re describing. Thanks for all the help!

[Previous page](https://forum.getkirby.com/t/creating-a-language-portal-before-entering-website/17039.md?page=1)