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

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

Думаю практически все, кто пользуется 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», для получения свежих новостей и материалов.

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

  1. Хмм. Интересная задумка. Что-то подобное в упрощенном варианте присутствует в одном из дефолтовых шаблонов Джумлы кажется.

    А насчет цветового оформления — можно еще определять локальное время юзера по IP таргетингу например, и корректировать подмену стилей.

    ОтветитьОтветить
  2. @SibNext: насчет дефолтовых шаблонов Joomla — честно говоря, не помню — хотя имел с ними дело только в плане разбора принципа построения шаблонов, так что мог просто и не обратить внимание.

    можно еще определять локальное время юзера по IP таргетингу

    Если с точки зрения именно смены цветовой схемы — да, но в качестве автоматизированного графика работы — нельзя, поскольку магазин в любом случае останется в своем часовом поясе :)

    ОтветитьОтветить
  3. Мне кажется, какой-то надуманный пример, если очень нужно, можно просто создать страницу с описанием кто когда работает.

    ОтветитьОтветить
  4. @WordPress Spot: ну, во-первых, формулировка «если очень нужно» не совсем корректна — не просто нужно, а без этого никуда. Представьте себе магазин — и без графика работы. Согласитесь, это несколько странно :)

    А во-вторых, предложенный способ — не заменяет собой стандартный раздел «Контакты», а лишь расширяет его, позволяя проинформировать посетителя в более дружественной и оригинальной форме.

    ОтветитьОтветить
  5. @© Yaroslav.Ch:

    Ну я цвето/дизайн и имел ввиду.

    Вообще тема довольно обширная и интересная. Сюда и клоакинг (как вариант реализации) можно приплести, если сайт полностью на CSS сверстан. По IP вычленять поисковых пауков и предлагать им на завтрак нечто иное. Хотя я лично не то, что не сторонник, а даже противник последнего.

    ОтветитьОтветить
  6. @SibNext: обычный клоакинг на уровне определения IP краулеров, ПС научились определять очень быстро, ввиду чего в бан (не смотря на всю СДЛьность) можно загреметь очень легко.

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

    ОтветитьОтветить
  7. Вот именно поэтому я и противник клоакинга. А привел его, просто как вариант.

    В своей практике использовал определение региона по IP, когда-то давно, когда кодил на пендосов. Правда там не цвета менялись, а структура сайта.

    В буржунете в отличие от нас все новомодные фичи все стараются начать использовать очень и очень оперативно.

    ОтветитьОтветить
  8. @SibNext: а для чего использовалась такая логика, если не секрет?

    Иногда обилие фич на их сайтах приводит к полной прострации со стороны пользователя. Например, недавно пытался найти на официальном сайте сериала Warehouse 13 — когда же будет второй сезон, так мне показали все, что могли — и анонсы, и тизеры, и рекламу, и стафф, и все, что только хочешь — прыгает, бегает, мигает, скользит, перенаправляет куда-то... но вот именно даты я так и не нашел :)

    ОтветитьОтветить
  9. В большинстве случаев виной всему банальная лень.

    Даже на своём блоге, знаю кучу фич, которые можно использовать, десятки сам придумывал, и находил, и видел подобных, догадываюсь какие статьи надо писать, чтобы увеличить посещаемость, количество кликов в адсенс, скачиваний файлов с обменников... НО почему то ещё нифига не сделано.

    P.S. Просьба убери по дефолту подписку на коментарии, напрягает галочку снимать.

    ОтветитьОтветить
  10. Думаю, это скорее не лень, а отсутствие цели.

    P.S. А ты не снимай — будешь участвовать в обсуждении :)

    ОтветитьОтветить
  11. Задумка очень интересная, за нее можно поставить крепкую девятку. Что касается реализации идеи, то здесь вы полностью упростили работу для новичков. Думаю загрузить несколько файлов на хостинг не составит особого труда.

    ОтветитьОтветить
  12. Интересная задумка. Что-то подобное в упрощенном варианте присутствует в одном из дефолтовых шаблонов Джумлы кажется.

    ОтветитьОтветить
  13. Для блогов в самый раз, а в интернет-магазинах мало кто заметит эту фишку. Посетители не будут сидеть днями на пролет в нем.

    Хотя для тех то хочет по настоящему уникальный дизайн — это находка

    ОтветитьОтветить
  14. Для сайта по услугам очень хорошая вещь. Но вот если у меня выходной есть, то нужно учитывать день недели в коде. Если это учесть, то будет очень хорошая помощь бизнесу.

    ОтветитьОтветить
  15. Есть ли возможность использовать дни недели в этом коде?

    ОтветитьОтветить
  16. @Roman: в данном конкретном коде дни недели не представлены, но используя php функцию date можно их добавить.

    ОтветитьОтветить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *