Посетитель заходит на сайт, видит список услуг, но не понимает, сколько будет стоить его проект. В среднем 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: '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> ); } Детали реализации
В компоненте используется `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 дней. Гарантируем поддержку после запуска и бесплатное исправление ошибок в течение месяца. Свяжитесь с нами — оценим ваш проект и предложим оптимальную модель. Получите консультацию: расскажем, как калькулятор увеличит конверсию вашего сайта.