Смена языка на сайте
Здравствуйте.
Подскажите пожалуйста как сделать приключение языков. Сейчас разбил по каталогам для разных языков в таком виде: https://stock.ck.ua/ru/catalog/7451362/ https://stock.ck.ua/ua/catalog/7451362/ Но теперь не могу понять как реализовать переключении между /ru/ и /ua/ а оставшийся путь не менялся. Подскажите пожалуйста как сделать ? |
смена языка ru/ua
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>
|
Спасибо добавил. Но почему-то срабатывает один раз. Потом на этой же странице нельзя переключить обратно.
|
Цитата:
|
Все работает. Можете также подсказать сейчас попробовал вставить в другой каталог https://stock.ck.ua/ua/catalog/7451363/ он перенаправляется /catalog/7451362/
Как сделать ${select.value}/catalog/7451362/`; что бы путь менялся в зависимости от текущей ссылки. То есть чтобы заменялась только та часть ссылки /ru/ и /ua/ |
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,
break забыл добавить. скопируйте снова #6 |
рони,
Спасибо Вам большое. Все работает. |
рони,
Здравствуйте можете пожалуйста помочь с другим вариантом, только уже для ссылочного переключателя по аналогу как для 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> Подскажите как реализовать это для всех страниц сайта? |
wemon,
document.addEventListener('DOMContentLoaded', () => {
const lang = document.querySelector(".lang-switcher");
lang.addEventListener("click", event => {
let href = event.target.getAttribute('href');
if (href) {
event.preventDefault();
let value = href.match(/[^\/]+/g)[1];
let url = window.location.href;
let reg = new RegExp(`\/[^\/]+\/${value}\/`);
url = url.replace(reg, href);
window.location.href = url;
}
})
});
|
рони,
Подскажите что я сделал не так? Мне нужно убрать ссылки ? <ul class="lang-switcher"> <li class="lang-ua"><a href="">УКР</a></li> <li class="lang-ru"><span>РУС</span></li> </ul> |
рони,
Ссылка получается сейчас ведет сама на себя без смены пути с /ru/ на /ua/ |
Цитата:
|
рони,
Можете подсказать как это сделать для всех страниц сайта ? Сейчас работает только на: https://stock.ck.ua/ru/catalog/ https://stock.ck.ua/ua/catalog/ Для других страниц не получается переключать https://stock.ck.ua/ua/delivery/ https://stock.ck.ua/ru/delivery/ https://stock.ck.ua/ua/contacts/ https://stock.ck.ua/ru/contacts/ |
Цитата:
на delivery ссылка delivery на /contacts/ ссылка /contacts/ а не catalog/ везде |
wemon,
с нормальными ссылками и скрипт не нужен будет. |
рони,
Цитата:
Так как страниц будет много. Я в посте #10 я указал что нужно для всех страниц сайта. Может Вы меня не так поняли просто. То есть сделать одно решение для переключения между /ru/ на /ua/ в середине ссылки. |
рони,
Да и меню вывел отдельно, выводится из отдельного файла чтобы в случае добавления каких то пунктов меню сделать в одном месте. И переключатель языка в нем. Так как будут страницы помимо меню нужно одно решение. Если делать ссылками то потом придётся исправлять везде где наделал их. |
wemon,
если сложно сделать ссылки на сервере, то можно так ...
document.addEventListener('DOMContentLoaded', () => {
let ru = document.querySelector(".lang-switcher .lang-ru a");
let ua = document.querySelector(".lang-switcher .lang-ua a");
let value = window.location.href.match(/[^\/]+/g).pop();
let url = `/ru/${value}/`;
if (ua) {
url = `/ua/${value}/`;
ua.setAttribute('href', url);
}
if (ru) ru.setAttribute('href', url);
});
|
wemon,
href не прописывайте изначально, копируйте скрипт после обновления этой страницы. |
рони,
Цитата:
Что я делаю не так? для каждого языка свой вывод - navbar navbar-ru.php
<ul class="lang-switcher">
<li class="lang-ua"><a href="">УКР</a></li>
<li class="lang-ru"><span>РУС</span></li>
</ul>
navbar-ua.php
<ul class="lang-switcher">
<li class="lang-ua"><span>УКР</span></li>
<li class="lang-ru"><a href="">РУС</a></li>
</ul>
Добавил для всех страниц.
document.addEventListener('DOMContentLoaded', () => {
let ru = document.querySelector(".lang-switcher .lang-ru a");
let ua = document.querySelector(".lang-switcher .lang-ua a");
let value = window.location.href.match(/[^\/]+/g).pop();
let url = `/ru/${value}/`;
if (ua) {
url = `/ru/${value}/`;
ua.setAttribute('href', url);
}
if (ru) ru.setAttribute('href', url);
});
Что делаю не так ? |
Цитата:
Цитата:
|
wemon,
ок норма. |
рони,
Спасибо Вам большое. |
Цитата:
|
рони,
Цитата:
Этот вариант который сделали Вы, меня тоже вполне устраивает. Но Ваш совет возьму на заметку. Спасибо. |
Подскажите пожалуйста как записать в переменные вот эти значения data-amount и data-price?https://sun9-57.userapi.com/impg/d52...a04&type=album
|
Никита Соболев,
создайте свою тему в https://javascript.ru/forum/misc/ и лучше код, чем картинка. читать Нестандартные атрибуты, dataset Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
|
Здравствуйте!
Как можно сделать ссылочный переключатель для общего меню ru/en? site.ru/ru/ site.ru/en/ И как оставить только одну ссылку на странице, на русской версии EN и на английской RU? Как правильно обернуть, чтобы прописать стили? |
Страницы 2. Вот пускай на каждой и будет своя ссылка.
|
Цитата:
|
Что значит в одном. В браузер передается одна страница. У нее и хидер и тело и футер индивидуальные.
Если у вас страница генерится сервером, пускай он ставит нужную ссылку в хидере при его генерации. Если вы формируете страницу в браузере, то опять таки поставьте одну нужную ссылку. |
Это вывод мобильного меню:
<div class="mobile-nav"> <span class="mob-nav-btn"><?php echo pex_text (pll__('_menu_text')); ?></span> </div> Это вывод переключателя языков: <?php pll_the_languages( array( 'hide_current'=>1 ,'show_names' => 0 ) ); ?> Как объединить их вместе, чтобы не развалился макет? Если, например вот так, то макет разваливается: <div class="lang"> <?php pll_the_languages( array( 'hide_current'=>1 ,'show_names' => 0 ) ); ?> </div> <div class="mobile-nav"> <span class="mob-nav-btn"><?php echo pex_text (pll__('_menu_text')); ?></span> </div> И для "lang" нужны свои стили(( |
Стилями остальные элементы подогнала, сойдёт в общем...
У меня есть вопрос по лайтбоксу. Это новую тему создавать нужно? |
elena777,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Тот код уже, кое-как допилила.)
У меня этот не хочет работать. По идее он должен изменять размер окна лайтбокса с учетом адресной строки мобильного браузера. То есть, при прокрутке вверх и скрытии адресной строки, лайтбокс должен занимать всю высоту окна браузера, но по факту внизу остается пустое место по высоте этой самой строки: <script> jQuery(window).resize(function() { if (typeof jQuery().fullscreen !== 'undefined') { if (jQuery.isFunction(jQuery().fullscreen)) { if (!jQuery.fullscreen.isFullScreen()) { bwg_popup_resize(); } } } }); </script> И еще беда в том, что воспроизвести эту проблему на компе не получается |
| Часовой пояс GMT +3, время: 09:21. |