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

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

Почему динамический калькулятор важен для сайта на WordPress

Стандартные формы в WordPress обычно требуют отправки данных на сервер и перезагрузки страницы, чтобы показать результат. Это неудобно и замедляет взаимодействие пользователя с сайтом. Использование динамического калькулятора с AJAX и JavaScript позволяет мгновенно обновлять результат, улучшая UX и увеличивая конверсию.

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

Создаем shortcode для калькулятора с формой ввода

Для начала зарегистрируем шорткод [wpcalc_dynamic_calculator], который выведет HTML-форму с полями и кнопкой. Форма будет отправлять данные на сервер для обработки с помощью AJAX.

function wpcalc_dynamic_calculator_shortcode() {
    ob_start();
    ?>
    <form id="wpcalc-dynamic-form">
        <label for="quantity">Количество:</label>
        <input type="number" id="quantity" name="quantity" min="1" value="1" required />

        <label for="price">Цена за единицу (руб):</label>
        <input type="number" id="price" name="price" min="0" step="0.01" value="1000" required />

        <label for="discount">Скидка (%):</label>
        <input type="number" id="discount" name="discount" min="0" max="100" value="0" />

        <div>
            Итог: <span id="wpcalc-result">0</span> руб.
        </div>
    </form>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('wpcalc-dynamic-form');
        const resultSpan = document.getElementById('wpcalc-result');

        function calculate() {
            const quantity = parseFloat(form.quantity.value) || 0;
            const price = parseFloat(form.price.value) || 0;
            const discount = parseFloat(form.discount.value) || 0;

            const data = new FormData();
            data.append('action', 'wpcalc_dynamic_calculate');
            data.append('quantity', quantity);
            data.append('price', price);
            data.append('discount', discount);

            fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
                method: 'POST',
                credentials: 'same-origin',
                body: data
            })
            .then(response => response.json())
            .then(json => {
                if(json.success) {
                    resultSpan.textContent = json.data.total.toFixed(2);
                } else {
                    resultSpan.textContent = 'Ошибка';
                }
            })
            .catch(() => {
                resultSpan.textContent = 'Ошибка';
            });
        }

        form.quantity.addEventListener('input', calculate);
        form.price.addEventListener('input', calculate);
        form.discount.addEventListener('input', calculate);

        calculate(); // расчет при загрузке
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpcalc_dynamic_calculator', 'wpcalc_dynamic_calculator_shortcode');

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

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

function wpcalc_handle_dynamic_calculate() {
    $quantity = isset($_POST['quantity']) ? floatval($_POST['quantity']) : 0;
    $price = isset($_POST['price']) ? floatval($_POST['price']) : 0;
    $discount = isset($_POST['discount']) ? floatval($_POST['discount']) : 0;

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

    $total = $quantity * $price;
    if($discount > 0 && $discount <= 100) {
        $total = $total * (1 - $discount / 100);
    }

    wp_send_json_success(['total' => $total]);
}
add_action('wp_ajax_wpcalc_dynamic_calculate', 'wpcalc_handle_dynamic_calculate');
add_action('wp_ajax_nopriv_wpcalc_dynamic_calculate', 'wpcalc_handle_dynamic_calculate');

Расширение калькулятора: добавляем выбор типа услуги

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

Например, добавим в форму поле:

<label for="service_type">Тип услуги:</label>
<select id="service_type" name="service_type">
    <option value="standard">Стандарт</option>
    <option value="premium">Премиум (+20%)</option>
    <option value="vip">VIP (+50%)</option>
</select>

В JavaScript добавим отправку этого параметра:

data.append('service_type', form.service_type.value);

И в обработчике PHP сделаем расчет с учетом типа услуги:

$service_type = isset($_POST['service_type']) ? sanitize_text_field($_POST['service_type']) : 'standard';

switch($service_type) {
    case 'premium':
        $price *= 1.2;
        break;
    case 'vip':
        $price *= 1.5;
        break;
    default:
        break;
}

Такой подход позволит расширять калькулятор под любые нужды.

Использование плагина Clearfy Pro для оптимизации калькуляторов

Если на сайте уже используется плагин Clearfy Pro, его возможности помогут увеличить скорость загрузки и эффективность AJAX запросов, а также минимизировать конфликты скриптов. Особенно полезны функции оптимизации JS и кеширования.

Итоги и рекомендации

Мы создали простой, но мощный динамический калькулятор с ответом в реальном времени, который можно кастомизировать под любые задачи. Такой калькулятор улучшит взаимодействие с пользователем и повысит качество сервиса.

Для дальнейшего развития рекомендую изучить интеграцию с Vue.js или React для еще более интерактивных интерфейсов, а также использовать CRON для периодического обновления тарифов, если это необходимо.