Витрина открывается в браузере по ссылке <домен-тенанта>/shop. Отдельный пункт «Магазин» есть в навигационном меню на главной странице сайта. Войти в аккаунт не нужно — магазин полностью публичный.

На странице товара адрес выглядит так: /shop/p/<артикул>. Страница статуса заказа после оплаты: /shop/order/<номер-заказа>.

Витрина (/shop)

Шапка (верхняя панель, зафиксирована при прокрутке):

• Логотип и название сервиса — ссылка на главную страницу (/).
• Плашка «Магазин запчастей» — показывает, что вы в магазине.
• Поле поиска по запчастям.
• Переключатели языка (RU / ET / EN) — если сервис работает на нескольких языках. Выбор сохраняется в cookie на год; страница перезагружается.
• Кнопка смены темы (светлая/тёмная). Выбор сохраняется в localStorage.
• Кнопка «Корзина» со счётчиком позиций. При переходе со страницы товара по хэшу #cart корзина открывается автоматически.

Баннер-герой (тёмный блок вверху): Название сервиса и заголовок «Магазин запчастей» с кратким описанием. Оформление в цвете бренда вашего сервиса. Только информационный, не кликабельный.

Полоса категорий: Чипы-кнопки: «Все», затем категории из вашего склада (тормоза, двигатель, фильтры и т.д.). При выборе категории появляются подкатегории строкой ниже.

OEM-баннер (появляется при фильтре по OEM-номеру): Синяя плашка «OEM: <номер>» с кнопкой «✕» для сброса фильтра.

Счётчик результатов: Строка «N позиций» над сеткой товаров (число выделено зелёным). Скрыта, если товаров нет.

Сетка товаров (карточки): Каждая карточка содержит:

• Фото товара (или заглушка 🔧 / настраиваемая в /admin).
• Точки-индикаторы под фото, если фотографий несколько.
• Плашка бренда.
• Название товара (ссылка на страницу товара).
• Артикул (SKU) и OEM-номер (кликабельный).
• Краткое описание.
• Цветной статус наличия (зелёный / жёлтый / красный).
• Цена крупным шрифтом.
• Степпер количества (−/число/+) и кнопка «В корзину».
• Подсказка о сплите, если часть товара есть на складе, часть — под заказ.

Полоса доверия (внизу страницы): Четыре иконки с текстом: Гарантия совместимости, Быстрая доставка, Возврат 30 дней, Цены поставщика. Только информационный блок.

Боковая корзина (drawer): Выезжает справа при нажатии «Корзина». Список позиций с управлением количеством, итоговая сумма, кнопки оформить/продолжить покупки.

Страница товара (/shop/p/:ref)

Шапка: логотип ведёт на /shop. Переключателей языка на странице товара нет — только кнопка темы и кнопка «Корзина».

Ссылка «← Продолжить покупки»: возврат на витрину.

Хлебные крошки: Магазин запчастей / Категория / Подкатегория / Название товара. Все части кроме последней кликабельны.

Галерея (слева):

• До 6 миниатюр в столбце — клик переключает главное фото.
• Большое главное фото. Клик открывает лайтбокс (полноэкранный просмотр).

Блок покупки (справа, зафиксирован при прокрутке):

• Плашка бренда.
• Название товара.
• Артикул.
• OEM-чипы (ссылки → фильтр каталога по этому номеру).
• Цена.
• Статус наличия (цветная плашка: зелёная / жёлтая / красная).
• Степпер количества и кнопка «В корзину».
• Подсказка о сплите, если часть под заказ.

Блок «Описание»: появляется только если описание заполнено.

Блок «OEM / кросс-номера»: список OEM-номеров в виде ссылок → витрина с тем же номером.

Блок «Аналоги по номеру»: другие товары в вашем каталоге с тем же первым OEM-номером данного товара. Каждый аналог показывает: иконку/фото, бренд и название, артикул (если есть), цену. Блок скрыт, если аналогов нет или у товара нет OEM-номеров.

Лайтбокс (полноэкранный просмотр фото): Открывается при клике на главное фото. Тёмный фон, большое фото, стрелки «‹»/«›», счётчик «1/N», кнопка «✕».

Боковая корзина: та же, что на витрине.

Страница заказа (/shop/order/:id)

Открывается автоматически после оплаты или по ссылке из письма.

Структура карточки заказа:

• Галочка «✓» и текст «Спасибо за заказ!» — показываются только если статус paid, ready или picked_up.
• Номер заказа — крупным шрифтом.
• Статус — цветная таблетка. Возможные значения:

- «Ожидает оплаты» (жёлтый) - «Оплачен» (зелёный) - «Готов к выдаче» (зелёный) - «Выдан» (зелёный) - «Отменён» (красный) - «Возврат» (красный)

• Список позиций: название товара × количество, сумма строки. Если часть товара со склада, а часть под заказ — строка содержит пометку «N со склада · M под заказ».
• Итого (grandTotal) — общая сумма заказа.
• Кнопка «Продолжить покупки» — ссылка на витрину /shop.

Витрина /shop

Корзина (боковая панель)

Форма оформления (внутри боковой панели)

Страница товара /shop/p/:ref

Лайтбокс (полноэкранный просмотр фото, только на странице товара)

Страница заказа /shop/order/:id

Боковая панель корзины

Открывается при нажатии кнопки «Корзина» в шапке (или автоматически при переходе на /shop#cart со страницы товара). Выезжает справа, фон страницы затемняется.

Состояние: корзина пуста Показывает заголовок «Корзина» и текст «Корзина пуста».

Состояние: есть товары Список позиций. Каждая позиция: название, количество (кнопки «−»/«+»), цена строки, кнопка «✕ Удалить». Если часть товара со склада, а часть под заказ — строка выделена жёлтым с пометкой «X со склада · Y под заказ».

При наличии товаров «под заказ» — жёлтая плашка «⏳ N под заказ» под списком.

Блок итога: «Итого» и сумма крупным шрифтом, кнопки «Оформить заказ →» и «Продолжить покупки».

Форма оформления (внутри панели корзины)

Открывается при нажатии «Оформить заказ». Не отдельная страница — панель остаётся открытой.

Поля:

• Имя — текстовое, обязательное.
• Email — email, обязательное. На него придёт письмо с заказом.
• Телефон (необязательно) — телефон, можно оставить пустым.

Плашка «📍 Самовывоз из сервиса» напоминает, что доставки нет — за заказом нужно приехать лично.

Кнопки:

• «Перейти к оплате» — отправляет данные; если имя или email пусты, не реагирует (нет сообщения об ошибке — поля просто нужно заполнить). После успешной отправки браузер уходит на страницу оплаты платёжной системы.
• «Назад в каталог» — возвращает к списку товаров в корзине (без потери корзины).

Лайтбокс (полноэкранный просмотр фото)

Открывается на странице товара при клике на главное большое фото. Показывает фото на весь экран с тёмным фоном. Если фотографий несколько — появляются стрелки «‹»/«›» и счётчик «1/N». Закрывается: кнопка «✕», клик по фото или фону, клавиша Escape. На телефоне — свайп.