1. Головна
2. Веб
3. PHP, HTML, CSS
4. Найпростіші cookies для Вашого сайту

Як спростити життя відвідувачам Вашого сайту за допомогою 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 уже працюють на Вашому сайті!