Отображение отзывов клиентов на страницах товаров — важный элемент для повышения доверия и конверсии в интернет-магазинах на WooCommerce. Однако если на странице много отзывов, их загрузка сразу при открытии страницы может замедлить работу сайта и ухудшить пользовательский опыт. В таких случаях хорошим решением становится динамическая загрузка отзывов с помощью AJAX — отзывов подгружаются по мере необходимости без перезагрузки всей страницы.
Почему стоит использовать AJAX для отзывов WooCommerce
По умолчанию WooCommerce выводит все отзывы в одной странице товара, что может существенно увеличить время загрузки при большом их количестве. AJAX позволяет:
- Загружать отзывы порционно, улучшая скорость рендеринга страницы;
- Уменьшить нагрузку на сервер и базу данных;
- Обеспечить более плавный и современный UX, где пользователь сам управляет загрузкой новых отзывов;
- Избежать перезагрузки страницы при обновлении списка отзывов.
Это особенно актуально для больших магазинов с десятками и сотнями отзывов на один товар.
Подготовка к реализации AJAX загрузки отзывов
Для начала важно убедиться, что тема и плагины не конфликтуют с AJAX-запросами. Если используете тему из WPShop, она хорошо поддерживает кастомизации.
В этом примере создадим простое решение, которое будет загружать отзывы порциями по 5 штук при нажатии кнопки «Загрузить еще».
Создание AJAX обработчика для загрузки отзывов
Сначала добавим PHP функцию-обработчик, которая вернет HTML отзывов по AJAX. Для этого в functions.php вашей темы или в кастомном плагине добавьте следующий код:
add_action('wp_ajax_wpmarket_load_reviews', 'wpmarket_load_reviews_callback');
add_action('wp_ajax_nopriv_wpmarket_load_reviews', 'wpmarket_load_reviews_callback');
function wpmarket_load_reviews_callback() {
// Проверяем nonce для безопасности
if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wpmarket_load_reviews_nonce')) {
wp_send_json_error('Неверный запрос');
}
$product_id = isset($_POST['product_id']) ? intval($_POST['product_id']) : 0;
$offset = isset($_POST['offset']) ? intval($_POST['offset']) : 0;
$reviews_per_page = 5;
if (!$product_id) {
wp_send_json_error('Товар не найден');
}
$args = array(
'post_id' => $product_id,
'status' => 'approve',
'number' => $reviews_per_page,
'offset' => $offset
);
$comments = get_comments($args);
if (empty($comments)) {
wp_send_json_error('Отзывов больше нет');
}
ob_start();
foreach ($comments as $comment) {
echo '<div class="wpmarket-review">';
echo '<p><strong>' . esc_html($comment->comment_author) . '</strong> (' . esc_html($comment->comment_date) . ')</p>';
echo '<p>' . esc_html($comment->comment_content) . '</p>';
echo '</div>';
}
$reviews_html = ob_get_clean();
wp_send_json_success(array('html' => $reviews_html));
}Эта функция принимает ID товара и смещение, выбирает 5 отзывов начиная с нужного смещения, формирует HTML и возвращает его в формате JSON.
Подключение JavaScript для вызова AJAX и динамического вывода отзывов
Добавим скрипт, который будет отправлять запросы к серверу, получать отзывы и добавлять их в контейнер на странице товара.
function wpmarket_enqueue_scripts() {
if (is_product()) {
wp_enqueue_script('wpmarket-reviews-ajax', get_stylesheet_directory_uri() . '/js/wpmarket-reviews-ajax.js', array('jquery'), null, true);
wp_localize_script('wpmarket-reviews-ajax', 'wpmarket_ajax_obj', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpmarket_load_reviews_nonce'),
'product_id' => get_the_ID(),
'reviews_per_page' => 5
));
}
}
add_action('wp_enqueue_scripts', 'wpmarket_enqueue_scripts');Создайте файл wpmarket-reviews-ajax.js в папке js вашей темы с таким содержимым:
jQuery(document).ready(function($) {
var offset = wpmarket_ajax_obj.reviews_per_page;
$('#wpmarket-load-more-reviews').on('click', function(e) {
e.preventDefault();
var button = $(this);
button.prop('disabled', true).text('Загрузка...');
$.post(wpmarket_ajax_obj.ajax_url, {
action: 'wpmarket_load_reviews',
nonce: wpmarket_ajax_obj.nonce,
product_id: wpmarket_ajax_obj.product_id,
offset: offset
}, function(response) {
if (response.success) {
$('#wpmarket-reviews-container').append(response.data.html);
offset += wpmarket_ajax_obj.reviews_per_page;
button.prop('disabled', false).text('Загрузить еще');
} else {
button.text('Отзывов больше нет').prop('disabled', true);
}
});
});
});Этот скрипт добавляет обработчик клика на кнопку «Загрузить еще», отправляет AJAX запрос, получает HTML и добавляет отзывы в контейнер. Если отзывов больше нет, кнопка блокируется.
Встраивание контейнера и кнопки в шаблон товара
В файле шаблона single-product.php или через хук woocommerce_after_single_product_summary добавьте HTML-код для контейнера и кнопки:
add_action('woocommerce_after_single_product_summary', 'wpmarket_add_reviews_container', 15);
function wpmarket_add_reviews_container() {
global $post;
$reviews_count = get_comments(array('post_id' => $post->ID, 'count' => true, 'status' => 'approve'));
if ($reviews_count > 5) {
echo '<div id="wpmarket-reviews-container"></div>';
echo '<button id="wpmarket-load-more-reviews">Загрузить еще</button>';
} else {
comments_template(); // Стандартный вывод отзывов если их мало
}
}Так мы покажем стандартные отзывы, если их мало, и кнопку с контейнером для подгрузки AJAX, если отзывов много.
Дополнительные советы и улучшения
Для лучшего UX можно добавить анимации при загрузке, индикатор прогресса или бесконечный скролл вместо кнопки. Также полезно кэшировать результаты AJAX для снижения нагрузки.
Плагин Clearfy Pro поможет оптимизировать AJAX запросы и ускорить работу сайта.
Если хотите использовать готовые решения, обратите внимание на расширения для WooCommerce с AJAX отзывами, например, WPRemark, которые расширяют возможности отзывов и их управления.