---
tags:
  - сайт
  - страница
  - калькулятор
  - p1
url: /calculator
approach: Кастомная client-side страница
effort: ~6ч
created: 2026-02-17
---

# 🧮 Калькулятор розходу

> [!tip] Роль страницы
> Инструмент лид-генерации: покупатель сам считает — и уже вложил время. После расчёта — CTA «отримати точний розрахунок у Telegram». Конверсия инструментов в среднем в 3-4x выше чем страниц с текстом.

> [!warning] Реализация
> **Кастомная client-side страница** — никакого бэкенда не нужно.
> Вся логика расчёта в браузере. Файл: `app/(site)/calculator/page.tsx`
> Данные о товарах: подтягиваются из `/api/products` или захардкожены для скорости.

---

## Мета-данные

| Поле | Значение |
|---|---|
| **H1** | `Калькулятор розходу фасадної плитки та цегли` |
| **Title** | `Калькулятор фасадної плитки — Розрахунок кількості та вартості \| GoodBrick` |
| **Description** | `Розрахуйте кількість фасадної плитки або цегли для вашого проекту. Введіть площу — отримайте кількість штук та орієнтовну вартість. Безкоштовно.` |
| **Schema** | `WebApplication` |
| **isIndexable** | true |

---

## UX / Структура калькулятора

### Шаг 1: Выбор продукта

```
Тип продукту:
( ) Фасадна плитка
( ) Половинка цегли
( ) Цегла

Формат:
[ Dropdown: NF / WDF / Long 440×50 / 500×40 / ... ]
```

При выборе типа + формата → показывать:
- Размеры (из данных продукта)
- Штук на кв.м.
- Ориентировочная цена за кв.м.

---

### Шаг 2: Площадь

```
Площа фасаду:

Спосіб 1: Загальна площа
[ _______ ] кв.м.

Спосіб 2: Розміри стіни
Ширина [ ___ ] м × Висота [ ___ ] м = {auto} кв.м.

Врахувати запас:  [+10%] [+15%] [+0%]
(рекомендуємо +10% для прямих поверхонь, +15% для кутових)
```

---

### Шаг 3: Результат (мгновенно, без клика)

```
╔══════════════════════════════════╗
║  Результат розрахунку            ║
║                                  ║
║  Площа: 120 кв.м. (+10%)        ║
║  Кількість: 1 450 штук           ║
║  Орієнтовна вартість: від 28 500 грн ║
╚══════════════════════════════════╝

[ Замовити зразок у Telegram ]
[ Зателефонувати для уточнення ]
```

> [!important] Показывать результат сразу — не гейтить за контакты
> Пользователь должен видеть результат без регистрации. Это доверие. CTA — после.

---

### Блок после результата

```
Потрібний точний кошторис?
Напишіть нам у Telegram — розрахуємо з урахуванням:
• Вартості доставки до вашого міста
• Можливих знижок при великому замовленні
• Кутових елементів

[ Написати в Telegram ]
```

---

## Формула расчёта

```javascript
const piecesPerSqm = {
  // Захардкодить из данных БД
  'NF': 50,        // штук на кв.м. (примерно)
  'WDF': 60,
  'Long 440x50': 45,
  '500x40': 50,
}

const wasteMultiplier = { 0: 1.0, 10: 1.1, 15: 1.15 }

const area = width * height || inputArea
const areaWithWaste = area * wasteMultiplier[selectedWaste]
const piecesNeeded = Math.ceil(areaWithWaste * piecesPerSqm[selectedFormat])
const estimatedCost = piecesNeeded * pricePerPiece
```

> [!warning] Цены
> Цены в калькуляторе — ориентировочные. Брать из API или захардкодить базовую цену.
> Формулировка: «орієнтовна вартість від {min} грн» — не точная цена.

---

## Конверсия

- [x] Результат показывается мгновенно — пользователь вовлечён
- [x] CTA после результата: Telegram + телефон (не форма)
- [x] Объяснение почему +10%/+15% — обучает, строит доверие
- [x] «Орієнтовна» цена — не отпугивает, не обязывает

---

## Дополнительные фичи (добавить позже)

- Несколько стен за один расчёт (вычесть окна/двери)
- PDF-выгрузка сметы (с контактами GoodBrick)
- Сохранить расчёт (localStorage)
- Виджет калькулятора на главной странице (мини-версия)

---

## Scope cuts

| Убрано | Причина |
|---|---|
| Многошаговый визард | Один экран удобнее для мобиле |
| Учёт окон и дверей | Добавить в Q2 |
| PDF-выгрузка | Добавить в Q2 |
| Интеграция с API товаров реального времени | Захардкодить форматы и цены для скорости |
| Email результатов | Email не используется |

---

## Связанные страницы

- [[00 — Обзор и приоритеты]]
- [[04 — FAQ]]
- [[01 — Главная]]