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

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

Выбор плагина для создания калькулятора подписки

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

• My Popup — позволяет создавать интерактивные формы с расчетами и динамическими полями.
• ABC Pagination — помогает разбивать длинные формы или калькуляторы на шаги.
• Gravity Forms с дополнениями — популярный коммерческий плагин с широкими возможностями.

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

Структура калькулятора подписки: тарифы и опции

Основная задача — дать пользователю выбрать тарифный план (например, «Базовый», «Премиум», «Профессиональный») и дополнительные опции (например, количество пользователей, дополнительные модули). Каждый тариф имеет свою базовую цену, дополнительные опции — добавляют стоимость.

Для удобства создадим массив с тарифами и ценами внутри PHP, а на фронтенде — форму с селектами и чекбоксами.

Пример данных тарифов в PHP

function wpcalc_get_subscription_plans() {
    return [
        'basic' => [
            'name' => 'Базовый',
            'price' => 500,
        ],
        'premium' => [
            'name' => 'Премиум',
            'price' => 1200,
        ],
        'pro' => [
            'name' => 'Профессиональный',
            'price' => 2500,
        ],
    ];
}

function wpcalc_get_extra_options() {
    return [
        'users' => [
            'label' => 'Дополнительные пользователи',
            'price_per_unit' => 200,
        ],
        'support' => [
            'label' => 'Приоритетная поддержка',
            'price' => 300,
        ],
    ];
}

Здесь у нас три тарифа и две опции. Для опции «Дополнительные пользователи» цена считается за единицу, у поддержки фиксированная.

Создание формы калькулятора на фронтенде

В HTML форма будет содержать селект для тарифов, числовое поле для дополнительного количества пользователей и чекбокс для поддержки.

<form id="wpcalc-subscription-form">
    <label for="wpcalc-plan">Выберите тариф:</label>
    <select id="wpcalc-plan" name="plan">
        <option value="basic">Базовый</option>
        <option value="premium">Премиум</option>
        <option value="pro">Профессиональный</option>
    </select>

    <label for="wpcalc-users">Дополнительные пользователи:</label>
    <input type="number" id="wpcalc-users" name="users" min="0" value="0" />

    <label><input type="checkbox" name="support" id="wpcalc-support" value="1" /> Приоритетная поддержка</label>

    <div id="wpcalc-result">Итоговая стоимость: 0 руб.</div>
</form>

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

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

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

add_action('wp_enqueue_scripts', 'wpcalc_enqueue_scripts');
function wpcalc_enqueue_scripts() {
    wp_enqueue_script('wpcalc-script', get_template_directory_uri() . '/js/wpcalc.js', ['jquery'], null, true);
    wp_localize_script('wpcalc-script', 'wpcalc_ajax', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpcalc_nonce'),
    ]);
}

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

function wpcalc_calculate_callback() {
    check_ajax_referer('wpcalc_nonce', 'nonce');

    $plans = wpcalc_get_subscription_plans();
    $extras = wpcalc_get_extra_options();

    $plan_key = sanitize_text_field($_POST['plan'] ?? 'basic');
    $users = max(0, intval($_POST['users'] ?? 0));
    $support = isset($_POST['support']) && $_POST['support'] == '1';

    if (!isset($plans[$plan_key])) {
        wp_send_json_error('Некорректный тариф');
    }

    $price = $plans[$plan_key]['price'];
    $price += $users * $extras['users']['price_per_unit'];
    if ($support) {
        $price += $extras['support']['price'];
    }

    wp_send_json_success(['price' => $price]);
}

Этот обработчик принимает POST данные, вычисляет итоговую стоимость и возвращает её в ответе.

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

Создайте файл wpcalc.js в папке js темы с таким содержимым:

jQuery(document).ready(function($) {
    function wpcalc_update() {
        var data = {
            action: 'wpcalc_calculate',
            nonce: wpcalc_ajax.nonce,
            plan: $('#wpcalc-plan').val(),
            users: parseInt($('#wpcalc-users').val()) || 0,
            support: $('#wpcalc-support').is(':checked') ? 1 : 0
        };

        $.post(wpcalc_ajax.ajax_url, data, function(response) {
            if (response.success) {
                $('#wpcalc-result').text('Итоговая стоимость: ' + response.data.price + ' руб.');
            } else {
                $('#wpcalc-result').text('Ошибка: ' + response.data);
            }
        });
    }

    $('#wpcalc-plan, #wpcalc-users, #wpcalc-support').on('change input', wpcalc_update);

    wpcalc_update();
});

Этот код слушает изменения полей и отправляет запрос на сервер для пересчёта цены.

Дополнительные возможности и улучшения

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

• Валидацию пользовательского ввода на клиенте и сервере.
• Скидки при выборе определённых комбинаций тарифов и опций.
• Интеграцию с платежными системами и подписками WooCommerce Subscriptions.
• Поддержку многошаговых форм с помощью ABC Pagination.
• Кеширование результатов с Transients API для оптимизации нагрузки.

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