Внешний вид и основные страницы¶

Клиентское приложение Tellem покупатель может открыть тремя способами:

• Сайт в браузере — по адресу магазина.
• Внутри Telegram — если вы подключили бота, приложение открывается из чата с ним и разворачивается на весь экран.
• Приложение на телефоне (PWA) — устанавливается из профиля кнопкой «Установить приложение». Имя и иконку установленного приложения вы задаёте в CRM: «Настройки → PWA». Если название там не заполнено, используется домен магазина.

Экраны, цвета и наполнение главной во всех трёх вариантах одинаковы — всё задаётся в CRM.

Главный экран, каталог, поиск и карточки товаров открываются без входа. Корзина, избранное и заказы требуют аккаунта — приложение само предложит войти, когда это понадобится.

Главный экран¶

Сверху вниз:

1. Шапка — название текущей точки продаж и её адрес. Нажатие открывает окно «Выберите зону продаж» для переключения между вашими точками. Справа — кнопка профиля.
2. Баннеры и подборки — большой верхний баннер, баннеры и подборки товаров и категорий. Состав и порядок блоков настраивается в CRM: «Каталог → Оформление», вкладка «Главный экран». Каждый блок привязывается к магазинам, на главном экране которых он показывается. Изображения витрины поддерживают GIF-анимацию.
3. Плитки «Каталог» и «Избранное» — быстрый переход в полный каталог и в список избранного.
4. Блок «Уже заказывали» — карусель ранее купленных товаров с кнопкой «Все», открывающей полный список. Блок появляется у вошедшего покупателя после первого заказа; у гостя и покупателя без заказов его нет.
5. Нижняя панель — кнопка «домой», пилюля поиска и кнопка корзины. Кнопка корзины показывает сумму и количество товаров и появляется, как только в корзине есть хотя бы один товар; при пустой корзине её нет.

Каталог¶

Плитка «Каталог» на главной открывает сетку корневых категорий. Внутри категории — её подкатегории и сетка товаров. С карточки товара в сетке можно сразу добавить товар в корзину кнопкой «Добавить» и отметить его сердечком в избранное.

Поиск¶

Открывается из пилюли поиска в нижней панели — она есть на всех основных экранах. Поле с подсказкой «Что ищете?» ищет по товарам и категориям каталога по мере ввода; результаты обновляются без кнопки «Найти». Если ничего не нашлось, покупатель видит «Упс, ничего не найдено» с советом изменить запрос.

Карточка товара¶

• Фотогалерея: листание фото, нажатие открывает полноэкранный просмотр.
• Варианты товара: если у товара несколько вариантов (размер, цвет и т. п.), покупатель переключается между ними прямо в карточке.
• Цена, наличие («В наличии: N» или «Нет в наличии»), артикул с копированием по нажатию.
• Секции «Описание» и «Характеристики».
• Кнопка «Поделиться» — копирует ссылку на товар; по ней товар открывается и в Telegram, и в браузере.
• Кнопка «В корзину» добавляет товар; после добавления кнопка меняется на переход в корзину.
• Кнопка «Купить» открывает корзину, где отмечен только этот товар, — оформление затрагивает только его.

Избранное¶

Товары добавляются в избранное сердечком на карточке товара — в каталоге, поиске и на самой карточке. Список открывается плиткой «Избранное» на главной. На экране «Избранное» есть кнопка «Очистить» с подтверждением.

Корзина¶

• У каждой позиции — чекбокс. В заказ попадают только отмеченные позиции: можно оформить часть корзины, остальное останется в ней.
• «Выбрать все» отмечает все позиции разом, «Удалить» убирает отмеченные с подтверждением; после удаления доступна кнопка «Вернуть».
• Количество каждой позиции меняется в её строке.
• Внизу — счётчик «Товаров: N», строка «Итого» и кнопка «Оформить заказ на <сумма>», которая ведёт на экран «Оформление заказа».

Профиль¶

Кнопка профиля находится в шапке главного экрана. Гостю профиль тоже открывается — в нём доступны выбор темы, языка и установка приложения; остальные разделы появляются после входа.

У вошедшего покупателя в профиле:

• Карточки быстрого доступа: бонусный счёт, «Мои заказы» и «Адреса доставки» со счётчиками. Карточка бонусов показывается, когда в CRM включена бонусная система («Маркетинг → Бонусы»); при выключенной системе её нет. Экран «Бонусы» показывает баланс, правила начисления и историю операций.
• Зона продаж — текущая точка; нажатие открывает то же окно «Выберите зону продаж», что и шапка главной.
• «Личные данные» — редактирование имени, фамилии, телефона и e-mail. Новый e-mail подтверждается кодом из письма.
• «Тема интерфейса» — переключатель «Системная» / «Светлая» / «Тёмная».
• «Язык интерфейса» — «Русский» / «English».
• «Рассылки» — согласие на маркетинговые письма, включается и выключается тумблером.
• «Push-уведомления» — уведомления о статусах заказов в браузере и установленном приложении. На iPhone и iPad они приходят только в установленное приложение — интерфейс подскажет это покупателю.
• «Активные сессии» — список устройств с кнопкой «Выйти со всех устройств».
• «Поддержка» — контакты, которые вы заполнили в CRM: «Настройки → Поддержка». Если контактов нет, покупатель видит «Контакты поддержки появятся позже».
• «Установить приложение» — установка PWA. Строка скрыта внутри Telegram и на устройстве, где приложение уже установлено. В Safari на iPhone и iPad вместо системного диалога показывается инструкция: «Откройте меню „Поделиться“ в Safari и выберите „На экран «Домой»“».
• «О приложении» — информация о платформе и версия сборки.
• Привязка способов входа (Telegram и внешние сервисы) кнопками «Привязать» / «Отвязать».
• «Выйти» — с подтверждением.

Регистрация, восстановление пароля, привязка способов входа, адреса и активные сессии подробно описаны на странице «Аккаунт покупателя». Отдельная инструкция по PWA и push — «Установка и push-уведомления».

Заказы¶

Экран «Заказы» открывается из карточки «Мои заказы» в профиле. Каждый заказ показан карточкой «Заказ #N» с датой, суммой и бейджем статуса.

Детали заказа — две вкладки:

• «Детали» — статус, дата создания, получатель и его номер, способ получения и оплаты, стоимость доставки, сумма заказа, списанные и начисленные бонусы, «Итого».
• «Товары» — состав заказа с фото, количеством и ценами; нажатие на строку открывает карточку товара.

Действия на вкладке «Детали» зависят от статуса заказа:

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

Фирменные цвета и тема¶

Цвета магазина задаёт владелец в CRM: «Каталог → Оформление», вкладка «Цветовая схема». Отдельно для светлой и тёмной темы настраиваются «Акцентный цвет», «Цвет фона», «Цвет текста», «Цвет успеха» и «Цвет ошибки»; кнопка «Вернуть цвета по умолчанию» сбрасывает схему. Настроенные цвета применяются всем покупателям сразу.

Светлую или тёмную тему выбирает сам покупатель в профиле («Тема интерфейса»). Вариант «Системная» следует настройке операционной системы устройства.