WooCommerce: реализация автоматической подгрузки вариантов товара без перезагрузки страницы

Диагностика проблемы: почему нужна автоматическая подгрузка вариантов товара

В стандартном WooCommerce при выборе варианта товара (атрибута) часто происходит перезагрузка страницы, чтобы обновить цену и доступность. Это ухудшает UX, особенно на мобильных устройствах и при большом ассортименте. Задача — сделать динамическое обновление информации о вариантах без перезагрузки страницы, используя AJAX.

Пошаговое решение: реализация AJAX-подгрузки вариантов товара

1. Добавляем JavaScript для отслеживания выбора варианта

В файле вашей темы или плагина подключите следующий скрипт, который будет отправлять AJAX-запрос при изменении атрибутов:

jQuery(document).ready(function($) {
  $('form.variations_form').on('woocommerce_variation_select_change', function() {
    var form = $(this);
    var data = form.serialize();

    $.ajax({
      url: wc_add_to_cart_params.ajax_url,
      type: 'POST',
      data: {
        action: 'load_variation_data',
        data: data,
        product_id: form.data('product_id')
      },
      success: function(response) {
        if(response.success) {
          // Обновляем цену и наличие
          $('.woocommerce-variation-price').html(response.data.price_html);
          $('.woocommerce-variation-availability').html(response.data.availability_html);
        }
      }
    });
  });
});

2. Регистрируем AJAX обработчик в functions.php

Добавьте код, который обработает запрос, получит данные выбранного варианта и вернет их в JSON формате:

add_action('wp_ajax_load_variation_data', 'load_variation_data_callback');
add_action('wp_ajax_nopriv_load_variation_data', 'load_variation_data_callback');

function load_variation_data_callback() {
  parse_str($_POST['data'], $form_data);
  $product_id = intval($_POST['product_id']);
  $product = wc_get_product($product_id);

  if (!$product || !$product->is_type('variable')) {
    wp_send_json_error();
  }

  $variation_id = 0;
  $attributes = [];

  foreach ($form_data as $key => $value) {
    if (strpos($key, 'attribute_') === 0) {
      $attributes[$key] = $value;
    }
  }

  $available_variations = $product->get_available_variations();
  foreach ($available_variations as $variation) {
    $match = true;
    foreach ($attributes as $attr_name => $attr_value) {
      if ($variation['attributes'][$attr_name] !== $attr_value) {
        $match = false;
        break;
      }
    }
    if ($match) {
      $variation_id = $variation['variation_id'];
      break;
    }
  }

  if (!$variation_id) {
    wp_send_json_error();
  }

  $variation_product = wc_get_product($variation_id);
  ob_start();
  woocommerce_template_single_price();
  $price_html = $variation_product->get_price_html();
  $availability = $variation_product->get_availability();
  $availability_html = '';
  if (!empty($availability['availability'])) {
    $availability_html = '<p class="stock '.esc_attr($availability['class']).'">'.esc_html($availability['availability']).'</p>';
  }

  wp_send_json_success([
    'price_html' => $price_html,
    'availability_html' => $availability_html
  ]);
}

3. Подключаем скрипт и локализацию параметров

В functions.php добавьте регистрацию и локализацию скрипта:

function enqueue_variation_ajax_script() {
  if (is_product()) {
    wp_enqueue_script('variation-ajax', get_stylesheet_directory_uri() . '/js/variation-ajax.js', ['jquery'], null, true);
    wp_localize_script('variation-ajax', 'wc_add_to_cart_params', [
      'ajax_url' => admin_url('admin-ajax.php')
    ]);
  }
}
add_action('wp_enqueue_scripts', 'enqueue_variation_ajax_script');

Проверка результата после внедрения

• Откройте страницу вариативного товара.
• Выберите значения атрибутов.
• Убедитесь, что цена и наличие обновляются без перезагрузки страницы.
• Проверьте консоль браузера на отсутствие ошибок JavaScript.

Частые ошибки и как их исправить

• Не отправляется AJAX-запрос: Проверьте, что скрипт подключен и локализован правильно.
• Нет совпадения варианта: Убедитесь, что имена атрибутов в запросе совпадают с теми, что в товаре (например, 'attribute_pa_color').
• Цена не обновляется: В ответе AJAX верните корректный HTML цены через $variation_product->get_price_html().
• Проблемы с кэшированием: Отключите кэширование страницы для страниц товара или исключите AJAX-запросы из кэша.

Практические советы по безопасности и производительности

• Проверяйте наличие и тип продукта в AJAX обработчике, чтобы избежать ошибок.
• Используйте wp_send_json_success и wp_send_json_error для корректного возврата данных.
• Минимизируйте объем передаваемых данных, возвращайте только нужные элементы HTML.
• Кешируйте результаты на стороне клиента, если варианты не меняются часто.
• Используйте хуки WooCommerce, чтобы расширять функционал без правки ядра.

Сравнение методов реализации автоматической подгрузки вариантов