I have a silly problem when trying to redirect a user to a different version of the same site depending on the browser's language.
Actually the user seems to be properly redirected to the language site version, the problem is that the site doesn't load the CSS and JS files propperly (I think it is due to its folder structure), and I'm not sure about how can I solve it.
To perform the redirection I have set a file called 'index.php' which is placed at the root folder, it has the following PHP code:
<?php
header("Location: " . getLanguage());
function getLanguage(){
$availableLanguages = array('es', 'en');
$defaultLanguage = 'en';
$token = strtok($_SERVER['HTTP_ACCEPT_LANGUAGE'], ",;");
while ($token !== false) {
$language = substr($token, 0, 2);
if (in_array($language, $availableLanguages)) {
return $language;
}
$token = strtok(",;");
}
return $defaultLanguage;
}
?>
As you can see there are only 2 languages (english and spanish).
The next step was to place 2 different folders with the respective 'index.html' file on them:
/es --> for the spanish index.html version /en --> for the english index.html version
So we can see the following example folder structure at the server:
When the user enters to the site, the php file redirects him to the '/en' or '/es' folder deppending on the browser language... Then the user loads the 'index.html' file with the followihg HTML structre:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my site in english</title>
<link rel='icon' href='img/favicon.png'>
<!--Styles-->
<link href="css/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>this is an example</p>
<!--Styles-->
<script src="js/script.js"></script>
</body>
</html>
So as you could see, the 'index.html' defines the paths for css,img and js files that are at placed at the 'root/css','root/img' and 'root/js' folders, however the website doesn't load them... and I don't know why?
The index file is now inside /en or /es, therefore:
<link href="css/styles.css" type="text/css" rel="stylesheet">
should be:
<link href="../css/styles.css" type="text/css" rel="stylesheet">
note the added ../ to go back a folder. Same goes for the js and other resources you have.
I would recommend using absolute paths, that way you will not face similar problems:
<link href="/css/styles.css" type="text/css" rel="stylesheet">
Note the / at the beginning of the URI.
You need to adjust the references to your external files to either "step up" a directory (e.g., ../css/styles.css) or start from the root directory (e.g., /css/styles.css). I'd recommend the latter as it allows you do move your anywhere within your directory structure without having to change any of the references.
If you're viewing, for example, the English page, the reference as you have it is looking for a file at http://yourdomain.tld/en/css/styles.css which doesn't exist.