Пятно: Клиенты интернет-магазина текстильной продукции должны быть равномерно распределены между менеджерами, а заявки должны отправляться непосредственно на телефон или электронную почту менеджера.
Проблема: Из-за большого количества запросов сроки обработки увеличились. Часто клиенты оставляют заявки на многих сайтах и забывают о них, что увеличивает нагрузку старшего менеджера, который распределяет задачи вручную.
Решение: Автоматизация назначения менеджера, чтобы пользователь связывался с конкретным сотрудником, минуя промежуточные шаги.
Содержание
- 1 Текущая обработка запросов
- 2 Цели оптимизации
- 3 Мозговой штурм: чего не следует делать?
- 4 Техническая реализация
- 5 Анализ и описание частей кода
- 5.1 1. Подключение файла JavaScript
- 5.2 2. Создание шорткода для отображения информации о менеджере
- 5.3 3. Сохранение маршрутов REST API
- 5.4 4. Функция получения индекса менеджера
- 5.5 5. Функция обновления индекса менеджера.
- 5.6 6. JavaScript: назначение менеджера
- 5.7 7. Интегрируйте шорткод
- 5.8 Тестирование и отладка
- 5.9 Результаты и выводы
Текущая обработка запросов
-
Пользователь заполняет контактную форму.
-
Заявка отправляется старшему менеджеру по электронной почте.
-
Старший менеджер вручную распределяет запросы между сотрудниками.
-
Менеджеры связываются с клиентом для уточнения деталей.
Этот процесс типичен, но он неэффективен при внезапном увеличении трафика.
Цели оптимизации
-
Равномерное распределение приложений. Все менеджеры должны получать одинаковую рабочую нагрузку.
-
Прямое общение с менеджером. Клиенту необходимо позвонить или написать напрямую менеджеру, избегая лишних действий.
-
Увеличение конверсии. За счет отображения контактов в наиболее конвертируемых местах.
Мозговой штурм: чего не следует делать?
-
Удалите формы и мусор.
-
Скрыть контакты менеджера.
-
Несправедливое распределение заявок.
Решение: Отображайте контакты менеджера по одному, сохраняя равномерное распределение.
Техническая реализация
Шаг 1. Создайте шорткод для отображения информации о менеджере.
Добавьте следующий код в файл функции.php темы:
// Подключение внешнего JavaScript-файла
function enqueue_custom_scripts() {
wp_enqueue_script('rotating-manager', get_stylesheet_directory_uri() . '/js/rotating-manager.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
// Создание шорткода для отображения информации о менеджере
function display_rotating_manager() {
ob_start();
?>
Шаг 2. Настройка REST API для работы с менеджерами
Добавить в файл функции.php Маршруты API для получения и обновления данных о последнем назначенном менеджере:
// Регистрация маршрутов REST API
add_action('rest_api_init', function() {
register_rest_route('custom/v1', '/getLastAssignedManagerIndex', [
'methods' => 'GET',
'callback' => 'get_last_assigned_manager_index',
]);
register_rest_route('custom/v1', '/updateLastAssignedManagerIndex', [
'methods' => 'POST',
'callback' => 'update_last_assigned_manager_index',
]);
});
// Получение индекса последнего менеджера
function get_last_assigned_manager_index() {
$index = get_option('last_assigned_manager_index', 0);
return rest_ensure_response(['lastAssignedIndex' => $index]);
}
// Обновление индекса последнего менеджера
function update_last_assigned_manager_index(WP_REST_Request $request) {
$index = $request->get_param('lastAssignedIndex');
update_option('last_assigned_manager_index', $index);
return rest_ensure_response('Index updated successfully');
}
Шаг 3. Логика назначения менеджера в JavaScript
Создать файл /js/rotating-manager.js для управления логикой отображения и сохранения данных:
document.addEventListener("DOMContentLoaded", async function () {
const managers = [
{ phone: "8 (999) 999-00-00", email: "[email protected]", name: "Имя Фамилия" },
{ phone: "8 (999) 999-11-11", email: "[email protected]", name: "Имя Фамилия" },
{ phone: "8 (999) 999-22-22", email: "[email protected]", name: "Имя Фамилия" },
{ phone: "8 (999) 999-33-33", email: "[email protected]", name: "Имя Фамилия" },
];
let assignedManager = localStorage.getItem("assignedManager");
if (!assignedManager) {
try {
const response = await fetch("/wp-json/custom/v1/getLastAssignedManagerIndex");
const data = await response.json();
let lastAssignedIndex = data.lastAssignedIndex;
lastAssignedIndex = (lastAssignedIndex + 1) % managers.length;
assignedManager = JSON.stringify(managers[lastAssignedIndex]);
localStorage.setItem("assignedManager", assignedManager);
await fetch("/wp-json/custom/v1/updateLastAssignedManagerIndex", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ lastAssignedIndex }),
});
} catch (error) {
console.error("Ошибка при обновлении менеджера:", error);
return;
}
}
const currentManager = JSON.parse(assignedManager);
const managerInfoDiv = document.getElementById("manager-info");
managerInfoDiv.innerHTML = `
Имя: ${currentManager.name}
Телефон: ${currentManager.phone}
Email: ${currentManager.email}
`;
});
Шаг 4. Вставьте шорткод
Для отображения менеджера используйте шорткод:
Анализ и описание частей кода
1. Подключение файла JavaScript
function enqueue_custom_scripts() {
wp_enqueue_script('rotating-manager', get_stylesheet_directory_uri() . '/js/rotating-manager.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
Цель: подключить файл /js/rotating-manager.js
в WordPress.
2. Создание шорткода для отображения информации о менеджере
function display_rotating_manager() {
ob_start();
?>
Цель: добавить короткий код [rotating_manager]
который выходит пустым
-
с
id="manager-info"
. Затем этот контейнер заполняется информацией через JavaScript.
ob_start()
Иob_get_clean()
: Буферизирует вывод HTML, чтобы его можно было вернуть в виде строки.3. Сохранение маршрутов REST API
add_action('rest_api_init', function() { register_rest_route('custom/v1', '/getLastAssignedManagerIndex', [ 'methods' => 'GET', 'callback' => 'get_last_assigned_manager_index', ]); register_rest_route('custom/v1', '/updateLastAssignedManagerIndex', [ 'methods' => 'POST', 'callback' => 'update_last_assigned_manager_index', ]); });
Цель: создает два маршрута REST API:
-
/getLastAssignedManagerIndex
— чтобы получить индекс последнего назначенного менеджера. -
/updateLastAssignedManagerIndex
— чтобы обновить этот индекс.
-
'methods'
: метод маршрутизации HTTP (GET
для чтения,POST
для записи). -
'callback'
: Функция выполняется при выезде на дорогу.
4. Функция получения индекса менеджера
function get_last_assigned_manager_index() { $index = get_option('last_assigned_manager_index', 0); return rest_ensure_response(['lastAssignedIndex' => $index]); }
-
Цель: возвращает индекс последнего назначенного обработчика, сохраненного в базе данных WordPress.
-
get_option
: функция чтения сохраненных параметров.-
'last_assigned_manager_index'
: ключевые параметры. -
0
: Значение по умолчанию, если настройка отсутствует.
-
-
rest_ensure_response
: инкапсулирует данные в объект ответа REST API.
5. Функция обновления индекса менеджера.
function update_last_assigned_manager_index(WP_REST_Request $request) { $index = $request->get_param('lastAssignedIndex'); update_option('last_assigned_manager_index', $index); return rest_ensure_response('Index updated successfully'); }
Цель: обновляет индекс последнего назначенного менеджера в базе данных.
-
WP_REST_Request
: Объект запроса, используемый в REST API. -
get_param
: извлекает параметр из тела запроса (в данном случаеlastAssignedIndex
). -
update_option
: сохраняет новое значение настройки.
6. JavaScript: назначение менеджера
document.addEventListener("DOMContentLoaded", асинхронная функция () { const handlers = [ { phone: "8 (999) 999-00-00", email: "[email protected]", name: "Имя Фамилия" }, { phone: "8 (999) 999-11-11", email: "[email protected]", name: "Имя Фамилия" }, { phone: "8 (999) 999-22-22", email: "[email protected]", name: "Имя Фамилия" }, { phone: "8 (999) 999-33-33", email: "[email protected]", name: "Имя Фамилия
Массив
managers
: содержит контактные данные всех менеджеров.Проверка локального назначения менеджера
let assignedManager = localStorage.getItem("assignedManager");
Назначение: проверяет, назначен ли менеджер в
localStorage
браузера.Если менеджер не назначен
if (!assignedManager) { try { const response = await fetch("/wp-json/custom/v1/getLastAssignedManagerIndex"); const data = await response.json(); let lastAssignedIndex = data.lastAssignedIndex; lastAssignedIndex = (lastAssignedIndex + 1) % managers.length; assignedManager = JSON.stringify(managers[lastAssignedIndex]); localStorage.setItem("assignedManager", назначенныйМенеджер); wait fetch("/wp-json/custom/v1/updateLastAssignedManagerIndex", { метод: "POST", заголовки: { "Content-Type": "application/json" }, body: JSON.stringify({lastAssignedIndex }), }); } catch (error) { console.error("Ошибка при обновлении менеджера:", error); назад; } }
Режим работы
-
Получаем индекс текущего менеджера через API (
/getLastAssignedManagerIndex
). -
Рассчитайте следующий индекс.
-
Регистрирует нового менеджера в
localStorage
-
Отправляет новый индекс на сервер через API (
/updateLastAssignedManagerIndex
).
Отображать информацию на странице
const currentManager = JSON.parse(assignedManager); const managerInfoDiv = document.getElementById("manager-info"); managerInfoDiv.innerHTML = ` Имя: ${currentManager.name}
Телефон: ${currentManager.phone}
Email: ${currentManager.email} `; });Цель: отображает информацию о назначенном менеджере в элементе с
id="manager-info"
7. Интегрируйте шорткод
Цель: позволяет отображать блок с менеджером в шаблоне WordPress.
Тестирование и отладка
-
Проверьте, правильно ли отображаются данные менеджера.
-
Убедитесь, что приложения распределены равномерно.
-
Используйте инструменты браузера для отладки JavaScript.
-
Проверьте функциональность API через Postman или Curl.
Результаты и выводы
Этот подход позволяет:
-
Ускорить обработку заявок.
-
Равномерно распределите нагрузку между менеджерами.
-
Повышайте удовлетворенность клиентов за счет своевременной связи.
Этот метод еще отслеживается, но уже показал свою эффективность. Если у вас есть идеи по улучшению, пожалуйста, оставьте комментарий!