Multi language blog in MODx

This tutorial will demonstrate how a multilingual blog in MODx can be created. It is a combination of the prior tutorial and the multi lingual site tutorial at the MODx wiki. Both are required reading if you want to understand what is happening here.

The Ditto line that is responsible for rendering all the tags at the bottom of each blog post now looks like this:

[!tagLink? &tv=`tags` &separator=`, ` &fap=`2` &path=`[[getLang? &basePath=`template-shop` &category=`Categories`]]`!]

So we now have a dedicated snippet called getLang which is responsible for getting the correct pretty URL to the tag/category:

$tv = $modx->getTemplateVar('languages', "", $modx->documentIdentifier);
$languages = $tv['value'];
$entries = explode(",", $languages);
for ($e = 0; $e < count($entries); $e++){
  list($lang, $targetid) = explode("=", $entries[$e]);
  if($targetid == $modx->documentIdentifier)
    return $basePath.'/'.$lang.'/'.$category;

Almost all of it is taken from the multi language snippet. The main point here is fetching the two letter code, in my case en or de. The result could in this case be template-shop/de/Categories for instance.

The tagLinks snippet has also been changed yet again:

$ext = $fap == '2' ? '.html' : '';

if ($format == 'a'){
$link .= "$label";
	for ($x=0;$x<$cnt;$x++) {
		$url = urlencode(trim($tvarray[$x]));
		$cnd_separator = ($x!=($cnt-1)) ? $separator : '';
	   $link .= '<a href="'.$doc_path.strtolower($url).$ext.'">'.trim($tvarray[$x]).'</a>'.$cnd_separator.$nl;	
} else {
	$link .= '<'.$format.'>'.$nl;
	$link .= '<li class="'.$style.'_label">'.$label.'</li>'.$nl;
	for ($x=0;$x<$cnt;$x++) {
		$url = urlencode(trim($tvarray[$x]));
		$cnd_separator = ($x!=($cnt-1)) ? $separator : '';
	  $link .= '<li><a href="'.$doc_path.strtolower($url).$ext.'">'.trim($tvarray[$x]).'</a>'.$cnd_separator.'</li>'.$nl;
	$link .= '</'.$format.'>'.$nl;

We now apply our custom .html part in all cases, even when we are only creating a simple a href list. That’s why the above tagLinks call works.

[!Wayfinder? &startId=`[[UltimateParent? &topLevel=`2`]]`&level=`2`&parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &excludeDocs=`5,27`!]

The main news here is UltimateParent with a topLevel of 2. The folder structure will have two folders, en and de (level 2), right below the root level document (level 1). That’s where we want Wayfinder to land after traversing upwards from any given document.

Another important addition is &excludeDocs=`5,27`. The folder with id 5 is the parent of all English categories and 27 is the parent of all German categories, in both cases the document alias is categories. The thing here is that we do not want these folders or their children/tags to show in the main menu and this will take care of that.

This is the Ditto chunk that will render the list of articles in a category/tag:

<p><div class="ditto_summary">
	<div class="ditto_head">
    <h3><a href="[(site_url)][~[+id+]~]">[+date+] </a> : [+title+]</h3>
    [[tagLink? &id=`[+id+]` &label=`Tags:` &tv=`tags` &separator=`, ` &fap=`2` &path=`[[getLang? &basePath=`template-shop` &category=`Categories`]]` &style=`dittoTags`]]

Note again the use of getLang. Note the absence of the Jot stuff, I won’t allow comments so there was no need for it. Don’t forget to change the Ditto line that is using this chunk to fetch the category with the correct id. I simply copied all the English categories when I did this, followed by moving them to be underneath the de folder, of course the ids wouldn’t match after the move, they need to be changed for each category.

Related Posts

Tags: , , , ,