Сайт с двумя языками на Craftum

Во время работы на Craftum был реализован кейс с двумя языками. Подобного штатного функционала пока нет. Написали свой простенький скрипт на чиcтом js.

Скрипт использует любую шапку с двумя кнопками — первая кнопка становится «Ру», а вторая «En». Подвал подойдет любой, в нем кнопок нет, есть только пункты меню.

Для того чтобы заказчик не погряз в разборе кода все управления языками мы свели к штатным манипуляциям.

Чтобы использовать сквозную шапку на всём проекте мы сделали пункты меню чередующимися: пункт 1, item 1, пункт2, item 2, ...

В подвале тоже самое, что и в шапке. Номер телефона и email от языка не зависят, а копирайт может быть и на английском, не критично.

Каждая страница на русском имеет свой клон на английском с суффиксом «-en», а главная «/» - русская, «/en» - английская.

Как это всё работает:

1. При первом заходе на сайт скрипт смотрит на какую станицу зашел посетитель. Отображает нужную версию меню и запоминает язык посетителя в браузере.
2. Если посетителю нужно сменить язык, при клике язык меняется в меню, запоминается новый язык в браузере, а посетителя, если это необходимо, перенаправляют на ту же страницу, но уже с выбранным языком.
3. Когда посетитель зайдёт на сайт снова, язык будет выставлен на выбранный при последнем посещении. Если ссылка по которой пользователь перейдёт будет вести на другой язык скрипт перенаправит посетителя на версию страницы с выбранным языком.

Получилось просто и удобно.

Для тех, кому нужны подробности под капотом

Для отображения версий меню, а так же выделения выбранного языка мы:

— добавляли и убирали к body класс «en-en»;

— для меню в шапке и подвале использовали псевдокласс CSS «:nth-child()» с параметрами «even» - четные элементы и «odd» - нечетные, соответственно для «Ру» (без класса en-en у body) отображаются нечетные пункты меню, для «En» четные;

Для сохранения языка использовали local.storege.

Остальное в коде — копируйте, пользуйтесь.

ссылка на код https://github.com/aince-ru/craftum/blob/main/multilang.html

Если кому-то помогло, скажите спасибо в комментах, жамкните сердечко :)