Указываем время работы интернет-магазина с помощью CSS и PHP

Tweet

Думаю практически все, кто пользуется Gmail, успели ознакомиться с автоматическим изменением темы интерфейса, в зависимости от времени суток. Представляю вашему вниманию скрипт автора McBonio, который реализует данную опцию.

Он позволяет подгружать соответствующий CSS-файл в зависимости от времени суток. Для этих целей используются 4 CSS-файла и их смена происходит в 6 утра, 12 часов дня, а также  7 и 11 часов вечера. Демо-версию работы скрипта можно посмотреть по ссылке в конце статьи, там же доступен полный комплект файлов.

Но давайте подумаем, как еще может использоваться этот скрипт, кроме достаточно банального изменения цветовой схемы сайта?

Предположим, график выглядит так:

• Работа офиса: 9:00 — 19:00
• Доставка: 9:00 — 21:00
• Прием заказов через сайт: круглосуточно

Для этого нам необходимо нарисовать 3 изображения:

• Мы уже на работе! Менеджеры — на месте, а курьеры — в пути! // выводится с 9:00 до 19:00
• Менеджеры уже отдыхают, но курьеры — работают! // Выводится с 19:00 до 21:00
• Офис — пуст. Телефон — стал факсом. Курьеры — спят. Но мы с радостью примем Ваш заказ через сайт! // выводится с 21:00 до 9:00

Данные фразы — просто примеры, а в реальной ситуации их количество можно увеличивать до бесконечности. Главное — не запутаться во времени.

После этого все, что нам нужно — изменить в теле скрипта диапазон вывода и нарисовать 3 картинки. И, вуаля — посетителю больше не нужно заходить в раздел «Контакты» и смотреть на часы, для того, чтобы определить — есть смысл вам звонить или оптимальнее отправить заказ через сайт.

Где и как выводить эти изображения — зависит от дизайна вашего магазина. Например, можно отобразить график в виде таблички рядом с логотипом, или оформить как всплывающий блок в правом-верхнем/нижнем углу сайта. Все зависит исключительно от вашей фантазии.

Поскольку пример содержит большее количество вариаций вывода временных промежутков, чем рассматривалось в нашей ситуации — я привожу код так, как он написан McBonio. А изображения вы уже нарисуете сами.

PHP код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<link rel="stylesheet" href="<?php
 
date_default_timezone_set("GMT"); // настройте ваш часовой пояс
 
$thetime = date("H"); // H означает, что расчет идет в 24-часовом формате 
 
// эта часть позволяет выбирать соответствующий времени css-файл
 
if($thetime > 00 AND $thetime < 06) { echo "nighttime.css";} // между полночью и 6 утра
elseif($thetime > 05 AND $thetime < 12) { echo "morning.css";} // между 6 утра и 12 дня
elseif($thetime > 11 AND $thetime < 19) { echo "midday.css";} // между 12 дня and 7 вечера
elseif($thetime > 18 AND $thetime < 23) { echo "gettingdark.css";} // между 7 вечера and 11 вечера
elseif($thetime = 23) { echo "nighttime.css";} // 11 вечера
elseif($thetime = 00) { echo "nighttime.css";} // полночь
?>" type="text/css" media="screen" />

Настраиваем часовой пояс

В этой части мы настраиваем часовой пояс, в зависимости от вашего местоположения (в примере настроен GMT). Эта часть важна, поскольку если вы ее не настроите, то будет использован часовой пояс сервера, который может располагаться в другой стране и потому смена цветовой схемы будет некорректна.

1

date_default_timezone_set("GMT"); // настройте ваш часовой поясe

Вы можете посмотреть настройки для вашего часового пояса здесь и здесь.

Время

Эта часть проста и ее не нужно менять — она означает, что время будет выводиться в 24-часовом формате. Например, 23:00.

1

$thetime = date("H"); // H означает, что расчет идет в 24-часовом формате

Основная часть кода

Эта секция выполняет основную функцию, подгружая соответствующий по времени CSS-файл. Править ее нет необходимости, но вы можете поменять названия CSS-файлов.

1
2
3
4
5
6

if($thetime > 00 AND $thetime < 06) { echo "nighttime.css";} // между полночью и 6 утра
elseif($thetime > 05 AND $thetime < 12) { echo "morning.css";} // между 6 утра и 12 дня
elseif($thetime > 11 AND $thetime < 19) { echo "midday.css";} // между 12 дня and 7 вечера
elseif($thetime > 18 AND $thetime < 23) { echo "gettingdark.css";} // между 7 вечера and 11 вечера
elseif($thetime = 23) { echo "nighttime.css";} // 11 вечера
elseif($thetime = 00) { echo "nighttime.css";} // полночь

Полный пакет файлов содержит CSS-файлы, изображения и PHP код — скачать архив.

А какие варианты использования такого скрипта видите вы?

Интересные статьи

Сегодня хочу порекомендовать вам к прочтению очень полезную статью в блоге Яна Такушевича — Удобный способ объединения CSS и JavaScript файлов в wordpress. Использование предложенного метода позволит вам оптимизировать скорость загрузки WordPress-блога.

А механика, предложенная Яном в статье «Как реализовать постраничную навигацию в wordpress без плагинов» — уже используется на этом блоге.

Советую подписаться на RSS-ленту блога Яна Такушевича — «Блогинг в стиле web 2.0», для получения свежих новостей и материалов.

Сейчас самое время поделиться статьей с другими!

Tweet

А еще можно почитать:

• Не работает плагин Shortcoder в WordPress 4.4 — что делать?