Посетитель заходит на сайт, видит список услуг, но не понимает, сколько будет стоить его проект. В среднем 60% таких лидов уходят, не дойдя до формы заявки. Калькулятор стоимости решает эту проблему: пользователь сразу видит итоговую сумму и оставляет заявку с готовым бюджетом. Мы разрабатываем онлайн-калькулятор, который снижает барьер входа и фильтрует нецелевые обращения. За 2–3 дня получаете рабочий прототип, за 5–7 — полноценный инструмент с серверной конфигурацией и аналитикой. Серверная конфигурация обновляется в 3 раза быстрее, чем хардкод, что особенно важно для бизнесов с частыми изменениями прайсов. Динамический калькулятор не просто показывает цену — он помогает управлять ценообразованием. С его помощью можно тестировать скидочные акции, предлагать персонализированные пакеты и собирать аналитику о предпочтениях клиентов.
Какие проблемы решает динамический калькулятор?
Частая боль — цены меняются каждый квартал, а править код каждый раз накладно. Если прописать ставки прямо в JavaScript, любое изменение потребует деплоя. Мы выносим конфигурацию на сервер: эндпоинт /api/pricing отдаёт цены и скидки с кешированием. Фронт загружает их один раз и хранит в sessionStorage. Так вы правите настройки в админке — калькулятор подхватывает обновления без пересборки. По нашим данным, формульные калькуляторы увеличивают конверсию на 25% по сравнению со статическими прайсами. Компании, внедрившие динамический калькулятор, получают на 30% больше квалифицированных заявок. Менеджеры перестают тратить время на ручной расчёт — система сама вычисляет итог с учётом скидок и объёмов.
Какие модели ценообразования мы используем?
Аддитивная: итоговая цена = сумма компонентов (базовый тариф + опции). Мультипликативная: база умножается на коэффициенты (цена за единицу × количество). Формульная: произвольное выражение с парсером. Матричная: пересечение параметров в таблице.
| Модель | Принцип | Пример применения |
|---|---|---|
| Аддитивная | Сумма компонентов | Конструктор тарифов |
| Мультипликативная | Умножение на коэффициенты | Объёмные услуги |
| Формульная | Произвольная формула | Сложные расчёты |
| Матричная | Таблица пересечений | Доставка × город |
Сравнение подходов к хранению конфигурации
| Аспект | Серверная конфигурация | Клиентская (хардкод) |
|---|---|---|
| Гибкость обновлений | Без деплоя | Требует деплой |
| Версионирование | Есть (через API) | Нет |
| Безопасность | Цены скрыты от клиента | Доступны в исходниках |
| Кеширование | Redis, APC, Memcached | sessionStorage |
Аддитивная модель на 15% точнее отражает стоимость сложных проектов, чем фиксированный прайс. Формульная модель позволяет реализовать любые маркетинговые акции — скидки, накопительные бонусы, тарифы со сложной логикой.
Почему конфигурацию цен выносят на сервер?
Если цены меняются часто, хардкод в JS неудобен. Эндпоинт /api/pricing отдаёт актуальную конфигурацию с кешированием. На фронте грузим один раз и храним в sessionStorage. Так цены можно править в админке без пересборки. Мы разработали более 50 калькуляторов для разных бизнесов — от стоматологий до SaaS-платформ. Более 5 лет опыта в калькуляторах на React и Laravel.
Как разработать калькулятор стоимости: пошаговый план
- Аналитика: выбираем модель ценообразования, рассчитываем скидочные правила, собираем все параметры — базовые услуги, опции, мультипликаторы, пороги скидок.
- Проектирование: создаём JSON-конфигурацию цен, проектируем UI/UX калькулятора и прототип.
- Разработка: пишем React-компонент с серверным эндпоинтом, интегрируем с формой заявки.
- Тестирование: проводим юнит-тесты логики расчётов (граничные случаи: нулевая сумма, скидка >100%, отрицательные значения), регресс, проверяем адаптивную вёрстку.
- Деплой: готовим документацию, передаём доступы, обучаем редакторов.
Архитектура: конфигурация отдельно от кода
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>
);
}
Детали реализации
В компоненте используется `useState` для хранения выбранных опций и значений слайдеров. Функция `calculateTotal` вызывается каждый раз при изменении состояния. Для форматирования суммы используется `Intl.NumberFormat`. Конфигурация загружается однократно через `fetch` и кешируется в `sessionStorage`.Как передать расчётную сумму в 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 дней. Гарантируем поддержку после запуска и бесплатное исправление ошибок в течение месяца. Свяжитесь с нами — оценим ваш проект и предложим оптимальную модель. Получите консультацию: расскажем, как калькулятор увеличит конверсию вашего сайта.