Форум

wemon · #1 (**permalink**) 21.01.2022, 21:12

Здравствуйте.
Подскажите пожалуйста как сделать приключение языков.
Сейчас разбил по каталогам для разных языков в таком виде:
https://stock.ck.ua/ru/catalog/7451362/
https://stock.ck.ua/ua/catalog/7451362/

Но теперь не могу понять как реализовать переключении между /ru/ и /ua/ а оставшийся путь не менялся.
Подскажите пожалуйста как сделать ?

рони · #2 (**permalink**) 21.01.2022, 21:48

wemon,
добавить на обе страницы.

<!DOCTYPE html>
<html >
<head ></head>
<body><select class="lang">
    <option value="ru">ru</option>
    <option value="ua">ua</option>
    </select>
</body>
<script>
    document.addEventListener("DOMContentLoaded", () => {
        const select = document.querySelector(".lang");
        let url = window.location.href, value;
        for ({
                value
            } of select.options) {
            if (value && url.includes(value, 19)) {
                select.value = value;
            }
        };
        select.addEventListener("change", _ => {
        if(!select.value) return;
        url = `https://stock.ck.ua/${select.value}/catalog/7451362/`;
        window.location.href = url;
        })
    });
</script>
</html>

wemon · #3 (**permalink**) 21.01.2022, 21:56

Спасибо добавил. Но почему-то срабатывает один раз. Потом на этой же странице нельзя переключить обратно.

рони · #4 (**permalink**) 21.01.2022, 22:01

Сообщение от wemon

Потом на этой же странице

скопируйте скрипт и селект по новой

wemon · #5 (**permalink**) 21.01.2022, 22:14

Все работает. Можете также подсказать сейчас попробовал вставить в другой каталог https://stock.ck.ua/ua/catalog/7451363/ он перенаправляется /catalog/7451362/
Как сделать ${select.value}/catalog/7451362/`; что бы путь менялся в зависимости от текущей ссылки. То есть чтобы заменялась только та часть ссылки /ru/ и /ua/

рони · #6 (**permalink**) 21.01.2022, 22:30

wemon,
пробуйте ...

<!DOCTYPE html>
<html >
<head ></head>
<body><select class="lang">
    <option value="ru">ru</option>
    <option value="ua">ua</option>
    </select>
</body>
<script>
document.addEventListener("DOMContentLoaded", () => {
        const select = document.querySelector(".lang");
        let url = window.location.href, value, reg;
        for ({ value } of select.options) {
            reg = new RegExp(`/${value}/`);
            if (value && reg.test(url)) {
                select.value = value;
                break;
            }
        };
        select.addEventListener("change", _ => {
        if(!select.value) return;
        url = url.replace(reg, `/${select.value}/`);
        window.location.href = url;
        })
    });
</script>
</html>

wemon · #7 (**permalink**) 21.01.2022, 22:43

Последний вариант, срабатывает один раз на странице. Потом не переключает.

рони · #8 (**permalink**) 21.01.2022, 23:18

wemon,
break забыл добавить. скопируйте снова #6

wemon · #9 (**permalink**) 21.01.2022, 23:39

рони,
Спасибо Вам большое. Все работает.

wemon · #10 (**permalink**) 19.02.2022, 20:20

рони,
Здравствуйте можете пожалуйста помочь с другим вариантом, только уже для ссылочного переключателя по аналогу как для select.
Сейчас сделал переключатель ссылками (УКР | РУС) для 2-х страниц, вот пример:
https://stock.ck.ua/ru/catalog/
Для разных страниц на которых находишься выводится по разному:
Если на Русской версии:

<ul class="lang-switcher">
<li class="lang-ua"><a href="/ua/catalog/">УКР</a></li>
<li class="lang-ru"><span>РУС</span></li>
</ul>

Если на Украинской версии:

<ul class="lang-switcher">
<li class="lang-ua"><span>УКР</span></li>
<li class="lang-ru"><a href="/ru/catalog/">РУС</a></li>
</ul>

Подскажите как реализовать это для всех страниц сайта?

Форум

Справочник

Discord чат

Курсы javascript