architect/templates/arh/ideal-shop/requirements/2-THEME.md

ТЕМА (Theme) — Визуальные компоненты

Версия: 1.0.0
Дата: 2025-12-06

Принцип

Тема = сменяемый визуал. Движок остаётся, тема меняется.
Тема получает данные через API, рендерит интерфейс.

1. HEADER

Элементы

Элемент Описание Best Practice
Лого Клик → главная SVG, адаптивный размер
Меню Категории Max 7 пунктов, mega-menu
Поиск Строка поиска Всегда видна, autocomplete
Телефон Контакт Click-to-call на мобильных
Корзина Иконка + счётчик Мини-корзина по hover/click
Профиль Вход / Кабинет Dropdown меню
Город Выбор города Для доставки

Best Practices

Wireframe

┌─────────────────────────────────────────────────────────────┐
│ [Logo]  [Категории ▼]  [____Поиск____🔍]  📞 [🛒 3] [👤]    │
└─────────────────────────────────────────────────────────────┘

Элементы

Блок Содержимое
О компании О нас, Контакты, Реквизиты
Покупателям Доставка, Оплата, Возврат, FAQ
Каталог Основные категории
Контакты Телефон, email, адрес, соцсети
Юридическое Политика, Оферта, Cookies
Копирайт © 2025, разработчик

Best Practices

Wireframe

┌─────────────────────────────────────────────────────────────┐
│ О компании    Покупателям     Каталог        Контакты       │
│ • О нас       • Доставка      • Категория 1  📞 +7 999...   │
│ • Контакты    • Оплата        • Категория 2  ✉️ mail@...    │
│ • Реквизиты   • Возврат       • Категория 3  📍 Адрес       │
│                                              [VK][TG][WA]   │
├─────────────────────────────────────────────────────────────┤
│ © 2025 Shop. Политика конфиденциальности | Оферта           │
└─────────────────────────────────────────────────────────────┘

3. ГЛАВНАЯ СТРАНИЦА

Блоки (сверху вниз)

Блок Назначение Best Practice
Hero Главный баннер 1-3 слайда, CTA кнопка
USP Преимущества 3-4 иконки с текстом
Категории Навигация Плитка с фото
Хиты продаж Популярные товары 4-8 карточек
Акции/Новинки Промо Слайдер или сетка
Отзывы Социальное доказательство 3-5 отзывов
Бренды Партнёры/производители Логотипы
SEO-текст Для поисковиков Скрытый/аккордеон

Best Practices

Wireframe

┌─────────────────────────────────────────────────────────────┐
│                    [HERO BANNER]                            │
│              Заголовок + [Кнопка CTA]                       │
├─────────────────────────────────────────────────────────────┤
│  🚚 Доставка    💳 Оплата      ✅ Гарантия    🎁 Подарки    │
├─────────────────────────────────────────────────────────────┤
│  [Категория 1]  [Категория 2]  [Категория 3]  [Категория 4] │
├─────────────────────────────────────────────────────────────┤
│  Хиты продаж                                                │
│  [Товар 1] [Товар 2] [Товар 3] [Товар 4]                    │
└─────────────────────────────────────────────────────────────┘

4. СТРАНИЦА КАТЕГОРИИ (КАТАЛОГ)

Элементы

Элемент Описание Best Practice
Хлебные крошки Навигация Главная → Категория
Заголовок H1 Название категории SEO
Подкатегории Если есть Плитка или теги
Фильтры Отбор товаров Боковая панель / шторка
Сортировка Порядок Dropdown
Вид Сетка / Список Toggle
Товары Карточки 3-4 в ряд
Пагинация Постраничная Числа или infinite scroll
SEO-текст Описание категории Внизу страницы

Фильтры (типовые)

Сортировка

Best Practices

Wireframe

┌─────────────────────────────────────────────────────────────┐
│ Главная > Категория                                         │
├──────────────┬──────────────────────────────────────────────┤
│ ФИЛЬТРЫ      │ Категория (42)         [Сортировка ▼] [≡][⊞]│
│              │                                              │
│ Цена         │ [Товар] [Товар] [Товар] [Товар]              │
│ [===●===]    │                                              │
│ 1000 - 5000  │ [Товар] [Товар] [Товар] [Товар]              │
│              │                                              │
│ ☑ В наличии │                                              │
│              │ [1] [2] [3] ... [12] →                       │
│ Бренд        │                                              │
│ ☑ Brand 1   │                                              │
│ ☐ Brand 2   │                                              │
└──────────────┴──────────────────────────────────────────────┘

5. КАРТОЧКА ТОВАРА (МИНИ)

Элементы

Элемент Описание Best Practice
Фото Главное изображение Hover → второе фото
Название Название товара 2 строки max
Цена Текущая цена Крупно
Старая цена Зачёркнутая Если есть скидка
Скидка -20% Badge
Рейтинг Звёзды Если есть отзывы
В корзину Кнопка Или "Подробнее"
Избранное Сердечко В углу
Наличие В наличии / Нет Индикатор

Best Practices

Wireframe

┌─────────────────────┐
│ -20%           [♡] │
│  ┌───────────────┐  │
│  │               │  │
│  │    [ФОТО]     │  │
│  │               │  │
│  └───────────────┘  │
│ Название товара     │
│ длинное в две строки│
│ ★★★★☆ (24)         │
│ ̶1̶0̶0̶0̶ ̶₽̶  800 ₽      │
│ [  В корзину  ]     │
└─────────────────────┘

6. СТРАНИЦА ТОВАРА

Блоки

Блок Описание Best Practice
Хлебные крошки Навигация Главная → Категория → Товар
Галерея Фото + видео Слева, с зумом
Основная инфо Название, цена, кнопка Справа от галереи
Варианты Размер, цвет Если есть
Наличие Статус + количество Зелёный/красный
Доставка Способы, сроки Калькулятор
Описание Полное описание Табы или аккордеон
Характеристики Таблица атрибутов Табы
Отзывы Рейтинг + комментарии Табы
Похожие Рекомендации Слайдер
Недавно просмотренные История Слайдер

Галерея

Best Practices

Wireframe

┌─────────────────────────────────────────────────────────────┐
│ Главная > Категория > Товар                                 │
├─────────────────────────────┬───────────────────────────────┤
│                             │ Название товара               │
│  ┌───────────────────────┐  │ ★★★★☆ (24 отзыва)            │
│  │                       │  │                               │
│  │     [БОЛЬШОЕ ФОТО]    │  │ Артикул: SKU-12345            │
│  │                       │  │                               │
│  └───────────────────────┘  │ ̶1̶0̶0̶0̶ ̶₽̶                        │
│  [•][•][•][▶][•]           │ 800 ₽  (-20%)                  │
│                             │                               │
│                             │ Размер: [S] [M] [L]           │
│                             │ Цвет:   [●] [●] [●]           │
│                             │                               │
│                             │ ✓ В наличии (5 шт)            │
│                             │                               │
│                             │ [−] 1 [+]  [ В КОРЗИНУ ]      │
│                             │                               │
│                             │ 🚚 Доставка от 290 ₽          │
│                             │    Завтра курьером            │
├─────────────────────────────┴───────────────────────────────┤
│ [Описание] [Характеристики] [Отзывы (24)]                   │
├─────────────────────────────────────────────────────────────┤
│ Полное описание товара...                                   │
├─────────────────────────────────────────────────────────────┤
│ Похожие товары                                              │
│ [Товар] [Товар] [Товар] [Товар] →                           │
└─────────────────────────────────────────────────────────────┘

7. КОРЗИНА (СТРАНИЦА)

Элементы

Элемент Описание Best Practice
Список товаров Таблица Фото, название, цена, кол-во, сумма
Изменение кол-ва +/- Без перезагрузки
Удаление Крестик Без confirm
Промокод Поле ввода С кнопкой "Применить"
Итого Сумма Подытог, скидка, доставка, итого
Оформить Кнопка CTA Яркая, заметная
Продолжить покупки Ссылка Вторичная

Best Practices

Wireframe

┌─────────────────────────────────────────────────────────────┐
│ Корзина (3 товара)                                          │
├─────────────────────────────────────────────────────────────┤
│ [×] [IMG] Товар 1              800 ₽   [−] 2 [+]   1600 ₽  │
│ [×] [IMG] Товар 2              500 ₽   [−] 1 [+]    500 ₽  │
│ [×] [IMG] Товар 3              300 ₽   [−] 3 [+]    900 ₽  │
├─────────────────────────────────────────────────────────────┤
│ Промокод: [__________] [Применить]                          │
├─────────────────────────────────────────────────────────────┤
│                                          Подытог:  3000 ₽   │
│                                          Скидка:   -300 ₽   │
│                                          Доставка: ~290 ₽   │
│                                          ─────────────────  │
│                                          ИТОГО:    2990 ₽   │
│                                                             │
│ [Продолжить покупки]           [ ОФОРМИТЬ ЗАКАЗ ]           │
└─────────────────────────────────────────────────────────────┘

8. CHECKOUT (ОФОРМЛЕНИЕ)

Шаги

Шаг Содержимое Best Practice
1. Контакт Телефон, имя Минимум полей
2. Доставка Способ + адрес Выбор из списка
3. Оплата Способ оплаты Карта, СБП, наличные
4. Подтверждение Проверка + оплата Итого, кнопка

Поля (минимум)

Best Practices

Способы доставки

Способ Описание
Курьер Адрес + время
Почта России ФИО + индекс + адрес
ПВЗ СДЭК/Boxberry Выбор точки на карте
Яндекс Доставка Интеграция
Самовывоз Адрес магазина

Способы оплаты

Способ Описание
Карта онлайн Visa, MC, МИР
СБП QR-код или deeplink
SberPay Кнопка Сбера
T-Pay Кнопка Тинькофф
Наличные При получении
Картой курьеру При получении

Wireframe

┌─────────────────────────────────────────────────────────────┐
│ Оформление заказа                                           │
│ [1 Контакт] ─ [2 Доставка] ─ [3 Оплата] ─ [4 Готово]       │
├─────────────────────────────────┬───────────────────────────┤
│                                 │ Ваш заказ                 │
│ Контактные данные               │                           │
│ Телефон*: [+7 ___ ___ __ __]    │ [IMG] Товар 1    1600 ₽  │
│ Имя*:     [________________]    │ [IMG] Товар 2     500 ₽  │
│ Email:    [________________]    │ [IMG] Товар 3     900 ₽  │
│                                 │                           │
│ Доставка                        │ Товары:         3000 ₽   │
│ ○ Курьер (от 290 ₽)            │ Скидка:         -300 ₽   │
│ ○ ПВЗ СДЭК (от 200 ₽)          │ Доставка:        290 ₽   │
│ ○ Почта России (от 350 ₽)      │ ─────────────────────────│
│ ○ Самовывоз (бесплатно)        │ ИТОГО:          2990 ₽   │
│                                 │                           │
│ Оплата                          │                           │
│ ○ Картой онлайн                 │                           │
│ ○ СБП                           │                           │
│ ○ SberPay                       │                           │
│ ○ Наличными при получении       │                           │
│                                 │                           │
│ [ ОФОРМИТЬ ЗАКАЗ ]              │                           │
└─────────────────────────────────┴───────────────────────────┘

9. СТРАНИЦА "СПАСИБО"

Элементы

Элемент Описание
Заголовок "Спасибо за заказ!"
Номер заказа #2025-001234
Статус "Ожидает оплаты" / "Оплачен"
Детали Товары, сумма, доставка
Следующий шаг Что делать дальше
Кнопки На главную, Мои заказы

Best Practices

10. СТАТИЧНЫЕ СТРАНИЦЫ

Обязательные

Страница Содержимое
О нас История, миссия, команда
Контакты Телефон, email, адрес, карта, форма
Доставка Способы, сроки, стоимость
Оплата Способы оплаты
Возврат Условия возврата
Политика Конфиденциальность
Оферта Публичная оферта

Best Practices

11. UI-KIT

Компоненты

Компонент Варианты
Кнопки Primary, Secondary, Ghost, Icon
Формы Input, Select, Checkbox, Radio, Textarea
Типографика H1-H6, body, caption
Цвета Primary, Secondary, Success, Error, Neutral
Иконки Набор (Lucide, Heroicons)
Badges Sale, New, Hit
Модалки Alert, Confirm, Custom
Тосты Success, Error, Info
Skeleton Загрузка контента

Best Practices

Резюме

Компонент Приоритет Сложность
Header Критично Средняя
Footer Важно Низкая
Главная Критично Высокая
Категория Критично Высокая
Карточка (мини) Критично Средняя
Страница товара Критично Высокая
Корзина Критично Средняя
Checkout Критично Высокая
Спасибо Важно Низкая
Статичные Важно Низкая
UI-Kit Критично Средняя

Версия: 1.0.0