Очищаем плагин Expert Review от jQuery: лайки, опросы и FAQ на Vanilla JS

Что скрывается внутри скрипта Expert Review

Скрипт плагина (/wp-content/plugins/expert-review/assets/js/scripts.min.js) весит около 13 КБ и содержит три ключевых интерактивных механизма:

1. Система лайков и дизлайков (.js-expert-review-likes-button): хранение проголосовавших сущностей в localStorage в base64-ключе с привязкой к домену, AJAX-запросы к серверу и пересчет счетчиков активности.
2. Модуль интерактивных опросов (Polls): фиксация голоса в браузере, отправка на сервер, пересчет процентного соотношения вариантов ответов и кнопка переключения «Показать результаты».
3. Модальное окно «Задать вопрос» и FAQ: динамическое создание HTML-формы всплывающего окна, проверка валидации чекбоксов согласия и текстовых полей, сериализация формы, отправка AJAX-запроса и аккордеон с анимацией высоты (slideToggle) для блоков «Вопрос-Ответ».

Разбор замены: ключевые узлы

1. Отправка лайков и опросов без $.ajax

Оригинальный скрипт отправляет данные через $.ajax({ type: "post", ... }). В отличие от стандартного REST API, плагины WPShop принимают строго классический формат application/x-www-form-urlencoded. Если передать FormData напрямую, часть PHP-хуков просто не видит переменные. Поэтому мы собираем параметры через нативный URLSearchParams:

// Было в плагине:
var v = { action: "expert_review_save_like", nonce: expert_review_ajax.nonce, ... };
e.ajax({ url: expert_review_ajax.url, type: "post", data: v });

// Стало на чистом JS:
var bodyParams = new URLSearchParams();
bodyParams.append("action", "expert_review_save_like");
bodyParams.append("nonce", ajaxObj.nonce);
bodyParams.append("id", id);
bodyParams.append("type", type);

fetch(ajaxObj.url, {
  method: "POST",
  headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" },
  body: bodyParams.toString(),
  credentials: "same-origin"
})
.then(res => res.json())
.then(res => {
  if (res.success) {
    // обновляем цифры лайков и состояние voted
  }
});

2. Нативная валидация и отправка формы вопроса

При клике на кнопку «Задать вопрос эксперту» скрипт генерирует модальное окно. Вместо jQuery-метода $(form).serializeArray() мы обходим элементы формы нативным циклом, проверяем обязательные поля и чекбокс согласия на обработку данных, а затем отправляем запрос через fetch():

var formDataObj = {};
form.querySelectorAll("input, textarea, select").forEach(function (input) {
  if (!input.name) return;
  if (input.type === "checkbox" || input.type === "radio") {
    if (input.checked) formDataObj[input.name] = input.value;
  } else {
    formDataObj[input.name] = input.value;
  }
});

// Передаем сериализованные поля в data[...]
var bodyParams = new URLSearchParams();
bodyParams.append("action", "expert_review_submit_question");
bodyParams.append("nonce", ajax.nonce);
for (var k in formDataObj) {
  bodyParams.append("data[" + k + "]", formDataObj[k]);
}

3. Аккордеон FAQ без .slideToggle()

Раскрытие ответов в блоке FAQ плагина работало через $(this).parent().find(".js-expert-review-faq-item-answer").slideToggle(). Мы заменяем его на нативный расчет высоты элемента с плавным CSS-переходом transition: height 300ms.

Куда загрузить и как подключить

Чтобы при выходе обновлений плагина Expert Review наши правки не перезаписались, подключение реализуется строго через дочернюю тему (например, reboot_child):

1. Скачайте подготовленный файл expert-review.vanilla.js по кнопке ниже.
2. Откройте файловый менеджер хостинга или подключитесь по FTP/SFTP.
3. Загрузите файл в корень вашей дочерней темы: /wp-content/themes/reboot_child/expert-review.vanilla.js.
4. Откройте файл functions.php дочерней темы и добавьте код подмены скрипта:

// Подменяем скрипт Expert Review на Vanilla JS без jQuery
add_action('wp_enqueue_scripts', function () {
    global $wp_scripts;

    $expert_script_path = get_stylesheet_directory() . '/expert-review.vanilla.js';
    $expert_script_uri  = get_stylesheet_directory_uri() . '/expert-review.vanilla.js';
    $version            = file_exists($expert_script_path) ? filemtime($expert_script_path) : null;

    // Скрипт плагина зарегистрирован под дескриптором 'expert-review-scripts'
    if (isset($wp_scripts->registered['expert-review-scripts'])) {
        $wp_scripts->registered['expert-review-scripts']->src  = $expert_script_uri;
        $wp_scripts->registered['expert-review-scripts']->deps = array(); // обнуляем зависимость от jquery
        $wp_scripts->registered['expert-review-scripts']->ver  = $version;
    }
}, 9999); // Срабатываем после инициализации всех плагинов

Почему именно этот способ? Плагин передает в JS массив переводов и адрес admin-ajax.php через функцию wp_localize_script('expert-review-scripts', 'expert_review_ajax', ...). Подменяя путь к файлу прямо в объекте $wp_scripts, мы сохраняем все системные токены безопасности (nonce) и переводы без необходимости вручную прописывать их в PHP.

Скачать готовый скрипт

Готовый файл содержит полностью переписанную логику: хранилище лайков, голосование в опросах, всплывающее окно вопроса и аккордеон FAQ. Никаких внешних библиотек не требуется.

Скачать expert-review.vanilla.js

Итог

После отключения jQuery в теме и в плагине Expert Review сайт окончательно перестает тянуть устаревшую библиотеку на всех страницах записей. Браузер больше не тратит ресурсы мобильного процессора на разбор лишнего слоя абстракций, а интерфейс реагирует на действия пользователей без микрофризов.

← Предыдущая статьяИзбавляемся от jQuery в темах WPShop: ускоряем Root, Reboot и Bono