Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyFrom your description, it seems like you are trying to implement a language switcher for your website. However, the issue here is that you are only changing the URL parameter but not actually loading the content from the respective language folder.
The JavaScript code you have written only changes the URL parameter
Here is a simple example of how you can do it:
``
Please note that this is a simple example and might not work perfectly for your case. You might need to adjust it according to your project's structure and requirements.
multilingual site
multilingual site using duplication
there is a folder along the way
path:
Desktop\project\name_project
which is the root of the site project
They told me to translate the site from English to Russian through duplication, duplicate the necessary files in the /ru folder, which is along the way
path:
Desktop\project\name_project/en
It seemed like I connected everything as it should, but nothing was working at all, so I decided to resort to GPT chat, 2 hours to no avail)
file for Russian version (header.html)
HTML:
MENU
services
about us
portfolio
contacts
EN
/
RU
for English
HTML:
MENU
services
about us
portfolio
contacts
EN
/
RU
when you click on RU, the page simply reloads and takes you to the link http://localhost:3333/?lang=ru and the same back only to http://localhost:3333/?lang=en, the switch returns to the active form on EN)
what is the problem?
languageswitcher.js:
document.addEventListener(‘DOMContentLoaded’, function () {
const englishLink = document.getElementById(‘englishLink’);
const russianLink = document.getElementById(‘russianLink’);
const languageSeparator = document.getElementById(‘languageSeparator’);
function switchLanguage(language) {
console.log(`Switching to ${language}`);
const currentPath = window.location.pathname;
const params = new URLSearchParams(window.location.search);
const currentLang = params.get(‘lang’) || ‘en’;
if (language !== currentLang) {
params.set(‘lang’, language);
const newPath = `${currentPath}?${params.toString()}`;
console.log(`New path: ${newPath}`);
window.location.href = newPath;
}
}
englishLink.addEventListener(‘click’, function (event) {
event.preventDefault();
switchLanguage(‘en’);
});
russianLink.addEventListener(‘click’, function (event) {
event.preventDefault();
switchLanguage(‘ru’);
});
// Check the language when loading the page
const params = new URLSearchParams(window.location.search);
const currentLang = params.get(‘lang’) || ‘en’;
console.log(`Current language: ${currentLang}`);
// If the language in the request parameters does not match the current language, switch the language
if (currentLang === ‘ru’) {
switchLanguage(‘ru’);
}
});
Sign in
to post a answer1 Replies ↴
Davinci•003 auto-replyFrom your description, it seems like you are trying to implement a language switcher for your website. However, the issue here is that you are only changing the URL parameter but not actually loading the content from the respective language folder.The JavaScript code you have written only changes the URL parameter
lang to en or ru but it does not load the content from the respective language folder. You need to modify your code to load the content from the respective language folder when the language is switched.Here is a simple example of how you can do it:
``
javascript
document.addEventListener('DOMContentLoaded', function () {
const englishLink = document.getElementById('englishLink');
const russianLink = document.getElementById('russianLink');
function switchLanguage(language) {
console.log(Switching to ${language});
const currentPath = window.location.pathname;
const newPath = currentPath.replace(//(en|ru)//, /${language}/);
console.log(New path: ${newPath});
window.location.href = newPath;
}
englishLink.addEventListener('click', function (event) {
event.preventDefault();
switchLanguage('en');
});
russianLink.addEventListener('click', function (event) {
event.preventDefault();
switchLanguage('ru');
});
});
`
In this code, when the language is switched, the Please note that this is a simple example and might not work perfectly for your case. You might need to adjust it according to your project's structure and requirements.