Як спростити життя відвідувачам твого сайту за допомогою cookies? В даній статті будуть описані найпростіші cookies сценарії, які не зламають тобі мозок 🙂

В даний момент я працюю над новим шаблоном для WordPress, і досить багато часу приділив вивченню технології обміну даними між сайтом і браузером користувача. Натрапив на велику кількість граблів, пробуючи реалізувати все вбудованими методами WordPress, аж нарешті залишив маленький скриптик на JavaScript та кілька додаткових рядків коду.

HTTP-cookie або "Ку́ки" або "Реп'яшки" (англ. Cookie, множина англ. Cookies — тістечка, печиво) — у комп'ютерній термінології поняття, яке використовується для опису інформації у вигляді текстових або бінарних даних, отриманих від веб-сайту на веб-сервері, яка зберігається у клієнта, тобто браузера, а потім відправлена на той самий сайт, якщо його буде повторно відвідано.

Вікіпедія

А розглядати будемо на простому прикладі: є дві версії дизайну – темний та світлий, і, залежно від вибору користувача, сервер повинен показувати йому той дизайн, який користувач обрав при першому заході на сайт. І показувати якомога довше, щоб кожного разу не запитувати, що саме той хоче бачити – всі знають, як нервує, коли багато лишніх запитань 😉

Отже, створюємо собі файлик із назвою, наприклад, cookie.js. У ньому відразу реалізовуємо дві функції для запису та зчитування cookies:

function setcookie(a, b, c) {
	if(c) {
		var d = new Date();
		d.setDate(d.getDate() + c);
	}
	if(a && b) document.cookie = a + '=' + b + (c ? '; expires=' + d.toUTCString() : '');
	else return false;
}

function getcookie(a) {
	var b = new RegExp(a + '=([^;]){1,}');
	var c = b.exec(document.cookie);
	if(c) c = c[0].split('=');
	else return false;
	return c[1] ? c[1] : false;
}

Створюємо змінну для зчитування куків:

var sitecolorCookie = getcookie ( "sitecolor" );

Ось вони – найпростіші cookies

Створюємо правила для запису куків (кука буде мати назву "sitecolor" та одне з двох значень залежно від вибору: "black" або "white"):

function makesiteWhite() {
	setcookie("sitecolor", "white", 365);
}

function makesiteBlack() {
	setcookie("sitecolor", "black", 365);
}

Далі описуємо, які дії потрібно провести у відповідь на певні дії користувача. В даному випадку буде проводитися пошук елемента із id "sitecolor-black" або "sitecolor-white" та робитися відповідний запис у cookies:

function siteLoaded() {
	var sitecolor1 = document.getElementById("sitecolor-black");
	if(sitecolor1) {
		sitecolor1.addEventListener('click', makesiteWhite);
	}
	var sitecolor2 = document.getElementById("sitecolor-white");
	if(sitecolor2) {
		sitecolor2.addEventListener('click', makesiteBlack);
	}
}

Останнім жестом буде запуск скрипта після завантаження всієї сторінки:

document.addEventListener("DOMContentLoaded", siteLoaded);

Із файлом скрипта все, найпростіші cookies описані, тепер будемо проводити зміни у файлі html. Першим ділом підключаємо наш скрипт:

<script src="<?php bloginfo('template_url'); ?>/js/cookies.js"></script>

Зверни увагу, що файл скрипта я поклав у вкладену папку js папки шаблона.

Рядок із підключенням я помістив перед закриваючим тегом head, оскільки сама кнопка перемикання буде десь майже спочатку, а якщо я підключу скрипт із оголошенням змінних після того, як вже почну користуватися ними – зрозуміло, що ніщо працювати не буде. Тому пам'ятаємо порядок: спочатку оголошення змінних, а потім виклики, функції та інші операції з ними.

Трішки відволікся. Шукаємо місце, де повинна бути кнопка перемикання кольору сайту, і вводимо наступну інформацію:

<div id="color-checker">
	<script type="text/javascript">
	if((!sitecolorCookie) || (sitecolorCookie == "black")) {
		document.write('<a id="sitecolor-black" href="">White</a>');
		var st = document.createElement("link");
		st.setAttribute("rel", "stylesheet");
		st.setAttribute("href", "<?php bloginfo('template_url'); ?>/css/black.css");
		document.body.appendChild(st);
	} else {
		document.write('<a id="sitecolor-white" href="">Black</a>');
		var st = document.createElement("link");
		st.setAttribute("rel", "stylesheet");
		st.setAttribute("href", "<?php bloginfo('template_url'); ?>/css/white.css");
		document.body.appendChild(st);
	}
	</script>
</div>

Ого, скільки всього відразу! Та не все так складно. В першу чергу ми створили блок "color-checker", де буде розміщена кнопка перемикання. Всередині блоку знову JavaScript-код, який відразу перевіряє нашу куку. Якщо вона взагалі не існує (наприклад, ти заходиш на сайт уперше), або її значення – "black", то JavaScript на льоту створює посилання із текстом "White" та id "sitecolor-black" (вище я описував дію скрипта з даним id – тепер по ньому можна буде клацати). Також буде реалізовано підключення додаткового файлу стилів, який знаходиться у вкладеній папці css папки шаблона із назвою "black.css".

В іншому випадку (а іншим випадком може тільки наявне значення куки sitecolorCookie == "white") робимо все навпаки. Тобто id посилання буде "sitecolor-white", текст – "Black", відповідно, файл стилів – "white.css".

Результат

В результаті, коли ти вперше зайдеш на сайт, він буде у темних відтінках, а кнопочка, яка відповідає за перемикання, буде називатися "White". Клацнеш на неї – сайт стане світлий, а сама кнопочка змінить назву на "Black". Ще раз клацнеш – сайт знову стане чорним, а кнопочка поверне стару назву.

І все це буде записуватися у твій браузер на термін 365 днів (пошукай, де саме трапляється це число у твоєму скрипті – так, час зберігання записується разом із значенням куки), або доки ти сам/а не видалиш cookies із свого браузера.

Надіюся, дана інформація допоможе тобі не бродити по теренах WordPress-сайтів у пошуках, немов сліпому кошеняті, як це довелося робити мені. Проста реалізація на JavaScript – і найпростіші cookies уже працюють на твоєму сайті!