Назначение личного менеджера для клиента на сайте с CMS WordPress12.12.2024 14:30

Задача: Клиенты интернет-магазина текстильной продукции должны быть распределены между менеджерами равномерно, при этом заявки должны поступать напрямую на телефон или почту менеджера.

Проблема: из-за массовых заявок время обработки возросло. Часто клиенты оставляют заявки на многих сайтах и забывают об этом, что увеличивает нагрузку на старшего менеджера, распределяющего задачи вручную.

Решение: Автоматизация назначения менеджеров, чтобы пользователь связывался с конкретным сотрудником, минуя промежуточные этапы.

Текущий процесс обработки заявок

Пользователь заполняет форму связи.
Заявка поступает на почту старшему менеджеру.
Старший менеджер вручную распределяет заявки между сотрудниками.
Менеджеры связываются с клиентом для уточнения деталей.

Этот процесс типичен, но он неэффективен при резком увеличении трафика.

Цели оптимизации

Равномерное распределение заявок. Все менеджеры должны получать одинаковую нагрузку.
Прямая связь с менеджером. Клиент должен звонить или писать непосредственно менеджеру, минуя лишние этапы.
Повышение конверсии. Через отображение контактов в наиболее конверсионных местах.

Мозговой штурм: что не делать?

Удалять формы и корзину.
Скрывать контакты менеджеров.
Несправедливо распределять заявки.

Решение: Показ контактов менеджера по очереди, сохраняя равномерность распределения.

Техническая реализация

Шаг 1. Создание шорткода для вывода информации о менеджере

Добавляем следующий код в файл functions.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 для работы с менеджерами

Добавляем в файл functions.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: "manager-1@site.ru", name: "Имя Фамилия" },

    { phone: "8 (999) 999-11-11", email: "manager-2@site.ru", name: "Имя Фамилия" },

    { phone: "8 (999) 999-22-22", email: "manager-3@site.ru", name: "Имя Фамилия" },

    { phone: "8 (999) 999-33-33", email: "manager-4@site.ru", 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", async function () {
  const managers = [
    { phone: "8 (999) 999-00-00", email: "manager-1@site.ru", name: "Имя Фамилия" },
    { phone: "8 (999) 999-11-11", email: "manager-2@site.ru", name: "Имя Фамилия" },
    { phone: "8 (999) 999-22-22", email: "manager-3@site.ru", name: "Имя Фамилия" },
    { phone: "8 (999) 999-33-33", email: "manager-4@site.ru", 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", 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;
    }
  }

Порядок работы

Получаем текущий индекс менеджера через 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.

Результаты и выводы

Данный подход позволяет: 

Ускорить обработку заявок.
Равномерно распределить нагрузку на менеджеров.
Повысить удовлетворённость клиентов за счёт оперативной связи.

Этот метод ещё отслеживается, но уже показал эффективность. Если у вас есть идеи по улучшению, оставьте комментарий! 
    
            © Habrahabr.ru