Автоматическое сохранение — важная функция для систем поддержки и тикетов, которая помогает избежать потери данных при случайном закрытии страницы или сбое браузера. В этой статье мы рассмотрим, как реализовать автоматическое сохранение тикетов на базе WordPress, разберем примеры кода и посмотрим, какие плагины помогут в этом.
Почему автоматическое сохранение важно для тикет-системы в WordPress
Тикет-системы часто используются для поддержки клиентов, где потеря введённой информации приводит к неудобствам и повторным обращениям. Автоматическое сохранение позволяет:
- Избежать потери данных при случайном закрытии вкладки или сбое соединения.
- Повысить удобство работы оператора и клиента.
- Обеспечить сохранность промежуточных изменений без необходимости ручного сохранения.
Для WordPress, особенно если вы делаете кастомную тикет-систему или используете популярные плагины, добавление авто-сохранения значительно улучшит UX.
Обзор популярных плагинов для создания тикет-систем с поддержкой автосохранения
Если вы не хотите писать всё с нуля, можно использовать готовые решения. Рассмотрим несколько популярных плагинов и их возможности по авто-сохранению:
- Awesome Support — мощный плагин для поддержки, есть встроенная функция черновиков, которые можно использовать как авто-сохранение.
- WP Ticket — лёгкий плагин с минималистичным интерфейсом, требует доработки для автосохранения, но поддерживает REST API.
- SupportCandy — продвинутый плагин с возможностью сохранять черновики тикетов, что можно настроить для авто-сохранения.
Кроме того, для общего улучшения работы с формами можно использовать плагин Clearfy Pro, который оптимизирует загрузку скриптов и помогает избежать конфликтов при работе с AJAX-запросами.
Создание простой системы автосохранения тикета на AJAX в WordPress
Рассмотрим пример, как сделать собственное автосохранение данных тикета с помощью AJAX и REST API. Это позволит сохранять черновик тикета каждые несколько секунд.
1. Добавление JavaScript для отправки данных
В шаблоне или плагине подключим скрипт, который будет отправлять данные формы на сервер:
jQuery(document).ready(function($) {
let timer;
$('#ticket-form').on('input', function() {
clearTimeout(timer);
timer = setTimeout(function() {
const data = {
action: 'wpticket_autosave',
ticket_data: $('#ticket-form').serialize()
};
$.post(wpticket_ajax.ajax_url, data, function(response) {
if(response.success) {
console.log('Тикет сохранён автоматически');
}
});
}, 3000); // сохраняем через 3 секунды после последнего ввода
});
});Здесь мы отслеживаем изменения в форме с id ticket-form и через 3 секунды после последнего ввода отправляем данные на сервер.
2. Обработка AJAX-запроса на сервере
В functions.php вашей темы или в плагине добавим обработчик AJAX:
add_action('wp_ajax_wpticket_autosave', 'wpticket_autosave_ticket');
add_action('wp_ajax_nopriv_wpticket_autosave', 'wpticket_autosave_ticket');
function wpticket_autosave_ticket() {
if(!isset($_POST['ticket_data'])) {
wp_send_json_error('Нет данных для сохранения');
}
parse_str($_POST['ticket_data'], $ticket_data);
$user_id = get_current_user_id();
if(!$user_id) {
wp_send_json_error('Пользователь не авторизован');
}
// Предположим, что тикет хранится как пользовательский тип записи 'wpticket'
$post_id = isset($ticket_data['ticket_id']) ? intval($ticket_data['ticket_id']) : 0;
$post_arr = [
'post_type' => 'wpticket',
'post_title' => sanitize_text_field($ticket_data['ticket_title'] ?? ''),
'post_content' => sanitize_textarea_field($ticket_data['ticket_description'] ?? ''),
'post_status' => 'draft',
'post_author' => $user_id,
];
if($post_id) {
$post_arr['ID'] = $post_id;
$post_id = wp_update_post($post_arr, true);
} else {
$post_id = wp_insert_post($post_arr, true);
}
if(is_wp_error($post_id)) {
wp_send_json_error($post_id->get_error_message());
}
wp_send_json_success(['ticket_id' => $post_id]);
}Этот код принимает сериализованные данные формы, извлекает их, создаёт или обновляет запись типа wpticket в статусе черновика. Это и есть автосохранение.
Обработка ошибок и UX-подсказки для пользователя
Важно уведомлять пользователя о состоянии автосохранения. В JavaScript можно добавить индикатор:
let saveIndicator = $('#save-status');
// Внутри $.post callback
saveIndicator.text('Сохранено');
setTimeout(() => saveIndicator.text(''), 2000);Также стоит предусмотреть обработку ошибок, например, если пользователь не авторизован, и подсказать ему войти в систему.
Расширение функционала: периодическое автосохранение и восстановление данных
Для более продвинутой реализации можно настроить периодическое сохранение:
- Отправлять AJAX-запросы с интервалом, например, каждые 30 секунд.
- Хранить ID черновика в локальном хранилище браузера (localStorage) для восстановления данных при повторном открытии.
- Добавить кнопку ручного сохранения, которая при необходимости принудительно вызовет сохранение.
Пример сохранения ID тикета в localStorage:
if(response.success) {
localStorage.setItem('wpticket_draft_id', response.data.ticket_id);
}При загрузке формы можно проверить наличие ID в localStorage и подгрузить черновик для продолжения работы.
Выводы и рекомендации
Автоматическое сохранение тикетов — это несложное, но очень полезное улучшение для любой системы поддержки на WordPress. Использование AJAX и REST API позволяет реализовать эту функцию эффективно и с хорошим UX. Если вам нужно готовое решение, обратите внимание на плагины Awesome Support или SupportCandy, для кастомных реализаций — используйте приведённые примеры кода.
Также рекомендуем ознакомиться с плагином WPGPT, который может помочь с автоматическим заполнением и подсказками при создании тикетов, что улучшит взаимодействие пользователей с системой.