Как создать динамический калькулятор с расчетом по формуле в WordPress

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

Выбор плагина для создания форм с расчетами

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

• Calculated Fields Form — мощный плагин с визуальным редактором форм и возможностью создания формул на JavaScript.
• Formidable Forms — позволяет создавать формы с расчетами, интегрируется с AJAX.
• Gravity Forms — платный, но функциональный, поддерживает вычисления через add-ons и хуки.

Если вы хотите полностью кастомное решение — можно написать свой шорткод с AJAX и PHP обработчиком.

Создание кастомного калькулятора с расчетом по формуле

Рассмотрим пример создания калькулятора, который вычисляет итоговую стоимость услуги с учетом нескольких параметров и формулы. Формула будет выглядеть так:

итог = (количество * цена) + (доп.услуга ? доп.стоимость : 0)

Для динамического обновления результата используем AJAX и JavaScript.

Шаг 1. Регистрация шорткода

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

function wpcalc_dynamic_calculator_shortcode() {
    ob_start();
    ?>
    <form id="wpcalc-calculator" action="#" method="post">
        <label>Количество: <input type="number" id="wpcalc-quantity" name="quantity" value="1" min="1"></label><br>
        <label>Цена за единицу: <input type="number" id="wpcalc-price" name="price" value="100" min="0"></label><br>
        <label><input type="checkbox" id="wpcalc-extra" name="extra"> Дополнительная услуга (+500)</label><br>
        <p>Итог: <span id="wpcalc-result">100</span> руб.</p>
    </form>
    <script>
    (function($){
        function wpcalc_update() {
            var quantity = parseInt($('#wpcalc-quantity').val()) || 0;
            var price = parseFloat($('#wpcalc-price').val()) || 0;
            var extra = $('#wpcalc-extra').is(':checked') ? 500 : 0;
            var result = (quantity * price) + extra;
            $('#wpcalc-result').text(result.toFixed(2));
        }
        $('#wpcalc-calculator input').on('input change', wpcalc_update);
        $(document).ready(wpcalc_update);
    })(jQuery);
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpcalc_dynamic_calculator', 'wpcalc_dynamic_calculator_shortcode');

Этот шорткод выводит форму с тремя элементами: количество, цена и чекбокс дополнительной услуги. Итог рассчитывается на стороне клиента с помощью JavaScript и обновляется мгновенно.

Шаг 2. Добавление поддержки сложных формул через настройки

Если нужно, чтобы формулы задавались администратором через настройки, можно создать простой интерфейс в админке и сохранять формулу в опциях. Далее в шорткоде считать ее динамически через eval() (с осторожностью) или использовать библиотеку для вычисления выражений, например mathjs.

Пример вычисления формулы с mathjs на стороне клиента:

var math = mathjs();
var scope = {quantity: 2, price: 100, extra: 500};
var formula = '(quantity * price) + (extra)';
var result = math.evaluate(formula, scope);

Это позволяет менять формулу без правки кода.

Использование AJAX и PHP для вычислений на сервере

Иногда вычисления нужно проводить на сервере — например, если формулы сложные, или требуется учитывать данные из базы. Для этого добавим AJAX-обработчик.

Шаг 1. Добавляем AJAX хуки в functions.php

add_action('wp_ajax_wpcalc_calculate', 'wpcalc_handle_calculate');
add_action('wp_ajax_nopriv_wpcalc_calculate', 'wpcalc_handle_calculate');

function wpcalc_handle_calculate() {
    $quantity = isset($_POST['quantity']) ? intval($_POST['quantity']) : 0;
    $price = isset($_POST['price']) ? floatval($_POST['price']) : 0;
    $extra = isset($_POST['extra']) && $_POST['extra'] === 'true' ? 500 : 0;

    $result = ($quantity * $price) + $extra;

    wp_send_json_success(['result' => number_format($result, 2)]);
}

Шаг 2. Изменяем JavaScript для вызова AJAX

<script>
(function($){
    function wpcalc_update_ajax() {
        var data = {
            action: 'wpcalc_calculate',
            quantity: $('#wpcalc-quantity').val(),
            price: $('#wpcalc-price').val(),
            extra: $('#wpcalc-extra').is(':checked')
        };
        $.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function(response) {
            if(response.success) {
                $('#wpcalc-result').text(response.data.result);
            }
        });
    }
    $('#wpcalc-calculator input').on('input change', wpcalc_update_ajax);
    $(document).ready(wpcalc_update_ajax);
})(jQuery);
</script>

Такой подход безопаснее и позволяет учитывать серверные данные, например, динамические цены из базы.

Рекомендации по безопасности и производительности

При создании калькуляторов с вычислениями важно учитывать несколько моментов:

• Не используйте eval() с пользовательским вводом без строгой фильтрации — это уязвимость.
• Если формулы сложные, лучше вычислять их на сервере, чтобы защитить логику.
• Кешируйте результаты при частых запросах с одинаковыми параметрами, используя Transients API или объектный кеш WordPress.
• Оптимизируйте AJAX-запросы, чтобы не перегружать сервер при быстрой смене значений — применяйте debounce в JS.

Подводим итоги

Динамический калькулятор с расчетом по формуле в WordPress — это мощный инструмент, который можно реализовать разными способами: от простого JavaScript на клиенте до сложных вычислений на сервере с использованием AJAX. В статье приведены примеры кода шорткода, AJAX-обработчика и советы по безопасности.

Для расширения функционала можно использовать плагины типа Calculated Fields Form или WPRemark c поддержкой расчетов и визуального редактора форм.