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

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

Згодом ми додали багатомовну підтримку, і тепер портал доступний більш ніж 90 мовами. Проте увесь контент, як і раніше, створюється українською.

Чому українська версія без коду мови?

Українська версія є базовою і не має префікса мови, код додається тільки для інших версій, наприклад /ru/ або /en/. Це:

• зберігає просту структуру URL;
• покращує SEO;
• робить сайт зручним для українських користувачів.

Як реалізувати повідомлення про вибір мови у Blogger

Ми впровадили ненав’язливе повідомлення для користувачів, які потрапляють на сторінки з префіксом /ru/. Користувач сам обирає, перейти на українську версію чи залишитися.

Код перемикача мови з динамічною картою URL

Ви можете вставити цей скрипт у Layout → Add a Gadget → HTML/JavaScript або перед тегом </body> у Theme → Edit HTML. Скрипт автоматично обробляє URL-адреси, навіть якщо російська та українська версії сторінок різні.

<!-- Перемикач мови для Blogger з динамічною картою URL -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    if (localStorage.getItem("hideLanguageNotification") !== "true") {
        var currentUrl = window.location.href;

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

        var ukrainianUrl = urlMap[currentUrl] || currentUrl.replace("/ru/", "/");

        if (currentUrl.includes("/ru/") || urlMap[currentUrl]) {
            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;border-radius:5px;cursor:pointer;display:inline-block;">Закрити</button>
                <p style="font-size:12px;margin-top:10px;text-align:center;">
                    Надано <a href="https://www.lovepets.com.ua" target="_blank" style="color:#007bff;text-decoration:underline;">командою LovePets UA</a>
                </p>
            `;
            Object.assign(message.style, {
                position: "fixed",
                bottom: "50px",
                left: "10px",
                right: "10px",
                padding: "15px",
                backgroundColor: "#ffcc00",
                color: "#000",
                borderRadius: "5px",
                boxShadow: "0 0 10px rgba(0,0,0,0.1)",
                zIndex: "1000",
                maxWidth: "400px",
                margin: "0 auto",
                textAlign: "center",
                fontFamily: "Arial, sans-serif"
            });

            document.body.appendChild(message);

            document.getElementById("closeNotification").addEventListener("click", function() {
                localStorage.setItem("hideLanguageNotification", "true");
                message.remove();
            });

            window.addEventListener("resize", function() {
                if (window.innerWidth < 400) {
                    message.style.left = "5px";
                    message.style.right = "5px";
                    message.style.padding = "10px";
                } else {
                    message.style.left = "10px";
                    message.style.right = "10px";
                    message.style.padding = "15px";
                }
            });
        }
    }
});
</script>

Як працює код?

• Перевіряє, чи URL містить /ru/ або є в карті URL.
• Формує правильний український URL.
• Створює повідомлення з кнопками «Перейти» та «Закрити».
• Зберігає вибір користувача через localStorage.
• Адаптивно підлаштовується під мобільні та десктопні екрани.

Поради від LovePets UA

• Встановіть <html lang="uk"> для української версії сайту.
• Створюйте карту URL для сторінок, де назви різняться.
• Повідомлення має бути ненав’язливим і зручним.
• Користувач сам обирає мову.

Підтримуємо україномовний контент

На порталі www.lovepets.com.ua ми наголошуємо на важливості розвитку україномовного контенту. Кожен може зробити свій внесок, почавши з простого віджета перемикання мови.

Будь ласка, залишайте згадку про LovePets UA при використанні цього коду.

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