12.12.2024 11:18
Ptahini 3 226 Источник

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

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

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

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

  1. Пользователь заполняет форму связи.

  2. Заявка поступает на почту старшему менеджеру.

  3. Старший менеджер вручную распределяет заявки между сотрудниками.

  4. Менеджеры связываются с клиентом для уточнения деталей.

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

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

  1. Равномерное распределение заявок. Все менеджеры должны получать одинаковую нагрузку.

  2. Прямая связь с менеджером. Клиент должен звонить или писать непосредственно менеджеру, минуя лишние этапы.

  3. Повышение конверсии. Через отображение контактов в наиболее конверсионных местах.

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

  1. Удалять формы и корзину.

  2. Скрывать контакты менеджеров.

  3. Несправедливо распределять заявки.

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

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

Шаг 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();

    ?>

    <div id="manager-info"></div>

    <?php

    return ob_get_clean();

}

add_shortcode('rotating_manager', 'display_rotating_manager');

Шаг 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 = `

    <strong>Имя:</strong> ${currentManager.name}<br>

    <strong>Телефон:</strong> <a href="tel:${currentManager.phone}">${currentManager.phone}</a><br>

    <strong>Email:</strong> <a href="mailto:${currentManager.email}">${currentManager.email}</a>

  `;

});

Шаг 4. Встраивание шорткода

Для отображения менеджера используйте шорткод:

  • В текстовом редакторе: [rotating_manager]

  • В коде шаблона:

<?php echo do_shortcode("[rotating_manager]"); ?>

Разбор и описание частей кода

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.

  • wp_enqueue_script: стандартная функция WordPress для добавления JavaScript.

    • 'rotating-manager' — имя скрипта.

    • get_stylesheet_directory_uri() — путь к текущей теме.

    • array('jquery') — зависимости (в данном случае, jQuery).

    • null — версия скрипта (можно оставить пустым).

    • true — загружать скрипт внизу страницы (повышает производительность).

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

function display_rotating_manager() {
    ob_start();
    ?>
    <div id="manager-info"></div>
    <?php
    return ob_get_clean();
}
add_shortcode('rotating_manager', 'display_rotating_manager');

Назначение: добавляет шорткод [rotating_manager], который выводит пустой

  • <div> с 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 маршрута:

  1. /getLastAssignedManagerIndex — для получения индекса последнего назначенного менеджера.

  2. /updateLastAssignedManagerIndex — для обновления этого индекса.

  • register_rest_route: регистрирует маршруты для REST API.

  • '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;
    }
  }

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

  1. Получаем текущий индекс менеджера через API (/getLastAssignedManagerIndex).

  2. Вычисляет следующий индекс.

  3. Сохраняет нового менеджера в localStorage

  4. Отправляет новый индекс на сервер через API (/updateLastAssignedManagerIndex).

Отображение информации на странице

const currentManager = JSON.parse(assignedManager);
  const managerInfoDiv = document.getElementById("manager-info");

  managerInfoDiv.innerHTML = `
    <strong>Имя:</strong> ${currentManager.name}<br>
    <strong>Телефон:</strong> <a href="tel:${currentManager.phone}">${currentManager.phone}</a><br>
    <strong>Email:</strong> <a href="mailto:${currentManager.email}">${currentManager.email}</a>
  `;
});

Назначение: отображает информацию о назначенном менеджере в элементе с id="manager-info"

7. Встраивание шорткода

<?php echo do_shortcode("[rotating_manager]"); ?>

Назначение: позволяет выводить блок с менеджером в шаблоне WordPress.

Тестирование и отладка

  1. Проверьте, корректно ли отображаются данные о менеджерах.

  2. Убедитесь, что заявки распределяются равномерно.

  3. Используйте инструменты браузера для отладки JavaScript.

  4. Проверьте работоспособность API через Postman или curl.

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

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

  • Ускорить обработку заявок.

  • Равномерно распределить нагрузку на менеджеров.

  • Повысить удовлетворённость клиентов за счёт оперативной связи.

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

Комментарии (3)


  1. init0
    13.12.2024 05:10
    #27668532

    А зачем это делать на фронте?


    1. Ptahini Автор
      13.12.2024 05:10
      #27669564

      В этом решении показано, как выполнить задачу, обладая лишь базовыми знаниями о CMS WordPress и её админпанели. Однако я согласен с вашим замечанием, оно вполне обоснованно.


      1. init0
        13.12.2024 05:10
        #27674448

        Понятно, значит имеем по сути пример как делать не надо. Даже как абстрактный пример - плохо, REST API endpoint обновления индекса публичен и передаваемый в него данные не валидируются и не санитизируются, при регистрации js скрипта в зависимостях указан jQuery а в коде он не используется.