Создание адаптивного калькулятора на WordPress — задача, которую можно решить разными способами, но использование современных JavaScript-фреймворков, таких как Vue.js, позволяет сделать интерфейс более динамичным и отзывчивым. В этой статье мы рассмотрим, как интегрировать Vue.js-калькулятор в WordPress, используя AJAX для взаимодействия с сервером и обработки данных без перезагрузки страницы.
Почему Vue.js для калькулятора в WordPress? Ключевые преимущества
Vue.js — легковесный и простой в освоении JavaScript-фреймворк, который отлично подходит для создания интерактивных компонентов на сайте. Его преимущества для калькулятора:
- Реактивность данных: изменения в форме мгновенно отражаются в интерфейсе.
- Легкая интеграция с WordPress благодаря REST API и AJAX.
- Минимальная нагрузка на страницу по сравнению с большими фреймворками.
- Возможность масштабирования и расширения функционала калькулятора.
Используя Vue.js, мы можем сделать так, чтобы калькулятор работал быстро и плавно, что критично для удобства пользователей.
Подготовка WordPress для интеграции Vue.js: подключение скриптов и создание шорткода
Первым шагом создадим шорткод, который будет выводить калькулятор на любую страницу или пост. Для этого добавим в functions.php темы или в отдельный плагин следующий код:
function wpcalc_enqueue_vue_scripts() {
wp_enqueue_script('vuejs', 'https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js', array(), '2.6.14', true);
wp_enqueue_script('wpcalc-calculator', get_template_directory_uri() . '/js/wpcalc-calculator.js', array('vuejs', 'jquery'), '1.0', true);
wp_localize_script('wpcalc-calculator', 'wpcalc_ajax', array(
'ajax_url' => admin_url('admin-ajax.php')
));
}
add_action('wp_enqueue_scripts', 'wpcalc_enqueue_vue_scripts');
function wpcalc_calculator_shortcode() {
return '<div id="wpcalc-app">
<h3>Калькулятор стоимости услуги</h3>
<form @submit.prevent="calculate">
<label>Количество часов: <input type="number" v-model.number="hours" min="0"></label><br>
<label>Сложность задачи:
<select v-model="complexity">
<option value="1">Простая</option>
<option value="1.5">Средняя</option>
<option value="2">Сложная</option>
</select>
</label><br>
<button type="submit">Рассчитать</button>
</form>
<p v-if="result !== null">Итоговая стоимость: <strong>{{ result }} руб.</strong></p>
</div>';
}
add_shortcode('wpcalc_calculator', 'wpcalc_calculator_shortcode');В этом коде подключаем Vue.js с CDN, добавляем наш собственный скрипт wpcalc-calculator.js и создаём шорткод [wpcalc_calculator], который выводит форму калькулятора.
Создание логики калькулятора на Vue.js и AJAX обработка данных
Теперь напишем логику Vue.js в файле wpcalc-calculator.js, который мы подключили выше. Этот скрипт будет отправлять данные на сервер для расчёта стоимости и получать ответ без перезагрузки страницы.
jQuery(document).ready(function($) {
new Vue({
el: '#wpcalc-app',
data: {
hours: 0,
complexity: 1,
result: null
},
methods: {
wpcalc_calculate: function() {
var self = this;
$.ajax({
url: wpcalc_ajax.ajax_url,
method: 'POST',
data: {
action: 'wpcalc_calculate_price',
hours: self.hours,
complexity: self.complexity
},
success: function(response) {
if(response.success) {
self.result = response.data.price;
} else {
alert('Ошибка расчёта: ' + response.data.message);
}
},
error: function() {
alert('Ошибка AJAX запроса');
}
});
},
calculate: function() {
if(this.hours <= 0) {
alert('Введите корректное количество часов');
return;
}
this.wpcalc_calculate();
}
}
});
});В этом скрипте мы определяем метод calculate, который вызывается при отправке формы, и отправляем AJAX-запрос на сервер для получения результата.
Обработка AJAX-запроса в WordPress: безопасность и расчет стоимости
Для обработки запроса добавим в functions.php следующий код. Он проверит полученные данные и вернёт рассчёт стоимости.
function wpcalc_handle_ajax_calculate() {
// Проверяем параметры
$hours = isset($_POST['hours']) ? floatval($_POST['hours']) : 0;
$complexity = isset($_POST['complexity']) ? floatval($_POST['complexity']) : 1;
if($hours <= 0) {
wp_send_json_error(array('message' => 'Некорректное количество часов'));
}
if($complexity < 1) {
$complexity = 1;
}
// Базовая ставка за час
$base_rate = 1500; // рублей
$price = $hours * $base_rate * $complexity;
wp_send_json_success(array('price' => round($price, 2)));
}
add_action('wp_ajax_wpcalc_calculate_price', 'wpcalc_handle_ajax_calculate');
add_action('wp_ajax_nopriv_wpcalc_calculate_price', 'wpcalc_handle_ajax_calculate');Обратите внимание, что мы используем обработчики wp_ajax_ и wp_ajax_nopriv_ для авторизованных и гостей соответственно. Это гарантирует работу калькулятора для всех посетителей сайта.
Советы по улучшению и расширению калькулятора
После базовой реализации можно:
- Добавить больше параметров, например, выбор типа услуги, дополнительные опции с чекбоксами.
- Использовать локализацию для вывода текста на разные языки.
- Интегрировать с плагинами WPShop, например, для автоматического создания заказа с рассчитанной стоимостью — это удобно для сайтов с продажами услуг.
- Добавить сохранение и историю расчётов с помощью пользовательских метаданных или таблиц в базе данных.
Пример расширения: добавим чекбокс "Срочность" с повышающим коэффициентом.
<label>
Срочность: <input type="checkbox" v-model="urgent">
</label>И в data Vue добавить urgent: false, а в метод расчёта учитывать коэффициент:
var urgencyCoeff = this.urgent ? 1.3 : 1;
var price = this.hours * base_rate * this.complexity * urgencyCoeff;Заключение
Использование Vue.js совместно с AJAX в WordPress позволяет создавать удобные, интерактивные калькуляторы с минимальными затратами времени и ресурсов. Такой подход улучшает пользовательский опыт и даёт широкие возможности для кастомизации. Если хотите использовать готовые решения, обратите внимание на плагины в каталоге WPSHOP.RU, где есть инструменты для создания калькуляторов и автоматизации расчётов.