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

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

Калькулятор стоимости — один из наиболее конвертирующих элементов сайта услуг. Человек хочет понять цену до разговора с менеджером. Если калькулятор даёт реалистичную оценку — он снижает барьер входа и фильтрует нецелевые обращения.

Модели ценообразования в калькуляторах

Аддитивная — итоговая цена = сумма компонентов. Подходит для конструкторов услуг: «базовый тариф + опция А + опция Б».

Мультипликативная — базовая цена умножается на коэффициенты. Типично для объёмных услуг: цена за единицу × количество × поправочный коэффициент.

Формульная — произвольная формула из параметров. Требует парсера выражений или явного кода на JS.

Матричная — цена берётся из таблицы по пересечению параметров (например, город × тип доставки).

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

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: 'RUB', 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>
  );
}

Передача суммы в форму заявки

Пользователь нажал «Оставить заявку» — форма должна получить выбранные параметры и рассчитанную сумму:

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();
}

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

Если цены меняются часто — не стоит хардкодить их в JS. Эндпоинт /api/pricing возвращает актуальную конфигурацию:

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

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

Сроки

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