Promo-calculators. All type
Ready for Dev · v1.0 · Updated Mar 2026 · Marketing team

Варианты интерфейса промо-калькуляторов с выбором тиража, дат, оснастки и параметров заказа

Status
Ready for Dev
Version
1.0
Owner
Marketing team
Last updated
Mar 2026
Platform
Web / Mobile
Bitrix Task
Custom Dropdown
Стандарт, 90×50
Default
Стандарт, 90×50
Hover
Стандарт, 90×50
Стандарт, 90×50
Евро, 85×55
Мини, 70×40
Open
Евро, 85×55
Стандарт, 90×50
Евро, 85×55
Мини, 70×40
Selected
Date Card
991 ₽ За 1 час
Default
991 ₽ Завтра
Hover
991 ₽ За 1 час
Selected
496 ₽ 11 марта −15%
With discount
Atoms 5
Неделимые UI-элементы
  • Button .btn
  • Chevron Icon .cd__arrow
  • Recommend Badge .cd__badge
  • Discount Tag .fdc__badge
  • Price Label .cd__tbl-total
Molecules 4
Комбинации атомов
  • Dropdown Basic .cd
  • Dropdown Table 3-col .cd--table
  • Dropdown Table 2-col .cd--tbl2 / .cd--v12
  • Date Card .dates-card
Organisms 2
Сложные интерфейсные блоки
  • Date Selection Grid .dates-grid
  • Calculator Form [data-cd]
Всего компонентов 11
Dropdown — Тираж

Dropdown закрывается при клике вне него или при выборе опции.

Выбранная опция подсвечивается фоном primary-50 (#f0f7ff). Одновременно открыт может быть только один dropdown на странице.

Значение в триггере обновляется сразу после выбора — без задержки и анимации.

Dropdown — Дата готовности

Карточки дат перестраиваются при смене тиража: цены пересчитываются по матрице data-date-prices.

Три уровня срочности: срочно / завтра / несрочно. Несрочная дата отображает скидку в виде зачёркнутой цены и бейджа процента.

Знак рубля (₽) в ценах дат отображается меньшим кеглем (11px), чтобы визуально не перевешивать цифры.

Stepper

Минимальное значение — 1. Кнопка «–» недоступна при значении 1 (не уводит в ноль).

Прямое редактирование поля не предусмотрено в текущей версии прототипа.

Модальное окно — Город

Модальное окно адаптируется под высоту браузера (100dvh). На мобильных список городов прокручивается внутри окна — сам overlay не скроллится.

Закрывается кликом на overlay или кнопкой «✕».

Инфо-попап

Попап фиксированной ширины (172px) появляется при hover на иконку «ℹ». Стрелка попапа позиционируется динамически через CSS-переменную --arrow-x, чтобы всегда указывать на иконку даже если попап смещается у края экрана.

Цена за 1 шт

Цена за 1 шт рассчитывается от базовой цены (p1 — срочно), а не от цены со скидкой за несрочность. Зачёркнутая цена в таблице показывает стоимость без скидки за тираж.

Custom Dropdown
default hover open selected
Date Card
default hover selected with discount urgency badge
Stepper
default min (disabled –) hover
Checkbox / Radio
unchecked checked disabled
Breakpoint Changes
≤ 440px Все варианты форм имеют дефолтную ширину 440px, на меньших экранах занимают 100% ширины
Mobile Модальное окно города: список прокручивается внутри окна (flex + overflow-y: auto), overlay не скроллится
Mobile «Доп. комплект» и «Заменить одежду» остаются в одну строку (white-space: nowrap или flex row)