Как запомнить действия пользователя на сайте?

Question

[eratnikstudio]

Как сделать, чтобы одно действие пользователя сохранялось на всех страницах сайта, пока не закрыть сайт?
Суть - есть сайт https://awakey.net/ (на WordPress), там есть переключатель темы со светлой на тёмную, так вот - пользователь выбирает тёмную тему и она оставалась, когда он переходит на другую страницу. Как это реализовать?
Или может есть плагин похожий на это? Этот модуль (переключение цвета шаблона) идёт вместе с темой.

Comments

[Дмитрий]

Можно сохранить в куке или в сессии, надо добавить пару строчек кода

[eratnikstudio]

Дмитрий, И какие это пару строчек? ))

[TeraMoune]

eratnikstudio, https://www.php.net/manual/ru/function.session-set...

[Дмитрий]

eratnikstudio, ну в обработчике где применяется тема сохранение значения в сессию, и в шапке или где, где выбор, там проверка на существование сессии и значения, плюс значение по умолчанию, я вп версии 2 наверное последний раз ковырял

[eratnikstudio]

Дмитрий, Спасибо. Разбираюсь, но пока не очень получается )))

Answer 1

[Антон Шаманов]

Нужно использовать сессии/cookie.
Я бы посоветовал, перед тем как что-то писать, дочитать базовое руководство по PHP.

Answer 2

[Надим]

У тебя за тему отвечает класс элемента html. Соответственно, вешаем обработчик на кнопку смены темы и при смене темы тупо запоминаешь класс элемента в хранилище localStorage, ну и соответственно при загрузке страницы восстанавливаешь класс элемента html из хранилища.

Comments

[eratnikstudio]

И как это сделать и где про это почитать (с примерами) :). Если есть такая информация? Буду благодарен.

[Надим]

eratnikstudio, грубый пример:

jQuery(function() {
	
	jQuery('div[data-widget_type="vinazine-darklight.default"]').click(function() {
		setTimeout(function() {
			localStorage.setItem('html_class', jQuery('html').attr('class'));
		}, 1000);
	});
	
	if (localStorage.getItem('html_class')) {
		jQuery('html').attr('class', localStorage.getItem('html_class'));
	}
	
});

Почему грубый? Потому что запоминание темы происходит спустя секунду, после нажатия кнопки - эта самая секунда нужна, чтобы успели сменится классы у элемента html. Однако, так делать конечно несколько не оптимально, здесь по уму надо использовать MutationObserver, чтобы реагировать непосредственно на факт изменения класса у элемента html, только мне лень писать пример с MutationObserver.

[eratnikstudio]

Надим Закиров, В WP это добавить в function.php или куда?

[Надим]

eratnikstudio, да нет же, это JavaScript. Просто выведи его в своём шаблоне перед закрывающим тегом </body> и предварительно обернув в <script></script>

[eratnikstudio]

Надим Закиров, ТОчно. Крыша у меня уже поехала))

[eratnikstudio]

Надим Закиров,
Поместил перед закрывающим тегом </body>, но что то не сохраняет выбранную темную тему после перехода на другую страницу(((

[Надим]

eratnikstudio, что-то я не вижу скрипта в конце сайта.

[eratnikstudio]

Надим Закиров,
Я его вечером удалил. Сегодня нор разобрался и...

СПАСИБО!!! :)

[eratnikstudio]

Надим Закиров, А как сделать с MutationObserver? Без перезагрузки темы - что бы убрать эту секунду и при переходе не грузилась сразу светлая тема, а потом темная?
С меня причитается - чуть что;) - даю слово.

[phone] (viber/whatsapp)
Евгений

[Надим]

eratnikstudio, увы, я слегка приболел, в ближайшие дни вряд ли смогу помочь. Однако подсказку дам, то что у тебя при переходе на новую страницу тема врубается не сразу и видно, что изначально была белая тема, это проблема на стороне CSS-файлов твоей темы, именно там прописана анимация при смене темы. Если эту анимацию убрать, то и тема бы переключалась мгновенно, поэкспериментируй.

Либо попробуй обратится на фрилансим:
https://freelance.habr.com

MutationObserver это про быстрое запоминание темы, а не про переключение. Если даже переписать скрипт с использованием MutationObserver, на скорость переключения темы это не повлияет, только на скорость реакции на нажатие кнопки переключения темы.

[eratnikstudio]

Надим Закиров, Вас понял. ;)

Скажите - это то ( "...прописана анимация при смене темы...") Я поставил "0" везде, но как то не особо помогло, чуть быстрее, но всё равно появляется белая тема при загрузке другой страницы (хотя и не так долго :) , как было)

.body-inner-content,
.top-bar,
.ts-grid-box,
.post-list-item,
.breadcrumb,
.navbar-container,
.ts-breaking-news,
.ts-grid-box-heighlight,
.elementor-widget-container,
.elementor-section,
.nav-tabs,
.archive.body-inner-content,
.apsc-theme-2 .apsc-each-profile a .apsc-inner-block .apsc-count,
.default-content,
.single-post-wrapper .text-bg,
.bg-white,
.post-overflow-style .post-content-item,
footer,
header {
  -webkit-transition: all 0s linear;
  -o-transition: all 0s linear;
  transition: all 0s linear;
}

.navbar-container .navbar,
.ekit-megamenu-holder {
  -webkit-transition: all 0s linear;
  -o-transition: all 0s linear;
  transition: all 0s linear;
}

[Надим]

eratnikstudio, ничем не могу могу помочь, тут надо вникать, а я сейчас не вникабельный. Попробуйте все же обратится на фрилансим.

[eratnikstudio]

Надим Закиров, Всё ровно - огромное спасибо! Выздоравливайте! ;)

[Надим]

eratnikstudio, спасибо)