Как создать калькулятор с расчётом по дате в WordPress

В современном WordPress-проекте часто требуется реализовать калькулятор, учитывающий даты, например, для расчёта стоимости аренды, бронирования или срока выполнения услуги. В этой статье мы подробно рассмотрим, как создать такой калькулятор с динамическим расчётом на основе выбранных пользователем дат.

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

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

Основные задачи такого калькулятора:

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

Для реализации нам понадобится использовать HTML-форму, JavaScript с AJAX и PHP в WordPress.

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

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

<form id="wpcalc-date-form">
  <label for="start_date">Дата начала:</label>
  <input type="date" id="start_date" name="start_date" required>

  <label for="end_date">Дата окончания:</label>
  <input type="date" id="end_date" name="end_date" required>

  <button type="submit">Рассчитать</button>
</form>

<div id="wpcalc-result"></div>

Эту форму можно вставить в любой шаблон или использовать шорткод для вывода.

JavaScript и AJAX: отправка данных и получение результата без перезагрузки

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

document.getElementById('wpcalc-date-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const startDate = document.getElementById('start_date').value;
  const endDate = document.getElementById('end_date').value;

  if (new Date(startDate) > new Date(endDate)) {
    alert('Дата начала не может быть позже даты окончания.');
    return;
  }

  const data = new FormData();
  data.append('action', 'wpcalc_date_calc');
  data.append('start_date', startDate);
  data.append('end_date', endDate);

  fetch(wpcalc_ajax_object.ajax_url, {
    method: 'POST',
    credentials: 'same-origin',
    body: data
  })
  .then(response => response.json())
  .then(result => {
    if(result.success) {
      document.getElementById('wpcalc-result').innerHTML = '<strong>Результат:</strong> ' + result.data.message;
    } else {
      document.getElementById('wpcalc-result').innerHTML = '<strong>Ошибка:</strong> ' + result.data;
    }
  })
  .catch(error => {
    document.getElementById('wpcalc-result').innerHTML = '<strong>Ошибка сети</strong>';
  });
});

Обратите внимание, что в примере используется переменная wpcalc_ajax_object.ajax_url. Чтобы она была доступна, нужно зарегистрировать скрипт и локализовать его в WordPress, что рассмотрим далее.

PHP: обработчик AJAX и вычисление разницы в датах

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

add_action('wp_ajax_wpcalc_date_calc', 'wpcalc_date_calc_handler');
add_action('wp_ajax_nopriv_wpcalc_date_calc', 'wpcalc_date_calc_handler');

function wpcalc_date_calc_handler() {
  // Проверяем и получаем даты из POST
  $start_date = isset($_POST['start_date']) ? sanitize_text_field($_POST['start_date']) : '';
  $end_date = isset($_POST['end_date']) ? sanitize_text_field($_POST['end_date']) : '';

  if (!$start_date || !$end_date) {
    wp_send_json_error('Обе даты обязательны для расчёта.');
  }

  $start = DateTime::createFromFormat('Y-m-d', $start_date);
  $end = DateTime::createFromFormat('Y-m-d', $end_date);

  if (!$start || !$end) {
    wp_send_json_error('Неверный формат даты. Используйте ГГГГ-ММ-ДД.');
  }

  if ($start > $end) {
    wp_send_json_error('Дата начала не может быть позже даты окончания.');
  }

  $interval = $start->diff($end);
  $days = $interval->days + 1; // Включая оба дня

  // Пример расчёта: стоимость 100 рублей в день
  $price_per_day = 100;
  $total_price = $days * $price_per_day;

  $message = sprintf('Период с %s по %s составляет %d дней. Итоговая стоимость: %d руб.', $start_date, $end_date, $days, $total_price);

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

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

Регистрация и локализация скриптов в WordPress

Чтобы подключить JavaScript и передать ajax_url, используйте следующий код в functions.php или в вашем плагине:

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

Замените путь к скрипту на актуальный в вашем проекте.

Расширение функционала: разные тарифы и условия

В реальных задачах тариф может зависеть от дня недели, сезона или длительности аренды. Для примера добавим условие, что в выходные цена в 1.5 раза выше.

function wpcalc_calculate_price_with_weekends($start, $end) {
  $price_per_day = 100;
  $price_weekend = 150; // 1.5 * 100
  $period = new DatePeriod($start, new DateInterval('P1D'), $end->modify('+1 day'));
  $total = 0;

  foreach ($period as $date) {
    $day_of_week = $date->format('N'); // 6 - суббота, 7 - воскресенье
    if ($day_of_week >= 6) {
      $total += $price_weekend;
    } else {
      $total += $price_per_day;
    }
  }
  return $total;
}

// В обработчике заменяем расчет цены:
$total_price = wpcalc_calculate_price_with_weekends($start, $end);

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

Пример использования плагина WPRemark для создания калькулятора с датами

Если вы предпочитаете готовые решения, обратите внимание на плагин WPRemark. Он позволяет создавать калькуляторы с разными типами полей, включая выбор даты и условные расчёты, без программирования.

Плагин поддерживает динамические формулы и AJAX, что упрощает задачи, описанные выше. Также он имеет визуальный конструктор форм.

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

Калькулятор с расчётом по дате — востребованный инструмент для многих сайтов на WordPress. Создание собственного решения с AJAX и PHP даёт максимальную гибкость и контроль.

Резюме по созданию:

• Создайте HTML-форму с полями даты.
• Реализуйте AJAX-отправку данных и динамическое обновление результата.
• Обработайте данные на сервере, вычислите разницу и примените тарифы.
• Подключите скрипты и локализуйте ajax_url.
• Расширяйте логику вычислений по необходимости.

Также рассмотрите использование плагинов, например, WPRemark, для ускорения разработки.