Динамические калькуляторы с возможностью выбора разных услуг востребованы на сайтах, где нужно быстро оценить стоимость разработки, консультаций, доставки и других сервисов. В этой статье рассмотрим, как создать такой калькулятор на базе WordPress с помощью кода и полезных плагинов.
Основы создания калькулятора с динамическим выбором услуг
Главная задача — предоставить пользователю список услуг с возможностью выбора и автоматически пересчитывать итоговую стоимость. Для этого нам потребуется:
- Форма с чекбоксами или выпадающими списками для выбора услуг;
- Скрипт, который будет обрабатывать выбор и считать итог;
- Возможность добавлять услуги с разной стоимостью и опциями;
- Обновление результата без перезагрузки страницы для удобства.
В WordPress можно реализовать это несколькими способами: с помощью кастомного кода или плагинов, которые облегчают задачи динамической формы и Ajax.
Выбор инструментов и плагинов
Для начала советую обратить внимание на следующие плагины, которые помогут ускорить разработку:
- WPRemark — мощный плагин для создания форм и калькуляторов с кастомными расчетами;
- My Popup — если нужно показывать калькулятор в всплывающем окне;
- Clearfy Pro — для оптимизации загрузки и кэширования, что ускорит работу калькулятора.
Если же хотите полностью кастомное решение, то ниже пример, как сделать простой динамический калькулятор с использованием AJAX и PHP.
Пример кода: динамический калькулятор услуг с AJAX
Создадим шорткод для вывода формы и обработчик AJAX запроса.
1. Добавляем шорткод в файл functions.php вашей темы или в отдельный плагин
function wpcalcru_service_calculator_shortcode() {
ob_start();
?>
<form id="wpcalcru-service-calc-form">
<h3>Выберите услуги:</h3>
<label><input type="checkbox" name="services[]" value="10"> Консультация — 10 000 ₽</label><br>
<label><input type="checkbox" name="services[]" value="25"> Разработка сайта — 25 000 ₽</label><br>
<label><input type="checkbox" name="services[]" value="15"> SEO аудит — 15 000 ₽</label><br>
<label><input type="checkbox" name="services[]" value="5"> Техническая поддержка — 5 000 ₽</label><br>
<p>Итоговая стоимость: <strong id="wpcalcru-total">0 ₽</strong></p>
</form>
<script>
(function($){
$('#wpcalcru-service-calc-form input[type="checkbox"]').on('change', function(){
var selected = [];
$('#wpcalcru-service-calc-form input[type="checkbox"]:checked').each(function(){
selected.push($(this).val());
});
$.ajax({
url: wpcalcru_ajax_obj.ajax_url,
type: 'POST',
data: {
action: 'wpcalcru_calculate_services',
services: selected
},
success: function(response) {
if(response.success) {
$('#wpcalcru-total').text(response.data.total + ' ₽');
}
}
});
});
})(jQuery);
</script>
<?php
return ob_get_clean();
}
add_shortcode('wpcalcru_service_calculator', 'wpcalcru_service_calculator_shortcode');2. Реализуем обработчик AJAX в functions.php
function wpcalcru_ajax_calculate_services() {
if(!isset($_POST['services']) || !is_array($_POST['services'])) {
wp_send_json_error(['message' => 'Нет данных услуг']);
wp_die();
}
$services = array_map('intval', $_POST['services']);
$total = array_sum($services);
wp_send_json_success(['total' => $total]);
wp_die();
}
add_action('wp_ajax_wpcalcru_calculate_services', 'wpcalcru_ajax_calculate_services');
add_action('wp_ajax_nopriv_wpcalcru_calculate_services', 'wpcalcru_ajax_calculate_services');3. Подключаем скрипт с локализацией ajax_url
function wpcalcru_enqueue_scripts() {
wp_enqueue_script('jquery');
wp_localize_script('jquery', 'wpcalcru_ajax_obj', [
'ajax_url' => admin_url('admin-ajax.php')
]);
}
add_action('wp_enqueue_scripts', 'wpcalcru_enqueue_scripts');Теперь при выборе услуг в чекбоксах будет автоматически рассчитываться сумма и выводиться без перезагрузки страницы.
Расширение функционала: добавление разных тарифов и зависимостей
Чтобы усложнить калькулятор, можно добавить:
- Выпадающие списки с вариантами тарифов для каждой услуги;
- Зависимости — например, при выборе SEO аудита включать консультацию автоматически;
- Вычисления с учетом скидок, налогов и других условий;
- Возможность сохранить расчет и отправить заявку.
Для таких задач полезно использовать плагин WPRemark, который позволяет строить сложные динамические формы с условной логикой без глубокого программирования.
Пример условной логики с WPRemark
В настройках формы можно задать правило: если выбран пункт «SEO аудит», то автоматически отметить «Консультация» и добавить ее стоимость к итоговой.
Это значительно облегчает создание масштабных калькуляторов для комплексных услуг.
Оптимизация и кеширование результатов
При большом количестве посетителей и сложных расчетах стоит позаботиться об оптимизации. В WordPress для кеширования можно использовать Transients API или плагины оптимизации, например, Clearfy Pro.
Кеширование позволяет сохранять результаты расчетов для одинаковых наборов услуг, снижая нагрузку на сервер и ускоряя отклик.
Пример кеширования с Transients API
function wpcalcru_ajax_calculate_services() {
if(!isset($_POST['services']) || !is_array($_POST['services'])) {
wp_send_json_error(['message' => 'Нет данных услуг']);
wp_die();
}
$services = array_map('intval', $_POST['services']);
sort($services);
$cache_key = 'wpcalcru_calc_' . md5(implode('_', $services));
$total = get_transient($cache_key);
if($total === false) {
$total = array_sum($services);
set_transient($cache_key, $total, 3600); // кеш на 1 час
}
wp_send_json_success(['total' => $total]);
wp_die();
}Заключение по созданию динамического калькулятора услуг
Создание динамического калькулятора с выбором услуг в WordPress — задача, которую можно решить как с помощью готовых плагинов, так и через кастомный код. Главное — обеспечить удобство выбора для пользователя и быстрый расчет стоимости.
Используйте AJAX для интерактивности, Transients API для кеширования и продвинутые плагины вроде WPRemark для сложной логики. Это позволит создать мощный и гибкий инструмент расчета прямо на вашем сайте.