multilingual duplication method html scss js gulp

15 views Asked by At

there is a folder along the way 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 Desktop\project\name_project\ru

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)

<a href="/" class="logo">

  <img src="/ru/images/logo.svg" alt="">

</a>

<nav class="header__menu menu">

  <div class="menu__hamburger" id="menu">МЕНЮ</div>

  <div class="menu__holder" id="nav">

    <ul class="menu__list">

      <li class="menu__item"><a href="/#services" class="menu__link link anchor" id="services">услуги</a></li>

      <li class="menu__item"><a href="/#about" class="menu__link link anchor" id="about">о нас</a></li>

      <li class="menu__item"><a href="/#portfolio" class="menu__link link anchor" id="portfolio">портфолио</a></li>

      <li class="menu__item"><a href="/#contacts" class="menu__link link anchor" id="contacts">контакты</a></li>

    </ul>

    <div class="menu__close" id="menuClose"></div>

  </div>

</nav>

<div class="lang">

  <a href="#" class="lang__item lang__item--active" data-lang="en" id="englishLink">EN</a>

  <span id="languageSeparator">/</span>

  <a href="/ru/index.html" class="lang__item" data-lang="ru" id="russianLink">RU</a>

</div>

for english vers

<a href="/" class="logo">

  <img src="/images/logo.svg" alt="">

</a>

<nav class="header__menu menu">

  <div class="menu__hamburger" id="menu">MENU</div>

  <div class="menu__holder" id="nav">

    <ul class="menu__list">

      <li class="menu__item"><a href="/#services" class="menu__link link anchor" id="services">услуги</a></li>

      <li class="menu__item"><a href="/#about" class="menu__link link anchor" id="about">о нас</a></li>

      <li class="menu__item"><a href="/#portfolio" class="menu__link link anchor" id="portfolio">портфолио</a></li>

      <li class="menu__item"><a href="/#contacts" class="menu__link link anchor" id="contacts">контакты</a></li>

    </ul>

    <div class="menu__close" id="menuClose"></div>

  </div>

</nav>

<div class="lang">

  <a href="#" class="lang__item lang__item--active" data-lang="en" id="englishLink">EN</a>

  <span id="languageSeparator">/</span>

  <a href="/ru/index.html" class="lang__item" data-lang="ru" id="russianLink">RU</a>

</div>

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');
});




const params = new URLSearchParams(window.location.search);
const currentLang = params.get('lang') || 'en';
console.log(`Current language: ${currentLang}`);


if (currentLang === 'ru') {
    switchLanguage('ru');

}
});

need to do this with folders ru index.html was loaded when you clicked on the RU button`

0

There are 0 answers