Как создать калькулятор сложных расчетов с учетом зависимостей в WordPress

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

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

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

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

Для реализации таких зависимостей необходимо:

• Выстроить логику расчётов с учётом всех условий и влияний.
• Реализовать динамическое обновление результата при изменении любых параметров.
• При необходимости использовать AJAX для серверных вычислений.

Структура сложного калькулятора с зависимостями

Рассмотрим пример структуры калькулятора для расчёта стоимости комплексной услуги с тарифами, опциями и скидками.

Параметры калькулятора

• Выбор тарифа (например, базовый, стандарт, премиум)
• Количество единиц услуги
• Дополнительные опции (несколько чекбоксов)
• Скидка, зависящая от тарифа и количества

Взаимодействия и зависимости

• Цена за единицу зависит от выбранного тарифа
• Общая стоимость рассчитывается как цена за единицу * количество
• Скидка применяется, если количество превышает порог и зависит от тарифа
• Опции добавляют фиксированную сумму либо процент к итоговой стоимости

Реализация калькулятора: пример кода

Создадим шорткод [wpcalc_complex_calculator], который выводит форму и обрабатывает расчёты.

Шаг 1. Форма калькулятора

<form id="wpcalc-complex-form">
  <label>Выберите тариф:</label>
  <select name="tariff" id="wpcalc-tariff">
    <option value="basic">Базовый</option>
    <option value="standard">Стандарт</option>
    <option value="premium">Премиум</option>
  </select>

  <label>Количество:</label>
  <input type="number" name="quantity" id="wpcalc-quantity" value="1" min="1" />

  <fieldset>
    <legend>Дополнительные опции</legend>
    <label><input type="checkbox" name="option1" value="10" /> Опция 1 (+10 руб)</label><br />
    <label><input type="checkbox" name="option2" value="5" /> Опция 2 (+5% к итоговой)</label>
  </fieldset>

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

Шаг 2. JavaScript для динамических расчетов

Для удобства расчётов сделаем вычисления на стороне клиента. При этом скидка и цены задаем в JS, но при необходимости можно перенести логику на сервер.

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('wpcalc-complex-form');
  const tariffSelect = document.getElementById('wpcalc-tariff');
  const quantityInput = document.getElementById('wpcalc-quantity');
  const option1Checkbox = form.querySelector('input[name="option1"]');
  const option2Checkbox = form.querySelector('input[name="option2"]');
  const resultSpan = document.getElementById('wpcalc-result');

  // Цены за единицу в зависимости от тарифа
  const prices = {
    basic: 100,
    standard: 150,
    premium: 200
  };

  // Функция расчёта скидки
  function wpcalc_calcDiscount(tariff, quantity) {
    if (quantity >= 10) {
      if (tariff === 'basic') return 0.05; // 5%
      if (tariff === 'standard') return 0.1; // 10%
      if (tariff === 'premium') return 0.15; // 15%
    }
    return 0;
  }

  function calculate() {
    const tariff = tariffSelect.value;
    const quantity = parseInt(quantityInput.value) || 1;
    let basePrice = prices[tariff] || 0;

    let total = basePrice * quantity;

    // Добавляем опцию 1 (фиксированная сумма)
    if (option1Checkbox.checked) {
      total += parseFloat(option1Checkbox.value);
    }

    // Применяем скидку
    const discount = wpcalc_calcDiscount(tariff, quantity);
    total = total * (1 - discount);

    // Применяем опцию 2 (процент)
    if (option2Checkbox.checked) {
      total = total * 1.05; // +5%
    }

    resultSpan.textContent = total.toFixed(2);
  }

  form.addEventListener('change', calculate);
  form.addEventListener('input', calculate);

  calculate(); // начальный расчет
});

Обработка на сервере с помощью AJAX для защиты логики

Если бизнес-логика сложная или необходимо скрыть формулы, расчёты лучше переносить на сервер. В WordPress для этого удобно использовать AJAX с wp_ajax.

Пример PHP-обработчика в functions.php

add_action('wp_ajax_wpcalc_complex_calculate', 'wpcalc_complex_calculate');
add_action('wp_ajax_nopriv_wpcalc_complex_calculate', 'wpcalc_complex_calculate');

function wpcalc_complex_calculate() {
  // Проверяем nonce и права, если нужно

  $tariff = $_POST['tariff'] ?? 'basic';
  $quantity = intval($_POST['quantity'] ?? 1);
  $option1 = isset($_POST['option1']) ? floatval($_POST['option1']) : 0;
  $option2 = isset($_POST['option2']) ? true : false;

  $prices = [
    'basic' => 100,
    'standard' => 150,
    'premium' => 200
  ];

  $basePrice = $prices[$tariff] ?? 0;
  $total = $basePrice * $quantity + $option1;

  $discount = 0;
  if ($quantity >= 10) {
    if ($tariff === 'basic') $discount = 0.05;
    elseif ($tariff === 'standard') $discount = 0.1;
    elseif ($tariff === 'premium') $discount = 0.15;
  }
  $total = $total * (1 - $discount);

  if ($option2) {
    $total = $total * 1.05;
  }

  wp_send_json_success(['total' => round($total, 2)]);
}

JavaScript с AJAX-запросом

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('wpcalc-complex-form');
  const resultSpan = document.getElementById('wpcalc-result');

  function calculate() {
    const data = {
      action: 'wpcalc_complex_calculate',
      tariff: form.tariff.value,
      quantity: form.quantity.value,
      option1: form.option1.checked ? form.option1.value : 0,
      option2: form.option2.checked ? 1 : 0
    };

    fetch(wpcalc_ajax_object.ajax_url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      },
      body: new URLSearchParams(data)
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        resultSpan.textContent = data.data.total.toFixed(2);
      }
    });
  }

  form.addEventListener('input', calculate);
  form.addEventListener('change', calculate);
  calculate();
});

Полезные плагины для создания сложных калькуляторов в WordPress

Если хочется быстрее решить задачу или добавить расширенные функции, можно использовать следующие плагины:

• WPRemark — мощный плагин для создания сложных форм и калькуляторов с логикой.
• Clearfy Pro — оптимизация и улучшение скорости работы сложных калькуляторов.
• My Popup — для вывода калькуляторов в всплывающих окнах.

Выводы и рекомендации

Создание калькулятора с учётом сложных зависимостей требует тщательной проработки логики и удобного интерфейса. Лучше всего делать динамические расчёты на клиенте с проверкой и защитой на сервере через AJAX. Это гарантирует быстрый отклик и безопасность.

Использование готовых плагинов, таких как WPRemark, может существенно ускорить процесс, но собственная реализация даёт полный контроль над логикой и интеграцией.