Калькулятор скидки в Ное: цена, экономия и готовое задание
Цена после скидки и сумма экономии: две цифры, которые нужны покупателю. Готовое задание для Билдера Нои учитывает ввод с запятой, округление копеек и неверные значения.
• 13 лет опыта в маркетинге и продажах
• Более 1000 проектов
• Основатель портала Wake up Marketing
• Практикует маркетинг и внедрение ИИ в бизнес клиентов
Подпишитесь на Telegram-канал Дмитрия: дневник развития портала Wake up Marketing, билдера сайтов и приложений в Ноя и маркетплейса шаблонов. Плюс выжимка 13 лет опыта в суровом маркетинге и плоды 2 лет работы с ИИ 24/7
Покупатель вводит цену и скидку и сразу видит, сколько заплатит и сколько сэкономит: при цене 2 490 ₽ и скидке 15% это 2 116,50 ₽ и 373,50 ₽. Такую страницу можно собрать в Билдере Нои по готовому заданию ниже или добавить к своему сайту.
Для расчёта достаточно двух полей и кнопки. Посетителю важно понимать, к какой исходной цене относится процент, а владельцу страницы — получить одинаковый результат при вводе с точкой, запятой и копейками. На этом примере удобно начать собственное веб-приложение: результат сразу виден, и его легко пересчитать вручную.
Цена после скидки равна исходной цене, умноженной на долю, которая остаётся к оплате. Для скидки 15% эта доля составляет 85%. Сумма экономии — разница между исходной и окончательной ценой; калькулятор показывает обе суммы с точностью до копеек.
Для примера из начала: 2 490 × 0,85 = 2 116,50 ₽. Затем 2 490 − 2 116,50 = 373,50 ₽. Под результатом полезно сохранить названия обеих сумм, чтобы крупное число нельзя было принять за размер скидки.
Пример интерфейса: скидка 15% от 2 490 ₽ оставляет 2 116,50 ₽ к оплате и 373,50 ₽ экономии.
Калькулятор на иллюстрации принимает одну скидку. При последовательном снижении на 20% и ещё на 10% оставшаяся доля составит 0,8 × 0,9 = 0,72: общая скидка 28%. Если такая акция нужна вашему магазину, добавьте отдельный режим с двумя процентами и назовите его в интерфейсе.
Полное задание для Билдера Нои
Опишите результат целиком: поля, формулу, ошибки и внешний вид. Так помощник получает небольшую законченную задачу, которую легко повторить на контрольных суммах.
Промпт
Сделай одностраничное веб-приложение «Калькулятор скидки» на русском языке.
Задача: посетитель вводит исходную цену в рублях и процент одной скидки. Получает окончательную цену и сумму экономии.
Интерфейс:
— заголовок и одна строка с назначением;
— два подписанных поля: «Исходная цена, ₽» и «Скидка, %»;
— кнопка «Рассчитать»;
— крупная цена после скидки и отдельная строка «Вы экономите»;
— подпись, что расчёт относится к одной скидке на указанную цену.
Правила ввода:
— цена больше нуля и не больше одного миллиарда рублей;
— скидка от нуля до ста процентов включительно;
— до двух знаков после запятой в обоих полях;
— принимаются запятая и точка, пробелы между разрядами цены;
— пустые значения, отрицательные числа, текст и превышение границ показывают понятную ошибку рядом с формой;
— при изменении полей старый результат скрывается до нового расчёта;
— при ошибке старый результат тоже скрывается.
Расчёт:
Храни цену в целых копейках, а процент — в сотых долях процента. Рассчитай остаток цены после скидки, округли его до целой копейки обычным математическим округлением. Экономия равна исходным копейкам минус окончательные копейки.
Контрольные примеры:
2490 и 15 → 2116,50 ₽, экономия 373,50 ₽.
100 и 0 → 100,00 ₽, экономия 0,00 ₽.
100 и 100 → 0,00 ₽, экономия 100,00 ₽.
2490,50 и 12,25 → 2185,41 ₽, экономия 305,09 ₽.
Внешний вид:
Светлая спокойная страница, контрастные подписи, крупные поля и кнопка. На телефоне поля друг под другом. На компьютере можно поставить рядом. Сохрани видимый фокус клавиатуры, связку подписей с полями и объявление результата для экранного диктора. Без сторонних скриптов, регистрации и отправки данных.
Добавь понятное сообщение при отключённом JavaScript с формулой ручного расчёта. Покажи проект и проверь контрольные примеры перед публикацией.
По этому заданию помощник создаст обычную страницу, которую открывают ссылкой в браузере. Установка из магазина приложений для неё не нужна. Если позже захотите сохранять историю расчётов или делать доступ для сотрудников, это будут дополнительные функции с отдельным хранением данных.
Сайт можно собрать разговором
Опишите идею словами — и смотрите, как сайт собирается на глазах
Вайбкод-конструктор: от лендинга до контент-портала
Правки — тем же диалогом, без вёрстки и разработчиков
Откройте Билдер Нои, перейдите в «Билдер» и выберите создание проекта для своей идеи. Вставьте задание целиком в описание проекта. Перед запуском посмотрите, какой способ выполнения выбран: работа встроенной Нои и работа вашего подключённого агента имеют разные условия оплаты.
Актуальные разделы кабинета — «Обзор», «Мои проекты», «Шаблоны» и «Подключить агента». Для собственного калькулятора подходит новый проект; установка шаблона нужна, если вы осознанно начинаете с готового сайта.
Когда первая версия появилась в предпросмотре, введите суммы из контрольных примеров. Проверьте ошибку после правильного результата: прежняя сумма должна исчезнуть, чтобы посетитель не принял её за новый ответ. Затем откройте страницу по ссылке на телефоне и пройдите те же действия.
Перед публикацией прочитайте заголовок и подписи без объяснений автора задания. Человек должен сразу понимать, что вводить и какую сумму он видит. После публикации повторите хотя бы один обычный расчёт и одно неверное значение на рабочем адресе.
Почему расчёт ведётся в копейках
Денежный результат удобнее хранить целым числом. Например, 2 490,50 ₽ становятся 249 050 копейками. Скидка 12,25% становится 1 225 сотыми долями процента. Оставшаяся доля — 8 775 из 10 000.
Получается 249 050 × 8 775 / 10 000 = 218 541,375 копейки. После округления окончательная цена — 218 541 копейка, то есть 2 185,41 ₽. Экономия равна 249 050 − 218 541 = 30 509 копеек, или 305,09 ₽. Вместе они точно дают исходную сумму.
Так у округления одно правило. Если отдельно округлять скидку и отдельно считать итог, на граничных суммах разойдётся копейка. Поэтому в задании сначала считается конечная цена, а экономия получается вычитанием.
У калькулятора скидки задача узкая: одна исходная цена и один процент. Поэтому правило округления записывается одной строкой; с количеством, материалами и доставкой формула разрастётся.
Какие ошибки стоит показать человеку
Если поле пустое, попросите ввести значение. Для цены меньше или равной нулю объясните допустимую границу. Для скидки выше 100% покажите сообщение про диапазон от 0 до 100. Сообщение об ошибке удобнее показывать рядом с полем и не стирать то, что человек уже ввёл.
Дробь 12,25 для русского интерфейса привычнее, чем обязательная точка. Клавиатуру телефона можно подсказать через inputmode="decimal": документация HTML inputmode описывает этот режим. Он выбирает подходящую клавиатуру, а правильность значения всё равно проверяет приложение.
Скрывайте старый результат при редактировании полей. Это маленькая, но важная деталь: человек меняет процент, видит прежнюю цену крупными цифрами и может решить, что она уже пересчитана. Либо результат обновляется сразу после каждого корректного ввода, либо явно появляется только после кнопки.
Как развить инструмент для своего сайта
Для магазина можно добавить выбор между вводом процента и вводом конечной цены. Во втором режиме калькулятор покажет, на сколько процентов цена снизилась. Подписи и формулы у режимов разные, чтобы их не перепутать.
Ещё одно полезное расширение — строка товара: название, исходная цена, скидка и итог. После этого можно собирать несколько строк в предложение и копировать его текстом. Если расчёт превращается в оформление заказа, заранее определите, откуда берётся актуальная цена и кто подтверждает итог.
Самостоятельный калькулятор можно также связать с заявкой или каталогом. Подключения к таблице товаров, форме и уведомлениям настраиваются отдельно; для первой версии достаточно расчёта в браузере. Лучше всего калькулятор работает на странице, где у посетителя есть понятное следующее действие: заказать, написать, положить товар в корзину.
Первый собственный вариант
Сначала выберите место для калькулятора: отдельная полезная страница или часть своего магазина. Вставьте задание в новый проект, подставьте привычную для ваших товаров цену и проверьте результат с копейками. Когда простой расчёт работает и понятен на телефоне, добавляйте только ту следующую функцию, которая нужна вашим посетителям.
