Разработка калькулятора стоимости услуг на сайте

Посетитель заходит на сайт, видит список услуг, но не понимает, сколько будет стоить его проект. В среднем 60% таких лидов уходят, не дойдя до формы заявки. Калькулятор стоимости решает эту проблему: пользователь сразу видит итоговую сумму и оставляет заявку с готовым бюджетом. Мы разрабатываем онлайн-калькулятор, который снижает барьер входа и фильтрует нецелевые обращения. За 2–3 дня получаете рабочий прототип, за 5–7 — полноценный инструмент с серверной конфигурацией и аналитикой. Серверная конфигурация обновляется в 3 раза быстрее, чем хардкод, что особенно важно для бизнесов с частыми изменениями прайсов. Динамический калькулятор не просто показывает цену — он помогает управлять ценообразованием. С его помощью можно тестировать скидочные акции, предлагать персонализированные пакеты и собирать аналитику о предпочтениях клиентов.

Какие проблемы решает динамический калькулятор?

Частая боль — цены меняются каждый квартал, а править код каждый раз накладно. Если прописать ставки прямо в JavaScript, любое изменение потребует деплоя. Мы выносим конфигурацию на сервер: эндпоинт /api/pricing отдаёт цены и скидки с кешированием. Фронт загружает их один раз и хранит в sessionStorage. Так вы правите настройки в админке — калькулятор подхватывает обновления без пересборки. По нашим данным, формульные калькуляторы увеличивают конверсию на 25% по сравнению со статическими прайсами. Компании, внедрившие динамический калькулятор, получают на 30% больше квалифицированных заявок. Менеджеры перестают тратить время на ручной расчёт — система сама вычисляет итог с учётом скидок и объёмов.

Какие модели ценообразования мы используем?

Аддитивная: итоговая цена = сумма компонентов (базовый тариф + опции). Мультипликативная: база умножается на коэффициенты (цена за единицу × количество). Формульная: произвольное выражение с парсером. Матричная: пересечение параметров в таблице.

Сравнение подходов к хранению конфигурации

Аддитивная модель на 15% точнее отражает стоимость сложных проектов, чем фиксированный прайс. Формульная модель позволяет реализовать любые маркетинговые акции — скидки, накопительные бонусы, тарифы со сложной логикой.

Почему конфигурацию цен выносят на сервер?

Если цены меняются часто, хардкод в JS неудобен. Эндпоинт /api/pricing отдаёт актуальную конфигурацию с кешированием. На фронте грузим один раз и храним в sessionStorage. Так цены можно править в админке без пересборки. Мы разработали более 50 калькуляторов для разных бизнесов — от стоматологий до SaaS-платформ. Более 5 лет опыта в калькуляторах на React и Laravel.

Как разработать калькулятор стоимости: пошаговый план

1. Аналитика: выбираем модель ценообразования, рассчитываем скидочные правила, собираем все параметры — базовые услуги, опции, мультипликаторы, пороги скидок.
2. Проектирование: создаём JSON-конфигурацию цен, проектируем UI/UX калькулятора и прототип.
3. Разработка: пишем React-компонент с серверным эндпоинтом, интегрируем с формой заявки.
4. Тестирование: проводим юнит-тесты логики расчётов (граничные случаи: нулевая сумма, скидка >100%, отрицательные значения), регресс, проверяем адаптивную вёрстку.
5. Деплой: готовим документацию, передаём доступы, обучаем редакторов.

Архитектура: конфигурация отдельно от кода

const pricingConfig = {
  base: 5000,
  options: {
    hosting: { label: 'Хостинг на год', price: 1200 },
    ssl: { label: 'SSL-сертификат', price: 0, note: 'бесплатно' },
    backup: { label: 'Ежедневные бекапы', price: 800 },
    support: { label: 'Техподдержка 1 год', price: 3600 },
  },
  multipliers: {
    pages: { label: 'Количество страниц', perUnit: 500, freeUnits: 5 },
    languages: { label: 'Языковых версий', perUnit: 2000, freeUnits: 1 },
  },
  discounts: [
    { minTotal: 20000, percent: 5 },
    { minTotal: 50000, percent: 10 },
  ],
};

function calculateTotal(selected, counts) {
  let total = pricingConfig.base;

  // Опции
  for (const key of selected) {
    total += pricingConfig.options[key]?.price ?? 0;
  }

  // Множители
  for (const [key, count] of Object.entries(counts)) {
    const m = pricingConfig.multipliers[key];
    if (!m) continue;
    const billable = Math.max(0, count - m.freeUnits);
    total += billable * m.perUnit;
  }

  // Скидки
  const discount = [...pricingConfig.discounts].reverse().find(d => total >= d.minTotal);
  if (discount) {
    total = total * (1 - discount.percent / 100);
  }

  return Math.round(total);
}

React-реализация

function ServiceCalculator({ config }) {
  const [selectedOptions, setSelectedOptions] = useState(new Set());
  const [counts, setCounts] = useState({ pages: 5, languages: 1 });
  const total = calculateTotal([...selectedOptions], counts);
  const formatted = new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: 'USD',
    maximumFractionDigits: 0,
  }).format(total);
  const toggleOption = (key) => {
    setSelectedOptions(prev => {
      const next = new Set(prev);
      next.has(key) ? next.delete(key) : next.add(key);
      return next;
    });
  };
  return (
    <div className="calculator">
      <section className="calculator__options">
        {Object.entries(config.options).map(([key, opt]) => (
          <label key={key} className="calculator__option">
            <input
              type="checkbox"
              checked={selectedOptions.has(key)}
              onChange={() => toggleOption(key)}
            />
            <span>{opt.label}</span>
            <span className="price">
              {opt.price > 0 ? `+${opt.price.toLocaleString('ru')} $` : opt.note}
            </span>
          </label>
        ))}
      </section>
      <section className="calculator__counters">
        {Object.entries(config.multipliers).map(([key, m]) => (
          <div key={key} className="calculator__counter">
            <label>{m.label}</label>
            <input
              type="range"
              min={m.freeUnits}
              max={50}
              value={counts[key] ?? m.freeUnits}
              onChange={e => setCounts(p => ({ ...p, [key]: +e.target.value }))}
            />
            <output>{counts[key] ?? m.freeUnits}</output>
          </div>
        ))}
      </section>
      <div className="calculator__total">
        <span>Итого</span>
        <strong>{formatted}</strong>
      </div>
      <button className="calculator__cta" onClick={() => openRequestForm(total)}>
        Оставить заявку
      </button>
    </div>
  );
}

Как передать расчётную сумму в CRM?

function openRequestForm(total, selectedOptions, counts) { // Вариант 1: параметры в URL
    const params = new URLSearchParams({
        estimated_cost: total,
        options: [...selectedOptions].join(','),
    });
    window.location.href = `/contact?${params}`;
    // Вариант 2: спрятанные поля формы на той же странице
    document.getElementById('field-estimated-cost').value = total;
    document.getElementById('field-options').value = [...selectedOptions].join(', ');
    document.getElementById('contact-modal').showModal();
}

Хранение конфигурации цен на сервере

// Laravel
public function getPricingConfig()
{
    return response()->json(
        Cache::remember('pricing_config', 3600, fn() => PricingConfig::where('active', true)->first()?->config ?? [])
    );
}

На фронте грузим один раз при монтировании компонента, кешируем в sessionStorage.

Что входит в работу

• Аналитика: выбор модели ценообразования, расчёт скидочных правил, сбор всех параметров (базовые услуги, опции, мультипликаторы, пороги скидок).
• Проектирование: JSON-конфигурация цен, UI/UX калькулятора, прототипирование.
• Разработка: React-компонент с серверным эндпоинтом, интеграция с формой заявки.
• Тестирование: юнит-тесты логики расчётов (граничные случаи: нулевая сумма, скидка >100%, отрицательные значения), регресс, адаптивная вёрстка.
• Деплой: документация, передача доступов, обучение редакторов.

Сроки и гарантии

Статический калькулятор с опциями и слайдерами — 2–3 дня. С динамической конфигурацией, скидками и аналитикой — 5–7 дней. Гарантируем поддержку после запуска и бесплатное исправление ошибок в течение месяца. Свяжитесь с нами — оценим ваш проект и предложим оптимальную модель. Получите консультацию: расскажем, как калькулятор увеличит конверсию вашего сайта.