Как создать popup с отключением по часовому поясу в WordPress

В этой статье мы подробно рассмотрим, как реализовать показ всплывающего окна (popup) в WordPress с условием отключения показа в зависимости от часового пояса пользователя. Такая функциональность особенно полезна для сайтов с международной аудиторией, когда необходимо гибко управлять выводом popup в зависимости от времени и местоположения посетителя.

Почему важно учитывать часовой пояс для popup

Традиционно popup показываются либо по времени, либо по действиям пользователя, но игнорируют локальное время посетителя. Это может приводить к неудобствам: например, акция, рассчитанная на дневное время, будет показываться ночью, что снижает конверсию и ухудшает пользовательский опыт.

Использование часового пояса позволяет правильно таргетировать popup, показывая его в удобное для пользователя время и скрывая в неактивный период.

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

Определяем часовой пояс пользователя на сайте WordPress

Определение часового пояса посетителя можно реализовать с помощью JavaScript, который определит смещение пользователя от UTC в минутах, а затем передаст это значение на сервер или сохранит в cookie для последующего использования.

Пример кода для получения часового пояса на стороне клиента:

function wppopup_getUserTimezoneOffset() {
    return new Date().getTimezoneOffset(); // Возвращает смещение в минутах от UTC
}

Далее это значение можно передать через AJAX или записать в cookie, чтобы PHP-код мог прочитать и использовать его.

Пример записи в cookie:

document.cookie = "wppopup_timezone=" + wppopup_getUserTimezoneOffset() + "; path=/";

Управление показом popup в зависимости от часового пояса

После того, как мы получаем часовой пояс, нужно сравнить его с допустимым диапазоном отображения popup. Допустим, мы хотим показывать popup только с 9 утра до 21 вечера по локальному времени пользователя.

Логика:

• Получить смещение часового пояса пользователя из cookie
• Получить текущее время сервера
• Скорректировать время сервера с учетом смещения пользователя
• Проверить, входит ли скорректированное время в допустимый интервал
• Если входит — показать popup, иначе — не показывать

Пример PHP-функции для проверки времени с учетом часового пояса:

function wppopup_should_show_popup_by_timezone() {
    if ( ! isset($_COOKIE['wppopup_timezone']) ) {
        // Если часовой пояс не определён, показываем popup по умолчанию
        return true;
    }
    $offset_minutes = intval($_COOKIE['wppopup_timezone']);
    // Получаем текущее время сервера
    $server_time = current_time('timestamp');
    // Смещаем время на часовой пояс пользователя
    $user_time = $server_time - ($offset_minutes * 60);
    // Получаем час в формате 24-часов
    $user_hour = (int) date('G', $user_time);
    // Интервал показа с 9 до 21
    if ($user_hour >= 9 && $user_hour < 21) {
        return true;
    }
    return false;
}

Интеграция с плагином My Popup

Если вы используете плагин My Popup, то вы можете добавить эту проверку в фильтр показа popup.

Пример добавления фильтра:

add_filter('mypopup_show_popup', 'wppopup_mypopup_show_popup_by_timezone', 10, 2);
function wppopup_mypopup_show_popup_by_timezone($show, $popup_id) {
    if (!wppopup_should_show_popup_by_timezone()) {
        return false;
    }
    return $show;
}

Реализация передачи часового пояса с помощью AJAX

Для надежности можно передавать часовой пояс пользователя на сервер через AJAX, чтобы избежать зависимости от cookie и обеспечить корректную работу даже при их отключении.

Пример JavaScript для отправки часового пояса:

jQuery(document).ready(function($) {
    var timezoneOffset = new Date().getTimezoneOffset();
    $.post(wppopup_ajax_object.ajax_url, {
        action: 'wppopup_set_timezone',
        timezone: timezoneOffset
    });
});

Пример обработки на стороне PHP:

add_action('wp_ajax_wppopup_set_timezone', 'wppopup_set_timezone_callback');
add_action('wp_ajax_nopriv_wppopup_set_timezone', 'wppopup_set_timezone_callback');
function wppopup_set_timezone_callback() {
    if (isset($_POST['timezone'])) {
        $offset = intval($_POST['timezone']);
        setcookie('wppopup_timezone', $offset, time() + 3600 * 24 * 30, COOKIEPATH, COOKIE_DOMAIN);
    }
    wp_die();
}

Не забудьте локализовать AJAX URL:

function wppopup_enqueue_scripts() {
    wp_enqueue_script('wppopup-script', plugin_dir_url(__FILE__) . 'js/wppopup.js', array('jquery'), null, true);
    wp_localize_script('wppopup-script', 'wppopup_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_scripts');

Дополнительные советы и рекомендации

1. Обязательно протестируйте работу popup в различных часовых поясах, используя VPN или инструменты разработчика для имитации времени.

2. Учитывайте возможное расхождение времени сервера и пользователя, особенно если сервер расположен в другой зоне.

3. При необходимости расширьте логику для поддержки разных интервалов показа в выходные дни или праздничные даты.

4. В случае если вы используете кеширование страниц, убедитесь, что данные о часовом поясе пользователя не кешируются вместе со страницей, иначе popup будет показываться некорректно.

Вывод

Реализация popup с отключением по часовому поясу требует комплексного подхода: определения локального времени пользователя, передачи данных на сервер и условного вывода popup. Приведенный пример показывает базовую логику, которую вы можете адаптировать под свои задачи и интегрировать с популярными плагинами, такими как My Popup.