Перемикач мови для сайту: як виводити користувачам повідомлення з вибором мовної версії сайту? - 💙💛 Fan Club

Наша команда LovePets UA створила портал LovePets у 2021 році як україномовний ресурс. Спочатку всі URL-адреси були українською мовою і не містили код мови. Згодом ми розширили наш проєкт, додавши багатомовну версію сайту, і тепер наш ресурс доступний більш ніж 90 мовами. Однак весь наш контент, як і раніше, створюється українською мовою.

Крім того, українська версія порталу, як і раніше, не містить коду мови у своїх URL-адресах. Код мови додається тільки на тих сторінках, які відрізняються від оригінальної мови — української. Це дає змогу зберегти єдину і просту структуру URL для користувачів, що забезпечує зручний доступ до контенту для всіх українців.

Щоб полегшити доступ до нашого порталу для користувачів з України, ми впровадили ненав’язливе сповіщення для тих, хто заходить за URL з кодом мови /ru/. Це повідомлення пропонує переключитися на українську мову, зберігаючи комфорт і зручність для всіх відвідувачів.

У цій статті ми поділимося простим кодом перемикача мови з повідомленням, який ви зможете розмістити на своєму сайті. Це допоможе вам дотримуватися вимог Закону України «Про забезпечення функціонування української мови як державної» і забезпечити зручність для ваших користувачів, без примусового редиректу на певну мову.

Створення інтерактивного повідомлення про мовну версію сайту: покрокова інструкція

Варто одразу згадати, що наведений нижче код повідомлення про зміну мови можна адаптувати для будь-якої мовної версії. Однак є кілька важливих моментів, які слід врахувати:

Код мови в HTML: Переконайтеся, що у вашому HTML-коді встановлений код мови за допомогою тега <html lang=«uk»> . Це має бути зроблено як для мовної версії за замовчуванням, так і для інших мовних версій вашого сайту.
Структура URL: Код адаптовано для сайтів, які використовують підпапкову структуру мовних версій, а не субдомени.
Назви URL-адрес: URL-адрес мають бути однаковими для всіх мовних версій. Тобто, версія сторінки за замовчуванням https://www.lovepets.com.ua/pro-sajt буде такою самою, тільки з префіксом мови, /ru/ наприклад: https://www.lovepets.com.ua/ru/pro-sajt. Як бачимо, назва /pro-sajt однакова для української та російської версії.

Тепер ми розберемо приклад коду, який виводить повідомлення з пропозицією переключитися на українську версію, якщо користувач потрапив на російськомовну сторінку. Наприклад:

1. Користувач відкрив сторінку: https://www.lovepets.com.ua/ru/.
2. У коді сторінки вказана мовна розмітка у форматі .

3. В URL-адресі присутній код мови /ru/.
4. Скрипт, ґрунтуючись на пунктах 2 і 3, виводить повідомлення з пропозицією переключитися на українську версію.

Коли користувач бачить повідомлення про зміну мови, у нього виникає дилема: перейти на українську версію або залишитися на російськомовній сторінці. Якщо він вибере перехід на українську версію, то буде перенаправлений на відповідну сторінку в тому ж вікні браузера. Скрипт працює просто: він видаляє мовний префікс з URL і перенаправляє користувача на мову за замовчуванням. Однак важливо, щоб у вашого сайту всі мовні версії мали однакові назви URL-адрес, як згадувалося раніше.

Якщо ж користувач вирішить залишитися на поточній версії сайту і натисне кнопку «Закрыть», його вибір буде запам’ятовувано. Протягом однієї сесії повідомлення більше не з’явиться. Це досягається за допомогою локального сховища браузера ( localStorage ), яке зберігає дані навіть після перезавантаження сторінки.

Як це працює:

LocalStorage зберігає інформацію про те, що користувач закрив повідомлення.
Під час наступного відвідування сайту скрипт перевіряє, чи є запис у localStorage . Якщо він є, повідомлення не показується.

Особливості:

Дані в localStorage зберігаються на постійній основі — доти, доки користувач сам не очистить кеш браузера.
Це означає, що сповіщення не відображатиметься, навіть якщо користувач закриє вкладку і знову зайде на сайт.
За необхідності можна налаштувати гнучкішу поведінку, наприклад, показувати повідомлення повторно через деякий час. Для цього можна використовувати інші методи зберігання даних, як-от Cookies або тимчасове сховище в sessionStorage .

Такий підхід зручний для користувачів, оскільки він не нав’язливий, і водночас поважає їхній вибір. Якщо користувач вирішить змінити мову пізніше, він завжди зможе зробити це через віджет зміни мови на нашому порталі.

Тепер, ось сам код сповіщення з можливістю перемкнути версію мови, який ви можете розмістити в footer свого сайту за допомогою прямого додавання його в html код або через плагін для WordPress: WPCode — Insert Headers and Footers.

Додайте код перед тегом


</body>

що закривається. Сам код:


<!-- Перемикач мови -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Перевіряємо, чи не закривав користувач повідомлення раніше
    if (localStorage.getItem("hideLanguageNotification") !== "true") {
        // Перевіряємо значення атрибута lang
        if (document.documentElement.lang === "ru") {
            // Отримуємо поточний URL
            var currentUrl = window.location.href;
            
            // Прибираємо /ru/ з URL
            var ukrainianUrl = currentUrl.replace("/ru/", "/");

            // Створюємо елемент для повідомлення
            var message = document.createElement("div");
            message.innerHTML = `
                <p style="margin: 0 0 10px 0;">Вы находитесь на русскоязычной версии сайта.</p>
                <a href="${ukrainianUrl}" style="background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; display: inline-block; margin-bottom: 10px;">Перейти на украинскую версию</a>
                <button id="closeNotification" style="background-color: red; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; display: inline-block;">Закрыть</button>
                <p style="font-size: 12px; margin-top: 10px; text-align: center;">
                    Надано <a href="https://www.lovepets.com.ua/eeat/eksperty-lovepets-ua" target="_blank" style="color: #007bff; text-decoration: underline;">командою LovePets UA</a>
                </p>
            `;
            message.style.position = "fixed";
            message.style.bottom = "50px"; // Додаємо відступ знизу для адаптивності
            message.style.right = "10px";
            message.style.left = "10px";  // Додаємо відступ зліва для адаптивності
            message.style.padding = "15px";
            message.style.backgroundColor = "#ffcc00";
            message.style.color = "#000";
            message.style.borderRadius = "5px";
            message.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.1)";
            message.style.zIndex = "1000";
            message.style.maxWidth = "400px";  // Обмежуємо максимальну ширину для великих екранів
            message.style.margin = "0 auto";  // Центруємо на екранах

            // Додаємо повідомлення на сторінку
            document.body.appendChild(message);

            // Обробник закриття повідомлення
            document.getElementById("closeNotification").addEventListener("click", function() {
                // Зберігаємо інформацію про те, що повідомлення було закрито
                localStorage.setItem("hideLanguageNotification", "true");
                // Видаляємо повідомлення
                message.remove();
            });
        }
    }
});
</script>

Як це працює:

Перевірка мови сторінки:
- Якщо мову сторінки встановлено як lang=«ru» , скрипт активується.
Формування URL для української версії:
- Поточний URL перевіряється на наявність префікса /ru/ . Якщо префікс знайдено, його видаляють, щоб сформувати URL української версії без префікса мови.
Створення та виведення повідомлення:
- На сторінці з’являється блок із текстом і кнопкою, що пропонує перейти на українську версію. Кнопка веде на URL без /ru/ .
Перевірка localStorage :
- Скрипт перевіряє наявність ключа hideLanguageNotification зі значенням «true» . Якщо ключ існує, повідомлення не відображається.
Закриття повідомлення:
- Під час натискання на кнопку «Закрыть» в localStorage записується значення «true» , і повідомлення видаляється з екрана. Повідомлення більше не з’являється до кінця сесії.
Перехід на українську версію:
- Кнопка для переходу на українську версію активна і веде на відповідний URL.

Стилізація повідомлення:

Повідомлення стилізоване для зручності сприйняття і розташоване в правому нижньому кутку сторінки. Ось приклад основних CSS-властивостей:


message.style.position = "fixed"; /* Повідомлення залишається на екрані під час прокручування */
message.style.bottom = "50px"; /* Відступ від нижньої межі екрана */
message.style.right = "10px"; /* Відступ від правої межі екрана */
message.style.padding = "15px"; /* Внутрішні відступи */
message.style.backgroundColor = "#ffcc00"; /* Світло-жовте тло для помітності */
message.style.color = "#000"; /* Чорний текст для контрасту */
message.style.borderRadius = "5px"; /* Закруглені кути для сучасного зовнішнього вигляду */
message.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.1)"; /* Тінь для створення об'єму */
message.style.zIndex = "1000"; /* Поверх інших елементів сторінки */
message.style.maxWidth = "400px"; /* Обмеження ширини для великих екранів */

Ви можете кастомізувати ці стилі на свій розсуд, додаючи або змінюючи параметри залежно від дизайну вашого сайту.

Особливості та гнучкість:

Дані зберігаються в localStorage , поки користувач не очистить кеш браузера.
Для більш гнучкого налаштування сповіщення (наприклад, повторна його поява через певний час) можна використовувати Cookies або sessionStorage .

Перемикач мови з російської за замовчуванням на українську версію сайту з кодом мови в url-адресі

А що робити тим, у кого за замовчуванням стоїть російськомовна версія сата без префікса /ru/, а українська версія сайту, містить префікс /uk/? Ось приклад коду:


<!-- Перемикач мови -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Перевіряємо, чи не закривав користувач повідомлення раніше
    if (localStorage.getItem("hideLanguageNotification") !== "true") {
        // Перевіряємо значення атрибута lang
        if (document.documentElement.lang === "ru") {
            // Отримуємо поточний URL
            var currentUrl = window.location.href;

            // Створюємо новий URL з додаванням префікса /uk/
            var ukrainianUrl;
            if (currentUrl.includes("/uk/")) {
                ukrainianUrl = currentUrl; // Якщо вже є префікс /uk/, не змінюємо
            } else {
                var urlParts = currentUrl.split('/');
                urlParts.splice(3, 0, 'uk'); // Вставляємо 'uk' після домену
                ukrainianUrl = urlParts.join('/');
            }

            // Створюємо елемент для повідомлення
            var message = document.createElement("div");
            message.innerHTML = `
                <p style="margin: 0 0 10px 0;">Вы находитесь на русскоязычной версии сайта.</p>
                <a href="${ukrainianUrl}" style="background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; display: inline-block; margin-bottom: 10px;">Перейти на украинскую версию</a>
                <button id="closeNotification" style="background-color: red; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; display: inline-block;">Закрыть</button>
                <p style="font-size: 12px; margin-top: 10px; text-align: center;">
                    Надано <a href="https://www.lovepets.com.ua/eeat/eksperty-lovepets-ua" target="_blank" style="color: #007bff; text-decoration: underline;">командою LovePets UA</a>
                </p>
            `;
            message.style.position = "fixed";
            message.style.bottom = "50px"; // Додаємо відступ знизу для адаптивності
            message.style.right = "10px";
            message.style.left = "10px";  // Додаємо відступ зліва для адаптивності
            message.style.padding = "15px";
            message.style.backgroundColor = "#ffcc00";
            message.style.color = "#000";
            message.style.borderRadius = "5px";
            message.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.1)";
            message.style.zIndex = "1000";
            message.style.maxWidth = "400px";  // Обмежуємо максимальну ширину для великих екранів
            message.style.margin = "0 auto";  // Центруємо на екранах

            // Додаємо повідомлення на сторінку
            document.body.appendChild(message);

            // Обробник закриття повідомлення
            document.getElementById("closeNotification").addEventListener("click", function() {
                // Зберігаємо інформацію про те, що повідомлення було закрито
                localStorage.setItem("hideLanguageNotification", "true");
                // Видаляємо повідомлення
                message.remove();
            });
        }
    }
});
</script>

Що змінилося:

Префікс /uk/: Код тепер додає префікс /uk/ після доменного імені в URL (наприклад, з https://example.com/page вийде https://example.com/uk/page ).
Перевірка на існування префікса: Якщо в URL вже є /uk/ , скрипт не додає його повторно.
Обробка посилання: У разі, якщо користувач перебуває на російськомовній версії, створюється кнопка для перенаправлення на українську версію з додаванням правильного префікса.

Тепер під час переходу на українську версію сайту враховуватиметься тільки мовний код у HTML, і потрібний префікс автоматично додаватиметься.

Однак, нагадуємо ще раз, код (як у першому так і в другому прикладі) працює тільки в тому випадку, якщо у вас для російської та української версії, однакові назви URL-адрес.

Що робити, якщо URL-адреси різні і заміна тільки мовного префікса не вирішує завдання?

Якщо на сайті змінюється не тільки префікс мови, а й сама назва URL-адрес залежно від мови (наприклад, для однієї й тієї самої сторінки в російській версії може бути один URL, а в українській версії – інший), вам знадобиться використовувати заздалегідь відомі відповідності між російськими та українськими URL-адресами для коректного перенаправлення.

Підхід 1: Використовувати заздалегідь відому карту URL-адрес

Ви створюєте об’єкт, де кожному російськомовному URL відповідає український.
У разі виявлення, що користувач перебуває на російськомовній версії сайту, ви шукаєте поточний URL у цій карті та перенаправляєте на відповідний український URL.

Приклад:


<!-- Перемикач мови -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Перевіряємо, чи не закривав користувач повідомлення раніше
    if (localStorage.getItem("hideLanguageNotification") !== "true") {
        // Перевіряємо значення атрибута lang
        if (document.documentElement.lang === "ru") {
            // Отримуємо поточний URL
            var currentUrl = window.location.href;

            // Карта відповідностей URL між російською та українською версіями
            var urlMap = {
                "https://www.example.com/ru/about-us": "https://www.example.com/uk/pro-nas",
                "https://www.example.com/ru/contact": "https://www.example.com/uk/kontakty",
                "https://www.example.com/ru/services": "https://www.example.com/uk/poslugy"
                // Додавайте інші відповідності
            };

            // Знайти український URL для поточної сторінки
            var ukrainianUrl = urlMap[currentUrl] || currentUrl.replace("/ru/", "/uk/");

            // Створюємо елемент для повідомлення
            var message = document.createElement("div");
            message.innerHTML = `
                <p style="margin: 0 0 10px 0;">Вы находитесь на русскоязычной версии сайта.</p>
                <a href="${ukrainianUrl}" style="background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; display: inline-block; margin-bottom: 10px;">Перейти на украинскую версию</a>
                <button id="closeNotification" style="background-color: red; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; display: inline-block;">Закрыть</button>
                <p style="font-size: 12px; margin-top: 10px; text-align: center;">
                    Предоставлено <a href="https://www.lovepets.com.ua/eeat/eksperty-lovepets-ua" target="_blank" style="color: #007bff; text-decoration: underline;">LovePets UA</a>
                </p>
            `;
            message.style.position = "fixed";
            message.style.bottom = "50px"; // Додаємо відступ знизу для адаптивності
            message.style.right = "10px";
            message.style.left = "10px";  // Додаємо відступ зліва для адаптивності
            message.style.padding = "15px";
            message.style.backgroundColor = "#ffcc00";
            message.style.color = "#000";
            message.style.borderRadius = "5px";
            message.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.1)";
            message.style.zIndex = "1000";
            message.style.maxWidth = "400px";  // Обмежуємо максимальну ширину для великих екранів
            message.style.margin = "0 auto";  // Центруємо на екранах

            // Додаємо повідомлення на сторінку
            document.body.appendChild(message);

            // Обробник закриття повідомлення
            document.getElementById("closeNotification").addEventListener("click", function() {
                // Зберігаємо інформацію про те, що повідомлення було закрито
                localStorage.setItem("hideLanguageNotification", "true");
                // Видаляємо повідомлення
                message.remove();
            });
        }
    }
});
</script>

Як це працює:

urlMap — це об’єкт, де для кожного російського URL прописано відповідний український URL. Приклад: для сторінки /ru/about-us відповідна українська версія — це /uk/pro-nas .
Пошук українського URL:
- Якщо поточний URL присутній в об’єкті urlMap , користувач буде перенаправлений на зазначену українську версію.
- Якщо відповідності в urlMap не знайдеться, скрипт замінить префікс /ru/ на /uk/ за замовчуванням.
Адаптація для майбутніх змін: Якщо ви додасте нові сторінки з різними URL, просто оновлюйте карту urlMap , додаючи нові відповідності.

Оптимальний варіант, для невеликих сайтів тапа посадочних сторінок ,сайтів компаній або лендінгів.

Підхід 2: Використовувати динамічне визначення URL

Якщо у вас немає чіткої відповідності всіх URL-адрес або вона змінюється, можна спробувати інтеграцію з серверною логікою (наприклад, через базу даних), щоб визначати відповідність URL на льоту, але це більш складне рішення, що вимагає серверної інтеграції. Однак, це вже не в межах цього матеріалу.

Цей код дасть вам змогу гнучко керувати переходами, навіть якщо URL змінюється не тільки за префіксом мови.

Замість висновку

Як ви, можливо, помітили, на порталі LovePets UA використовується саме перший варіант коду. Ви можете розмістити його на своєму сайті або адаптувати під свої потреби. Цей принцип застосовний не тільки для мовних пар «російська <—> українська», а й для будь-яких інших комбінацій мов.

Ми щиро сподіваємося, що цей матеріал буде вам корисним. Зі свого боку, ми неодноразово наголошували на важливості підтримки та розвитку україномовного контенту.

Давайте разом сприяти розвитку якісного та безпечного контенту українською мовою і популяризувати його. І для початку, можна почати з використання віджета перемикання мови з російської на українську.

Ми будемо також вдячні вам, якщо ви не будете видаляти з коду згадку на нас. Заздалегідь, дякуємо.

Створення інтерактивного повідомлення про мовну версію сайту: покрокова інструкція

Перемикач мови з російської за замовчуванням на українську версію сайту з кодом мови в url-адресі

Що змінилося:

Що робити, якщо URL-адреси різні і заміна тільки мовного префікса не вирішує завдання?

Підхід 1: Використовувати заздалегідь відому карту URL-адрес

Приклад:

Як це працює:

Підхід 2: Використовувати динамічне визначення URL

Замість висновку

Підтримайте наш Портал

Support Our Website

Стань Автором

Приєднуйтесь до нашого Telegram 🐾