Creating a language portal before entering website

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.

  • server gets the request for the page
  • server checks cookie value
  • if no cookie is set, language redirection happens based on browser language
  • on the client side, the user is presented with the overlay when no cookie is set
  • when the user dismisses the overlay, the cookie is set on the JS side, storing the value of the language in the cookie
  • when the user clicks on the link to the other language, they are redirected to the other language, the cookie value is set to this new language

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.

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

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.

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

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.

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.

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?

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

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.

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

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.

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

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?

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!