Multilanguage Site with JSON representation

Kirby 2 Solved ✅
1

Hi,

I am trying to create a multilanguage site D/E which is based on the JSON representation to load the pages via AJAX. It uses the following to differentiate between the languages

c::set('languages', array(
    array(
      'code'    => 'en',
      'name'    => 'English',
      'default' => true,
      'locale'  => 'en_US',
      'url'     => '/',
    ),
    array(
      'code'    => 'de',
      'name'    => 'Deutsch',
      'locale'  => 'de_DE',
      'url'     => '/de',
    ),
  ));

and a template structure

default.php
default.json.php
portfolio.php
portfolio.json.php

…

Content ist structured as follows with home as a landing page and the subpages loaded dynamically via AJAX.

1-home
default.de.txt
default.en.txt
-- 1-Porfolio
     portfolio.de.txt
    portfolio.en.txt
-- 2-Work
    work.de.txt
    work.de.txt
-- 3 ...

The content is fully created in javascript based on the intended template and It all works well, except that only the english content is loaded since it is the default language. The menus change according to the language, allthough language switch causes a page reload which is ok. How can I differ between the languages in the above setup?

Many thanks,
C.

2

So you basically wants to switch languages via AJAX?

Since content representations are rendered in the “current language”, they don’t return “other language” content. This is as designed afaik.

But you could write your client side language switcher which fetches the same page in another language (update the language parameter in the URL) via AJAX and rewrite the DOM with the returned result.

3

Thanks for your answer, actually I don´t want to switch the language via AJAX, it is fine to switch it via kirbys above default method. But when a page is requested via AJAX, kirby should take the current language into account and serve the content according to the currently set language, e.g. language set to
DE -> portfolio.de.txt
EN -> portfolio.en.txt
and send it as JSON

4

This should just work by default. Can you try the following in your json template:

<?php

$data = [
  'title' => $page->title()->value(),
  'text'  => $page->text()->kirbytext()->value()
];

echo json_encode($data);

Then if you swap the language parameter in the url: e.g. https://domain.tld/en/portfolio/project-a.json to https://domain.tld/de/portfolio/projekt-a.json, you should get the localized content.

5

Many Thanks, I will try that.

6

I am still in learning mode and I don´t get it to work. Do I necessarily need to use different URLs to load the localized content or is there a different way to do this? Why does the portfolio.json.php not use the right language text file when language is switched to DE?

May be I have a total misunderstanding of how the content is converted to JSON and made a mistake. Just to be sure - based on the above language setup in config.php I have two templates, e.g.

portfolio.php which creates the outer structure

<?php snippet('header') ?> 
<div id="ajax-wrapper"></div>
 <?php snippet('footer') ?>

and the according template to create the JSON file and JSON representation of the content

portfolio.json.php

<?php

if(r::ajax()){

header('Content-type: application/json; charset=utf-8');

$data = [
'layout' = $page ->intendedTemplate(),
'title' = $page->title()->value(),
 'text' = $page->text()->;kirbytext()->value()
];

echo json_encode($data);
}

depending on the set language it should use either pull the one or the other .txt textfile to create the JSON representation.

…
– 1-Porfolio
portfolio.de.txt
portfolio.en.txt
…

the content is loaded via ajax where I define the URL to load

let url = "/home/" + target + ".json"

With the received content I fill the ajax-containter with the content via javascript. It currently works for the default language EN (/) but when I switch to DE (with /de in the url) it still loads the EN content but shows the DE menu.

Hope this makes any sense… :wink:

7

Do you also use the language parameter in

let url = "/home/" + target + ".json"

?
E.g.:

let url = "/" + lang + "/home/" + target + ".json"

– Edit –
Please take into account that if you use localized URL’s, you should also use those in the “url” javascript parameter.

1 Like
8

Perfect, that was the solution, many thanks!

9

Nice. :raised_hands:

Could you mark your post as “solved” please (at the top of the topic, just beneath the title, change “questions” label to “solved”.