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:
- http/img/picture.jpg
- http/js/script.js
- http/css/style.css
- http/en/index.html (the english version of the site)
- http/es/index.html (the spanish version of the site)
- http/index.php
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?
