Creating a language portal before entering website

Kirby 3 Questions šŸ¤”
22

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

23

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.

24

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");
});
25

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.

26

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.

27

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?

28

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();
}
29

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.

30

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

31

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.

32

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

33

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?

34

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!