Jazykový přepínač pro web: jak zobrazit zprávu uživatelům s výběrem jazykové verze webu? - 💙💛 Fanklub

Náš tým LovePets UA vytvořené portál LovePets у v roce 2021 jako zdroj v ukrajinském jazyce. Zpočátku byly všechny adresy URL v ukrajinštině a neobsahovaly kód jazyka. Později jsme náš projekt rozšířili přidáním vícejazyčné verze webu a nyní našeho zdroje k dispozici ve více než 90 jazycích. Veškerý náš obsah je však stejně jako dříve vytvořen v ukrajinštině.

Ukrajinská verze portálu navíc stejně jako dříve ve svých URL neobsahuje kód jazyka. Kód jazyka je přidán pouze na stránky, které se liší od původního jazyka — ukrajinštiny. To umožňuje udržovat jednotnou a jednoduchou strukturu URL pro uživatele, která poskytuje pohodlný přístup k obsahu všem Ukrajincům.

Abychom usnadnili přístup na náš portál uživatelům z Ukrajiny, implementovali jsme nenápadné upozornění pro ty, kteří zadají URL s kódem jazyka /ru/. Tato zpráva nabízí přepnutí do ukrajinského jazyka a zachování pohodlí a pohodlí pro všechny návštěvníky.

V tomto článku budeme sdílet jednoduchý kód přepínače jazyků se zprávou, kterou můžete umístit na svůj web. To vám pomůže splnit požadavky zákona Ukrajiny „O zajištění fungování ukrajinského jazyka jako státního jazyka“ a zajistí pohodlí pro vaše uživatele bez nuceného přesměrování na určitý jazyk.

Vytvoření interaktivní zprávy o jazykové verzi webu: pokyny krok za krokem

Okamžitě stojí za zmínku, že níže uvedený kód upozornění na změnu jazyka lze upravit pro jakoukoli jazykovou verzi. Je však třeba zvážit několik důležitých bodů:

Jazykový kód v HTML: Ujistěte se, že váš kód HTML má kód jazyka nastavený pomocí značky <html lang=«uk»>. To by mělo být provedeno jak pro výchozí jazykovou verzi, tak pro jiné jazykové verze vašeho webu.
Struktura URL: Kód je přizpůsoben pro weby, které místo subdomén používají strukturu podsložek jazykových verzí.
Názvy URL: URL musí být stejné pro všechny jazykové verze. To znamená, že výchozí verze stránky https://www.lovepets.com.ua/pro-sajt bude stejná, pouze s předponou jazyka, /ru/, například: https://www.lovepets.com .ua/ru/pro -site. Jak vidíte, název /pro-sajt je stejný pro ukrajinskou i ruskou verzi.

Nyní budeme analyzovat příklad kódu, který zobrazuje zprávu s nabídkou přechodu na ukrajinskou verzi, pokud se uživatel dostal na ruskou stránku. Například:

1. Uživatel otevřel stránku: https://www.lovepets.com.ua/ru/.
2. Jazykové označení ve formátu je specifikováno v kódu stránky.

3. URL obsahuje kód jazyka /ru/.
4. Skript na základě bodů 2 a 3 zobrazí zprávu s nabídkou přechodu na ukrajinskou verzi.

Když uživatel uvidí zprávu o změně jazyka, má dilema: přejít na ukrajinskou verzi nebo zůstat na stránce v ruštině. Pokud se rozhodne přejít na ukrajinskou verzi, bude přesměrován na odpovídající stránku ve stejném okně prohlížeče. Skript funguje jednoduše: odstraní předponu jazyka z adresy URL a přesměruje uživatele do výchozího jazyka. Je však důležité, aby všechny jazykové verze vašeho webu měly stejné názvy URL, jak bylo zmíněno dříve.

Pokud se uživatel rozhodne zůstat na aktuální verzi webu a klikne na tlačítko "Zavřít", jeho volba se zapamatuje. Během jedné relace se zpráva znovu nezobrazí. Toho je dosaženo pomocí místního úložiště prohlížeče (localStorage), který uchovává data i po opětovném načtení stránky.

Jak to funguje:

LocalStorage ukládá informaci, že uživatel zprávu zavřel.
Při další návštěvě webu skript zkontroluje, zda je v něm záznam localStorage. Pokud ano, zpráva se nezobrazí.

Specifika:

Data v localStorage jsou uloženy trvale – dokud uživatel sám nevymaže mezipaměť prohlížeče.
To znamená, že oznámení se nezobrazí ani v případě, že uživatel kartu zavře a web znovu navštíví.
V případě potřeby můžete nakonfigurovat flexibilnější chování, například tak, aby se zpráva po nějaké době znovu zobrazila. K tomu můžete použít jiné způsoby ukládání dat, jako jsou soubory cookie nebo dočasné ukládání sessionStorage.

Tento přístup je pro uživatele pohodlný, protože není rušivý a zároveň respektuje jejich volbu. Pokud se uživatel rozhodne změnit jazyk později, může tak vždy učinit prostřednictvím widgetu pro změnu jazyka na našem portálu.

Nyní je zde samotný notifikační kód s možností přepnutí jazykové verze, kterou můžete umístit do zápatí svého webu přímým přidáním do html kódu nebo přes WordPress plugin: WPCode - Vložit záhlaví a zápatí.

Přidejte kód před značku

</body>

která se zavírá Samotný kód:

<!-- Перемикач мови -->
<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>

Jak to funguje:

Kontrola jazyka stránky:
- Pokud je jazyk stránky nastaven na lang=«ru», skript je aktivován.
Tvorba URL pro ukrajinskou verzi:
- Aktuální adresa URL je zkontrolována na předponu /ru/. Pokud je předpona nalezena, je odstraněna a vytvoří se adresa URL ukrajinské verze bez předpony jazyka.
Vytvoření a odeslání zprávy:
- Na stránce se objeví blok s textem a tlačítkem nabízející přepnutí na ukrajinskou verzi. Tlačítko vede na URL bez /ru/.
Audit localStorage:
- Skript zkontroluje klíč hideLanguageNotification s významem «true». Pokud klíč existuje, nezobrazí se žádná zpráva.
Zavírání zprávy:
- Po kliknutí na tlačítko "Zavřít" v localStorage hodnota se zaznamená «true»a zpráva se odstraní z obrazovky. Zpráva se již nezobrazí až do konce relace.
Přepněte na ukrajinskou verzi:
- Tlačítko pro přepnutí na ukrajinskou verzi je aktivní a vede na odpovídající URL.

Stylování zprávy:

Zpráva je stylizovaná pro snazší vnímání a je umístěna v pravém dolním rohu stránky. Zde je příklad základních vlastností 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"; /* Обмеження ширини для великих екранів */

Tyto styly si můžete přizpůsobit podle svých představ přidáním nebo změnou možností v závislosti na designu vašeho webu.

Vlastnosti a flexibilita:

Data jsou uložena v localStoragedokud uživatel nevymaže mezipaměť prohlížeče.
Pro flexibilnější nastavení upozornění (například jeho opětovné zobrazení po určité době) lze využít Cookies abo sessionStorage.

Přepnutí jazyka z ruštiny ve výchozím nastavení na ukrajinskou verzi webu s kódem jazyka v adrese URL

A co dělat pro ty, kteří mají standardně ruskou verzi sata bez předpony /ru/ a ukrajinskou verzi webu, která obsahuje předponu /uk/? Zde je ukázkový kód:

<!-- Перемикач мови -->
<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>

Co se změnilo:

Předpona /uk/: Kód nyní přidává předponu /uk/ za názvem domény v adrese URL (například s https://example.com/page bude pracovat https://example.com/uk/page).
Kontrola existence prefixu: Pokud je již v URL /uk/, skript jej znovu nepřidá.
Zpracování odkazu: Pokud je uživatel na ruskojazyčné verzi, vytvoří se tlačítko pro přesměrování na ukrajinskou verzi s přidáním správné předpony.

Nyní při přechodu na ukrajinskou verzi webu bude zohledněn pouze jazykový kód v HTML a automaticky bude přidán potřebný prefix.

Ještě jednou však připomínáme, že kód (v prvním i druhém příkladu) funguje pouze v případě, že máte stejné názvy URL pro ruskou a ukrajinskou verzi.

Co dělat, pokud se adresy URL liší a nahrazení pouze předpony jazyka problém nevyřeší?

Pokud web změní nejen předponu jazyka, ale také název adres URL v závislosti na jazyku (například pro stejnou stránku v ruské verzi může existovat jedna adresa URL a v ukrajinské verzi jiná), budete pro správné přesměrování je třeba použít dříve známé korespondence mezi ruskými a ukrajinskými adresami URL.

Přístup 1: Použijte předem známou mapu URL

Vytvoříte objekt, kde každá ruská adresa URL odpovídá ukrajinské.
Pokud se zjistí, že uživatel je na ruskojazyčné verzi webu, vyhledejte aktuální adresu URL v této mapě a přesměrujte se na odpovídající ukrajinskou adresu URL.

Příklad:

<!-- Перемикач мови -->
<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>

Jak to funguje:

urlMap je objekt, kde je pro každou ruskou URL zapsána odpovídající ukrajinská URL. Příklad: pro stránku /ru/about-us odpovídající ukrajinská verze je /uk/pro-nas.
Ukrajinské vyhledávání URL:
- Pokud je v objektu přítomna aktuální adresa URL urlMap, uživatel bude přesměrován na zadanou ukrajinskou verzi.
- Pokud shoda v urlMap není nalezen, skript nahradí předponu /ru/ na /uk/ standardně.
Adaptace na budoucí změny: Pokud přidáte nové stránky s různými adresami URL, aktualizujte mapu urlMap, přidávání nových shod.

Nejlepší volba pro malé weby a vstupní stránky, firemní stránky nebo vstupní stránky.

Přístup 2: Použijte definici dynamické adresy URL

Pokud nemáte jasnou shodu pro všechny adresy URL nebo se změní, můžete zkusit integraci s logikou back-endu (např. prostřednictvím databáze), aby se adresy URL shodovaly za běhu, ale toto je složitější řešení, které vyžaduje back-end integrace. To však přesahuje rámec tohoto materiálu.

Tento kód vám umožní flexibilně spravovat přechody, i když se URL změní o více než jen o předponu jazyka.

Vyměnit Višnovku

Jak jste si mohli všimnout, portál LovePets UA používá první verzi kódu. Můžete jej hostovat na svých stránkách nebo přizpůsobit svým potřebám. Tento princip platí nejen pro jazykové páry "ruština <—> ukrajinština", ale i pro jakékoli jiné kombinace jazyků.

Upřímně doufáme, že tento materiál bude pro vás užitečný. Z naší strany jsme opakovaně zdůrazňovali důležitost podpory a rozvoje obsahu v ukrajinském jazyce.

Pojďme společně podporovat rozvoj kvalitního a bezpečného obsahu v ukrajinském jazyce a popularizovat jej. A pro začátek můžete začít tím, že pomocí widgetu přepnete jazyk z ruštiny na ukrajinštinu.

Byli bychom také vděční, kdybyste odkaz na nás z kódu neodstranili. Předem děkuji.