Автоматический языковой переключатель для многостраничного сайта [недооформеленно]
Данный функционал управления языками разработан с целью упрощения работы с многостраничным сайтом на двух языках.
Например, если у вас 20 стр. сайт (10 стр*2 языка), то вам нужно продублировать меню на 20 страниц и вручную изменить ссылку в языковом блоке. Если вам нужно внести изменение в меню, то придется проделать те же действия для 20 страниц. Это отнюдь не удобно, причем страниц может быть и 200+.
Теперь вам достаточно создать 2 меню и разместить его в хедере.
В основе его лежит скрипт, который основываясь на текущем URL страницы управляет относительными путями ссылок в языковом меню а так же подставляет меню и на нужном языке в зависимости от языка страницы.
Для корректной работы скрипта, прописываем свои URL в настройках английских страниц и точно те же URL прописываем для русских страниц добавляя окончание ru, например: /page и /pageru
Как это реализовать:
Для Хедера
1. Добавляем Эффект загрузки страницы — T228
2. Добавляем меню ME301 для первого языка, в Контенте добавляем 2 языка без ссылок, напр.: En и Ru
3. Дублируем ME301 и изменяем контент, чтобы получить вторую языковую версию
4. Добавляем моб. меню ME401, так же добавляем 2 языка без ссылок
5. Дублируем ME401 и делаем из него вторую языковую версию
6. Добавляем HTML-код — T123 и вставляем в него код Header
7. В коде заменяем:
rec111111111 на ID блока ME301 — En версия
rec222222222 на ID блока ME301 — Ru версия
rec333333333 на ID блока ME401 — En версия
rec444444444 на ID блока ME401 — Ru версия
Для Футера
1. Добавляем Строка ссылок и копирайт — FT102
2. Создаем дубль последней и делаем из нее вторую языковую версию
3. Добавляем HTML-код — T123 и вставляем в него код Header
7. В коде заменяем:
rec555555555 на ID блока FT102 — En версия
rec666666666 на ID блока FT102 — Ru версия
Например, если у вас 20 стр. сайт (10 стр*2 языка), то вам нужно продублировать меню на 20 страниц и вручную изменить ссылку в языковом блоке. Если вам нужно внести изменение в меню, то придется проделать те же действия для 20 страниц. Это отнюдь не удобно, причем страниц может быть и 200+.
Теперь вам достаточно создать 2 меню и разместить его в хедере.
В основе его лежит скрипт, который основываясь на текущем URL страницы управляет относительными путями ссылок в языковом меню а так же подставляет меню и на нужном языке в зависимости от языка страницы.
Для корректной работы скрипта, прописываем свои URL в настройках английских страниц и точно те же URL прописываем для русских страниц добавляя окончание ru, например: /page и /pageru
Как это реализовать:
Для Хедера
1. Добавляем Эффект загрузки страницы — T228
2. Добавляем меню ME301 для первого языка, в Контенте добавляем 2 языка без ссылок, напр.: En и Ru
3. Дублируем ME301 и изменяем контент, чтобы получить вторую языковую версию
4. Добавляем моб. меню ME401, так же добавляем 2 языка без ссылок
5. Дублируем ME401 и делаем из него вторую языковую версию
6. Добавляем HTML-код — T123 и вставляем в него код Header
7. В коде заменяем:
rec111111111 на ID блока ME301 — En версия
rec222222222 на ID блока ME301 — Ru версия
rec333333333 на ID блока ME401 — En версия
rec444444444 на ID блока ME401 — Ru версия
Для Футера
1. Добавляем Строка ссылок и копирайт — FT102
2. Создаем дубль последней и делаем из нее вторую языковую версию
3. Добавляем HTML-код — T123 и вставляем в него код Header
7. В коде заменяем:
rec555555555 на ID блока FT102 — En версия
rec666666666 на ID блока FT102 — Ru версия
Header
/* скрываем ME301 меню на мобайле */
@media screen and (max-width: 980px) {
.t228 {
display: none!important;
}
}
/* убираем видимость мобайл меню на десктопе */
@media screen and (min-width: 980px) {
#rec333333333, #rec444444444 {
display: none!important;
}
}
</style>
<script>
// скрываем одну из версий меню в хедере
const ids = /ru$/.test(window.location.pathname) ? ['rec111111111', 'rec333333333'] : ['rec22222222', 'rec444444444'];
ids.forEach((id) => document.getElementById(id).style.display = 'none');
ids.forEach((id) => $('#' + id).hide());
// скрываем одну из версий меню в футере
const id = /ru$/.test(window.location.pathname) ? 'rec555555555' : 'rec666666666';
document.querySelector('#' + id).style.display = 'none';
$('#' + id).hide();
// добавляем хвост ru
$('div.t228__right_langs_lang a').last().attr('href', window.location.pathname + 'ru');
<!-- мобайл меню -->
$('div.t280__lang a').last().attr('href', window.location.pathname + 'ru');
// удаляем хвост ru
$('div.t228__right_langs_lang a').first().attr('href', window.location.pathname.slice(0, -2));
<!-- мобайл меню -->
$('div.t280__lang a').first().attr('href', window.location.pathname.slice(0, -2));
</script>
Footer
<script>
// скрываем одну из версий меню в футере
const id = /ru$/.test(window.location.pathname) ? 'rec555555555' : 'rec666666666';
document.querySelector('#' + id).style.display = 'none';
$('#' + id).hide();
</script>
