Белая керамическая кружка

Белая керамическая кружка

Количество

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

885 ₽

Завтра

752 ₽ −15%

26 марта

681 ₽ −23%

28 марта

Стоимость в рублях за 1 штуку, включая НДС. Выдача заказа с 18:00

UX Notes · Предпросмотр промо-товара

📌 Контекст

Блок предпросмотра — галерея на промо-странице товара
Цель: дать пользователю детальный визуальный осмотр промо-товара
Два уровня: миниатюры в галерее + полноэкранный предпросмотр по клику

🖼 Галерея

Клик по миниатюре → главное изображение меняется, миниатюра получает .active
Клик по главному изображению → открывается модальный предпросмотр
Курсор над главным изображением → кастомный zoom-in (SVG, белый, 32×32)
Активная миниатюра: border: 2px solid #fff + box-shadow: 0 0 0 2px --primary-400
Неактивная: border: 2px solid rgba(255,255,255,.4)
Hover миниатюры: border-color: --grey-300

🔍 Модальный предпросмотр

Открывается кликом по главному изображению — без отдельной кнопки
Открывается на изображении, активном в галерее в момент клика
Закрытие: кнопка ×, клик по фону оверлея
При открытии → body overflow: hidden; при закрытии — восстанавливается
Переключение: клик по миниатюре или стрелки ←/→ (зацикленные)
Фон оверлея = фон промо-блока (#b89a7a)
Переключение внутри предпросмотра не синхронизирует активную миниатюру в галерее

⚠️ Состояния

Миниатюра default: полупрозрачная рамка
Миниатюра hover: --grey-300 border
Миниатюра active: белая рамка + синяя тень --primary-400
Предпросмотр closed: display: none
Предпросмотр open: display: flex; position: fixed; inset: 0
Миниатюра в предпросмотре active: border: #fff + box-shadow: --primary-400
не реализовано loading / error при загрузке изображений

🔗 Зависимости

Активная миниатюра в галерее → определяет стартовый кадр предпросмотра
Переключение в предпросмотре → не влияет на состояние галереи
Количество изображений в images[] → определяет количество миниатюр в обоих местах

📊 Данные

Источник изображений — массив images[], поддерживает N элементов
В прототипе 2 изображения, в проде — динамически из карточки товара
Размер миниатюр в галерее: 64×64px
Размер миниатюр в предпросмотре: 112×112px (mobile: 72×72px)
Главное изображение: max-height: min(420px, 55vh), object-fit: contain

🧠 UX-решения

Фон предпросмотра = фон промо (#b89a7a) → товар сохраняет визуальный контекст
Предпросмотр открывается кликом по фото, без кнопки → меньше UI, жест интуитивен для e-commerce
Курсор zoom-in вместо иконки-оверлея → чище, не перекрывает товар
Стрелки зациклены → нет тупиков при навигации

🔍 Edge cases

1 изображение → миниатюры скрыты, стрелки в предпросмотре скрыты
Изображение не загрузилось → нужна заглушка не реализовано
Последнее фото + → → переход на первое (% images.length)
Мобильный: оверлей + виртуальная клавиатура → не проверялось

🚧 Ограничения прототипа

не реализовано Клавиатурная навигация ← → в предпросмотре
не реализовано Skeleton / loading при загрузке изображений
не реализовано Заглушка при ошибке загрузки
захардкожено Список изображений — в проде из API товара