--- 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 | --- ## Макет сторінки (wireframe) ``` ┌──────────────────────────────────────────────────────────────────┐ │ GoodBrick Каталог Про нас Ціни Ще КОНТАКТИ │ ├──────────────────────────────────────────────────────────────────┤ │ │ │ Калькулятор розходу фасадної плитки та цегли │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ Тип продукту: │ │ │ │ ● Фасадна плитка ○ Половинка цегли ○ Цегла │ │ │ │ │ │ │ │ Формат: [▾ NF — 250×65×15 мм ] │ │ │ │ 50 штук на кв.м. · від 1 200 грн/м² │ │ │ │ │ │ │ │ ────────────────────────────────────────────── │ │ │ │ │ │ │ │ Площа фасаду: │ │ │ │ Спосіб 1: [ __________ ] кв.м. │ │ │ │ │ │ │ │ Спосіб 2: Ширина [ ___ ] м × Висота [ ___ ] м │ │ │ │ = 120 кв.м. │ │ │ │ │ │ │ │ Запас: [+10%] [+15%] [без запасу] │ │ │ │ (рекомендуємо +10% для прямих поверхонь) │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ ✓ Результат розрахунку │ │ │ │ │ │ │ │ Площа з запасом: 132 кв.м. (+10%) │ │ │ │ Кількість: 6 600 штук │ │ │ │ Орієнтовна вартість: від 158 400 грн │ │ │ │ │ │ │ │ ╔════════════════════════════════════╗ │ │ │ │ ║ Замовити зразок у Telegram → ║ │ │ │ │ ╚════════════════════════════════════╝ │ │ │ │ [Зателефонувати для уточнення] │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ Потрібний точний кошторис? │ │ │ │ Напишіть нам — розрахуємо з урахуванням: │ │ │ │ · Вартості доставки до вашого міста │ │ │ │ · Знижок при великому замовленні │ │ │ │ · Кутових елементів │ │ │ │ [Написати в Telegram →] │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ── FOOTER ──────────────────────────────────────────────────── │ │ GoodBrick │ Каталог │ Інфо │ Контакти │ Соцмережі │ └──────────────────────────────────────────────────────────────────┘ ``` --- ## 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 — Главная]]