Как создать весовой калькулятор в WordPress с помощью AJAX и PHP

Весовой калькулятор — это популярный инструмент для сайтов, где товары продаются по весу. В WordPress можно реализовать такой калькулятор, который позволит пользователям вводить вес товара и сразу получать стоимость с учётом заданной цены за килограмм. В этой статье мы подробно рассмотрим, как создать весовой калькулятор с динамическими расчетами на AJAX и PHP без использования тяжелых плагинов.

Что нужно для весового калькулятора: основные требования

Прежде чем перейти к коду, определим, что должен уметь калькулятор:

• Пользователь вводит вес товара в килограммах (можно и в граммах с конвертацией).
• Скрипт автоматически рассчитывает стоимость, умножая вес на цену за килограмм.
• Расчет происходит без перезагрузки страницы — через AJAX.
• Цена за килограмм может быть задана в настройках калькулятора или передаваться в shortcode.
• Результат отображается сразу в удобном формате с двумя знаками после запятой.

Теперь реализуем это на практике.

Создание шорткода для весового калькулятора

Для удобства добавим калькулятор через шорткод. Это позволит вставлять его в любые записи и страницы. Начнем с регистрации шорткода и подключения необходимых скриптов.

function wpcalc_register_weight_calculator() {
    wp_enqueue_script('wpcalc-weight-calculator', get_template_directory_uri() . '/js/wpcalc-weight-calculator.js', array('jquery'), '1.0', true );
    wp_localize_script('wpcalc-weight-calculator', 'wpcalc_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'price_per_kg' => 450 // стандартная цена за кг, можно менять
    ));
}
add_action('wp_enqueue_scripts', 'wpcalc_register_weight_calculator');

function wpcalc_weight_calculator_shortcode($atts) {
    $atts = shortcode_atts(array('price' => 450), $atts, 'weight_calculator');
    ob_start();
    ?>
    <div id="wpcalc-weight-calculator">
        <label for="wpcalc-weight-input">Введите вес товара (кг):</label>
        <input type="number" step="0.01" min="0" id="wpcalc-weight-input" value="0" />
        <p>Цена за кг: <strong><?php echo esc_html($atts['price']); ?> руб.</strong></p>
        <p>Итоговая стоимость: <strong id="wpcalc-result">0.00 руб.</strong></p>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('weight_calculator', 'wpcalc_weight_calculator_shortcode');

Здесь мы создали шорткод [weight_calculator price=450], который выводит поле ввода веса и показывает цену за килограмм. Скрипт wpcalc-weight-calculator.js будет отвечать за AJAX-запросы.

Обработка AJAX-запроса на сервере

Создадим обработчик, который получит вес, умножит на цену и вернёт результат. Добавим следующие функции в functions.php:

function wpcalc_ajax_calculate_price() {
    $weight = isset($_POST['weight']) ? floatval($_POST['weight']) : 0;
    $price_per_kg = isset($_POST['price']) ? floatval($_POST['price']) : 0;

    if ($weight <= 0 || $price_per_kg <= 0) {
        wp_send_json_error('Некорректные данные');
    }

    $total = $weight * $price_per_kg;
    $total_formatted = number_format($total, 2, '.', '');

    wp_send_json_success(array('total' => $total_formatted));
}
add_action('wp_ajax_wpcalc_calculate_price', 'wpcalc_ajax_calculate_price');
add_action('wp_ajax_nopriv_wpcalc_calculate_price', 'wpcalc_ajax_calculate_price');

Функция wpcalc_ajax_calculate_price получает данные через POST, вычисляет итог и возвращает JSON с результатом.

JavaScript для динамического расчёта цены

Создайте файл js/wpcalc-weight-calculator.js в папке темы и вставьте туда следующий код:

jQuery(document).ready(function($) {
    $('#wpcalc-weight-input').on('input', function() {
        var weight = parseFloat($(this).val());
        var price = parseFloat(wpcalc_ajax_obj.price_per_kg);

        if (isNaN(weight) || weight <= 0) {
            $('#wpcalc-result').text('0.00 руб.');
            return;
        }

        $.ajax({
            url: wpcalc_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'wpcalc_calculate_price',
                weight: weight,
                price: price
            },
            success: function(response) {
                if (response.success) {
                    $('#wpcalc-result').text(response.data.total + ' руб.');
                } else {
                    $('#wpcalc-result').text('Ошибка расчёта');
                }
            },
            error: function() {
                $('#wpcalc-result').text('Ошибка запроса');
            }
        });
    });
});

Этот скрипт слушает изменения в поле веса и отправляет AJAX-запрос на сервер для расчёта. Результат выводится мгновенно.

Настройка и расширение калькулятора

Вы можете расширить калькулятор, добавив:

• Возможность выбора единиц измерения (кг, г) с автоматической конвертацией.
• Поддержку разных цен для различных товаров через атрибуты шорткода.
• Интеграцию с корзиной WooCommerce для автоматического добавления товара с рассчитанной ценой.

Также для удобства администрирования можно добавить настройки калькулятора в админ-панель с помощью плагина Clearfy Pro или создать отдельный пункт меню.

Пример расширения: поддержка грамм

Добавим селектор единиц и конвертацию в JS:

/* В HTML шорткода добавьте селектор */
// <select id="wpcalc-unit"><option value="kg" selected>кг</option><option value="g">г</option></select>

/* В JS измените обработчик */
$('#wpcalc-weight-input, #wpcalc-unit').on('input change', function() {
    var weight = parseFloat($('#wpcalc-weight-input').val());
    var unit = $('#wpcalc-unit').val();
    var price = parseFloat(wpcalc_ajax_obj.price_per_kg);

    if (unit === 'g') {
        weight = weight / 1000; // перевод грамм в кг
    }

    if (isNaN(weight) || weight <= 0) {
        $('#wpcalc-result').text('0.00 руб.');
        return;
    }

    // Далее AJAX как в предыдущем примере
});

Выводы и рекомендации

Создание весового калькулятора с помощью AJAX и PHP — удобный способ повысить интерактивность вашего сайта на WordPress и улучшить UX при продаже товаров по весу. Такой калькулятор легко адаптируется под разные задачи, интегрируется с WooCommerce и другими плагинами.

Если вы хотите более продвинутые функции, рассмотрите плагины с расширенными возможностями или комбинируйте с WPGPT для умного взаимодействия с пользователями.