Как создать калькулятор расчёта стоимости хостинга в WordPress

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

Почему калькулятор стоимости хостинга важен и как его реализовать

Калькулятор стоимости — отличный инструмент для повышения конверсии на сайте. Он позволяет пользователю самостоятельно подобрать необходимые опции и сразу увидеть итоговую цену. В случае с хостингом это могут быть такие параметры, как:

• Тип хостинга (shared, VPS, dedicated);
• Объём дискового пространства;
• Трафик;
• Дополнительные услуги (резервное копирование, SSL, поддержка и т.д.).

Реализовать калькулятор можно с помощью готовых плагинов, но для гибкости и оптимизации лучше сделать кастомное решение. Мы создадим шорткод [wpcalc_hosting_calculator], который можно вставить в любую страницу или запись.

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

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

function wpcalc_hosting_calculator_shortcode() {
    ob_start();
    ?>
    <form id="wpcalc-hosting-form">
        <label>Тип хостинга:
            <select name="hosting_type" required>
                <option value="shared">Shared Hosting</option>
                <option value="vps">VPS Hosting</option>
                <option value="dedicated">Dedicated Server</option>
            </select>
        </label><br><br>
        <label>Объём диска (ГБ):
            <input type="number" name="disk_space" min="10" max="1000" value="50" required>
        </label><br><br>
        <label>Месячный трафик (ГБ):
            <input type="number" name="traffic" min="10" max="5000" value="100" required>
        </label><br><br>
        <label><input type="checkbox" name="backup"> Резервное копирование</label><br>
        <label><input type="checkbox" name="ssl"> SSL сертификат</label><br>
        <label><input type="checkbox" name="support"> Приоритетная поддержка</label><br><br>
        <button type="submit">Рассчитать стоимость</button>
    </form>
    <div id="wpcalc-result" style="margin-top:20px;"></div>
    <?php
    return ob_get_clean();
}
add_shortcode('wpcalc_hosting_calculator', 'wpcalc_hosting_calculator_shortcode');

Этот код создаёт простую форму с необходимыми полями и кнопкой отправки. Результат будет выводиться в блок div#wpcalc-result.

Обработка данных формы и вычисление стоимости с помощью AJAX

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

function wpcalc_hosting_calc_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('wpcalc-hosting-calc', get_template_directory_uri() . '/js/wpcalc-hosting-calc.js', ['jquery'], null, true);
    wp_localize_script('wpcalc-hosting-calc', 'wpcalc_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'wpcalc_hosting_calc_enqueue_scripts');

function wpcalc_hosting_calc_ajax_handler() {
    $type = sanitize_text_field($_POST['hosting_type']);
    $disk = max(10, intval($_POST['disk_space']));
    $traffic = max(10, intval($_POST['traffic']));
    $backup = isset($_POST['backup']) && $_POST['backup'] === 'true';
    $ssl = isset($_POST['ssl']) && $_POST['ssl'] === 'true';
    $support = isset($_POST['support']) && $_POST['support'] === 'true';

    // Базовые цены (в рублях)
    $base_prices = [
        'shared' => 200,
        'vps' => 800,
        'dedicated' => 2500
    ];

    $price = isset($base_prices[$type]) ? $base_prices[$type] : 0;

    // Цена за гигабайт диска (руб.)
    $price += $disk * 5;
    // Цена за гигабайт трафика (руб.)
    $price += $traffic * 2;

    // Дополнительные услуги
    if ($backup) $price += 150;
    if ($ssl) $price += 100;
    if ($support) $price += 300;

    wpcalc_hosting_calc_ajax_response($price);
}
add_action('wp_ajax_wpcalc_hosting_calc', 'wpcalc_hosting_calc_ajax_handler');
add_action('wp_ajax_nopriv_wpcalc_hosting_calc', 'wpcalc_hosting_calc_ajax_handler');

function wpcalc_hosting_calc_ajax_response($price) {
    echo 'Итоговая стоимость: <strong>' . number_format($price, 0, '', ' ') . ' ₽</strong> в месяц';
    wp_die();
}

Этот код добавляет обработчик AJAX запроса, который получает данные из формы, рассчитывает стоимость и возвращает результат в виде строки.

JavaScript для отправки формы и отображения результата

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

jQuery(document).ready(function ($) {
    $('#wpcalc-hosting-form').on('submit', function (e) {
        e.preventDefault();

        var data = {
            action: 'wpcalc_hosting_calc',
            hosting_type: $(this).find('select[name="hosting_type"]').val(),
            disk_space: $(this).find('input[name="disk_space"]').val(),
            traffic: $(this).find('input[name="traffic"]').val(),
            backup: $(this).find('input[name="backup"]').is(':checked').toString(),
            ssl: $(this).find('input[name="ssl"]').is(':checked').toString(),
            support: $(this).find('input[name="support"]').is(':checked').toString(),
        };

        $('#wpcalc-result').html('Считаем...');

        $.post(wpcalc_ajax_object.ajax_url, data, function (response) {
            $('#wpcalc-result').html(response);
        });
    });
});

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

Как использовать и расширять калькулятор

Чтобы вывести калькулятор на странице, просто вставьте в редактор блок шорткод с текстом [wpcalc_hosting_calculator]. При необходимости вы можете добавить новые параметры, например, выбор срока оплаты с соответствующей скидкой, или интегрировать калькулятор с плагинами для сбора лидов, например, WPGPT для чат-бота поддержки.

Также для оптимизации и кэширования результатов можно использовать Clearfy Pro — он поможет убрать лишние запросы и ускорить загрузку страницы с калькулятором.