Відвідувач заходить на сайт, бачить список послуг, але не розуміє, скільки коштуватиме його проект. У середньому 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('uk-UA', {
style: 'currency', currency: 'UAH', 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('uk')} ₴` : 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 днів. Гарантуємо підтримку після запуску та безкоштовне виправлення помилок протягом місяця. Зв'яжіться з нами — оцінимо ваш проект і запропонуємо оптимальну модель. Отримайте консультацію: розповімо, як калькулятор збільшить конверсію вашого сайту.