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

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

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

Диагностика проблемы

Для начала убедитесь, что на странице товара подключены стандартные скрипты WooCommerce, отвечающие за вариации:

• wc-add-to-cart-variation — отвечает за выбор вариаций и обновление цены;
• jquery — базовая библиотека, от которой зависит работа скриптов.

Если цена не обновляется при выборе атрибута, проверьте консоль браузера на наличие ошибок JavaScript (например, конфликт плагинов или неправильная инициализация скриптов). Также проверьте, что на странице нет кастомных скриптов, блокирующих событие change на селекторах вариаций.

Пошаговое решение: динамическое обновление цены через AJAX и JavaScript

1. Подключение пользовательского скрипта

Добавьте в файл functions.php вашей темы следующий код для подключения кастомного скрипта на странице товара:

add_action('wp_enqueue_scripts', function() {
    if (is_product()) {
        wp_enqueue_script('custom-variation-price', get_stylesheet_directory_uri() . '/js/custom-variation-price.js', ['jquery', 'wc-add-to-cart-variation'], '1.0', true);

        // Передаем данные для AJAX
        wp_localize_script('custom-variation-price', 'customVarPrice', [
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('custom_var_price_nonce')
        ]);
    }
});

2. Создание AJAX обработчика, возвращающего цену вариации

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

add_action('wp_ajax_get_variation_price', 'custom_get_variation_price');
add_action('wp_ajax_nopriv_get_variation_price', 'custom_get_variation_price');

function custom_get_variation_price() {
    check_ajax_referer('custom_var_price_nonce', 'nonce');

    $product_id = intval($_POST['product_id']);
    $attributes = isset($_POST['attributes']) ? (array) $_POST['attributes'] : [];

    if (!$product_id || empty($attributes)) {
        wp_send_json_error('Неверные данные');
    }

    $product = wc_get_product($product_id);
    if (!$product || 'variable' !== $product->get_type()) {
        wp_send_json_error('Продукт не вариативный');
    }

    $available_variations = $product->get_available_variations();
    foreach ($available_variations as $variation) {
        $variation_attributes = $variation['attributes'];
        $matched = true;
        foreach ($attributes as $key => $value) {
            if (!isset($variation_attributes[$key]) || $variation_attributes[$key] !== $value) {
                $matched = false;
                break;
            }
        }
        if ($matched) {
            $variation_obj = wc_get_product($variation['variation_id']);
            $price_html = $variation_obj->get_price_html();
            wp_send_json_success(['price_html' => $price_html]);
        }
    }

    wp_send_json_error('Вариация не найдена');
}

3. JavaScript для отправки AJAX при изменении атрибутов

Создайте файл custom-variation-price.js с таким содержимым:

jQuery(function($) {
    const productId = $('form.variations_form').data('product_id');

    $('form.variations_form select').on('change', function() {
        const attributes = {};
        $('form.variations_form select').each(function() {
            const name = $(this).attr('name');
            const value = $(this).val();
            if (value) {
                attributes[name] = value;
            }
        });

        if (Object.keys(attributes).length === 0) {
            return; // Нет выбранных атрибутов
        }

        $.ajax({
            url: customVarPrice.ajax_url,
            method: 'POST',
            data: {
                action: 'get_variation_price',
                nonce: customVarPrice.nonce,
                product_id: productId,
                attributes: attributes
            },
            success: function(response) {
                if (response.success) {
                    $('.woocommerce-variation-price').html(response.data.price_html);
                } else {
                    console.log('Ошибка получения цены:', response.data);
                }
            },
            error: function(xhr, status, error) {
                console.log('AJAX ошибка:', error);
            }
        });
    });
});

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

1. Зайдите на страницу вариативного товара.
2. Выберите разные атрибуты товара (цвет, размер и т.п.).
3. Убедитесь, что цена в блоке .woocommerce-variation-price обновляется динамически без перезагрузки страницы.
4. Проверьте консоль браузера на отсутствие ошибок JavaScript.
5. Если цена не меняется, проверьте правильность селекторов и передаваемых данных в AJAX.

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

• Неправильные имена атрибутов в AJAX-запросе: WooCommerce использует ключи с префиксом attribute_, например, attribute_pa_color. Нужно передавать именно такие ключи.
• Отсутствие nonce или неправильная проверка: Без nonce WordPress может блокировать AJAX-запросы. Проверьте правильность передачи и проверки.
• Конфликты с другими плагинами или темой: Отключите кастомные скрипты, чтобы проверить, не мешают ли они обновлению цены.
• Проблемы с кэшированием: Если кэш страницы слишком агрессивный, AJAX может не срабатывать или загружать устаревшие данные.

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

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

Сравнение вариантов реализации