Case Study: a different domain for each language
Dealing with multilanguage websites might result difficult, especially when you have a different domain name for each of the languages handled. Let's see how to use Joomla 4 in a successfull multilanguage and multidomain implementation.
A different domain name for each language
A few months ago I had to migrate from Joomla 3 to Joomla 4 a big website having several thousands articles in 3 different languages.
Managing multilingual sites is a piece of cake with Joomla.
My only problem was that this multilingual website had 3 domain names :
Of course the idea is to have the right domain name everytime a user switches language (and to be sure that no content is indexed only with its right domain name).
There were 2 nice little plugins doing exactly this for J3:
- Language2Domain, a free plugin originally developed by Jisse Reitsma and taken over by Peter Martin
- GJ Multilanguages Domains which is not even on the Joomla Extensions Directory any more
It could be that Language2Domain will be adapted to J4 in the future and one day I could also have a "multisites" feature in J4 but afaik there is not even a clear common definition of what "multisites" would mean.
I could not wait for months or years for a solution to come from outside so I started to think about a solution/workaround.. and I found it!
So here it is, just 3 little steps:
- add a few lines in your .htaccess file
- add a first Regular Labs ReReplacer rule to adapt the <head> section of your page
- add a second Regular Labs ReReplacer rule to adapt the <body> section of your page
Steps 2 and 3 make sure that all links within Joomla are correct (note that they can be combined if you wish by using some regex).
But this does not prevent a human being or a robot to reach manually a "wrong" combination of domain name and language tag: in that case, Joomla would simply display the page keeping the "wrong" domain name... but obviously we want to force the right domain name (ao to avoid hurting your SEO for different reasons like Duplicate Content or Redirections). That is what Step 1 does.
Interested to do the same ?
Simply head to https://github.com/woluweb/a_different_domain_name_for_each_language to see the detailed explanation.
Taking advantage of Child Templates
One of the main goals of the migration was to take advantage of the Accessibility features of Joomla 4 in general and of the default front-end Template "Cassiopeia" in particular.
And since Cassiopeia is also Child Templates ready (if you don't know what Child Templates are you should definitely have a look at this previous article of the Joomla Community Magazine published in May 2022), we thought it could be a nice way to improve the way to build our websites.
It all starts with making a duplicate of the original /templates/cassiopeia/index.php file to /template/cassiopeia_mychild/index.php.
Having a more complex Header
As you can see on the website I needed 3 rows in my <header>.
So I edited the index.php file of my Child Template in order to add a Row and a couple of Positions in the <header> section
Having a script called only on Article View
This website makes a heavy use of graphics built with HighCharts. This means that I have to load about 10 javascript files (highcharts.js but also extras like heatmap.js, export.js etc).
Since I have a Child Template all I need to do is to copy/paste the call to these scripts in the <head> part of our own index.php file.
Example:
<script src="https://code.highcharts.com/highcharts.js"></script>
But loading this on every single page is not good for performance. The script is indeed only needed for Single Article views (not for Blog views or other views).
So I simply wrap all my scripts lines between
<?php if ('article' == $view) { ?>
and
<?php } ?>
meaning that they are only loaded on Single Article views.
Having a script called only if not logged in
For Analytics the owners of the website uses Matomo because they care for Privacy.
But the statistics were not only reflecting the hits of real Visitors but also of the Authors themselves (up to several hundred hits per day when new Studies are published and reviewed internally).
So the idea came to add the Matomo script only if the users are not logged in (which can also be called Public or Guest mode if you are familiar with the Access Control Levels).
To do that I first need to add this line in the <head> part of our own index.php file, which will allow us to "play" with the User:
<?php $user = Factory::getUser(); ?>
Then I simply wrap all my Analytics script between
<?php if ($user->id == 0) : // Check user id is zero, if it is zero means user not logged in Joomla. Otherwise could use if ($user->guest) ?>
and
<?php endif; ?>
Adding animations to Cassiopeia
Finally I also wanted to be able to add animations automatically to our Titles (<h1>, <h2> etc).
There is a nice library allowing to add animations very simply: https://animate.style/
When you enable animate.style, all you need to do to animate an element is to add a few classes to them. Example:
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
Of course you could add these classes manually to your elements. But the idea here is
- first to have those classes added automatically by our javascript
- second and most important: to add those classes only when the element in question appears on the screen (no point in animating all our elements before we even get to see them because we first have to scroll down the page...)
There are 2 steps to do this: first the CSS and second the Javascript.
Step 1 - adding the CSS
In the <head> part of our own index.php file I add the following link:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
Step 2 - adding the JS
As you probably know, you can simply add your own CSS rules to Cassiopeia by creating a user.css file in /media/templates/site/cassiopeia_mychild/css folder.
Actually, the same way you can add your own Javascript to Cassiopeia by creating a user.js file in /media/templates/site/cassiopeia_mychild/js folder.
Note: the javascript below uses what is called "intersection-observer" to know when an element comes effectively on the screen.
// We can trigger the animation thanks to the intersection-observer
// https://cheewebdevelopment.com/vanilla-js-scroll-events-animations-with-intersectionobserver-api/
// https://grafikart.fr/tutoriels/intersection-observer-804
// The script should only load when the page is ready
// https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
// https://javascript.info/onload-ondomcontentloaded (available in many languages like https://fr.javascript.info/onload-ondomcontentloaded)
document.addEventListener('DOMContentLoaded', function() {
let observer = new IntersectionObserver(function (observables) {
observables.forEach(function (observable) {
// The element becomes visible
if (observable.intersectionRatio > 0.5) {
observable.target.classList.add('animate__animated')
observable.target.classList.add('animate__fadeInUp')
observer.unobserve(observable.target)
}
})
}, {
threshold: [0.5]
});
// We observe our elements
let items = document.querySelectorAll('.image, h1, h2, h3, h4, h5, h6')
items.forEach(function (item) {
observer.observe(item)
});
});
Using J4's Web Asset Manager
To make things simple, in the above example we called the Style Sheets and the Scripts directly in the index.php of our (child) template.
Actually, since J4, a better way to call those is to use the Web Asset Manager.
Here is some information about how you could/should adapt my examples above when using the Web Asset Manager:
- Introduction: https://www.joomlashack.com/blog/tutorials/web-assets-in-joomla-4/
- Official doc: https://docs.joomla.org/J4.x:Web_Assets
- Astrid's explanation: https://blog.astrid-guenther.de/en/joomla-template-wa/
- Technical information: https://api.joomla.org/cms-4/classes/Joomla-CMS-WebAsset-WebAssetManager.html
Conclusion
As you can see many things that could have required an extension with Joomla 3 can be done very simply with Joomla 4
- either by finding a simple workaround like in the first example above for multiple domain names
- either by using the native features of Joomla 4 like Child Templates
I am just scratching the surface here of what is possible with J4. Feel free to get back to me to improve these examples or to propose even more tips & tricks!
About the author
By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/
Comments 4
We have an extension MightySites which can realize this functionality easily, with tons of other features!
It looks like you didn't explore JED or didn't even search Google for "Joomla Case Study: a different domain for each language"
Sorry AlberBrains. I knew of "MightySites" but I had always thought it was for multisites (not for multidomains) given the Description "MightySites allows you to run multiply sites on same Joomla installation and share database data between different Joomla sites."
Besides my article was initially planned in August for publication in September... but I see that since then a new extension has also been released: n3t Language Domains.
But the point of the different examples of this article was also to say that sometimes a little workaround or 2 lines of code can also do the trick.
Hi Marc,
Maybe using the new Asset Manager for loading all your js and css stuff will improve your perf (check your LCp and FCP on article page ^^) Cassiopea itself is not a revolution but the way it demo how to manage a modfern template with J!4 is.
Thanks for your example and sharing of course ;-)
Txs for your suggestions @semaphore.
If you could send me a short email with an example of code adapted to use the Asset Manager (based on my examples above) I would be very very pleased to adapt this article and my other presentations