Если у магазина уже есть сайт, для знакомства с ассортиментом в Telegram необязательно заново заводить все карточки. Можно использовать существующие данные и представить их в удобной мобильной витрине. Тогда человек ищет товар внутри мессенджера, смотрит фотографии и переходит на сайт для следующего действия.
Для ШУМ и SHEDEUX я подготовил такие витрины как демонстрационные примеры. Проект соединяет сбор каталога, HTML-интерфейс и Telegram-бота. Он показывает устройство решения на двух разных источниках и визуальных стилях: от получения сведений о товаре до открытия нужной страницы магазина.
Работу можно рассмотреть.
Листайте кадры и открывайте их в полном размере. Под каждым материалом — его источник и этап работы.
Что можно увидеть
ШУМ и SHEDEUX — две демонстрационные витрины, подготовленные для проверки каталога и мобильного сценария выбора.
- Два интерфейса с разным визуальным стилем, построенные на материалах соответствующих магазинов.
- Путь выбора: категории, поиск, карточка с фотографиями и переход на страницу товара в магазине.
- Работу с неполными данными: если цена не получена из источника, витрина не подставляет выдуманную сумму. Это пилотные примеры, не подтверждение коммерческого запуска.
Содержание статьи
- Открыть сайты проекта
- Галерея и видео
- Какую задачу решают эти примеры
- Почему у двух магазинов разные источники
- Как каталог становится мобильной витриной
- Что происходит внутри карточки товара
- Как обработали товары без указанной цены
- Как каталог передаётся Telegram боту
- Что предусмотрено для обновления данных
- Что можно повторить в другом магазине
Какую задачу решают эти примеры
Основной сценарий прост: открыть ассортимент в привычной среде Telegram, найти интересующую модель и рассмотреть её. Для демонстрации мы использовали материалы существующих сайтов брендов. Витрина получает сведения о товарах, а покупатель видит их через отдельный интерфейс, приспособленный к небольшому экрану.
Моя задача заключалась в организации маршрута и выборе функций, которые можно показать на готовом каталоге. Код и оформление создавались с помощью ИИ-инструментов. Получившиеся примеры позволяют обсуждать будущий продукт предметно: что пользователь ищет, как открывает карточку и куда переходит дальше.
Почему у двух магазинов разные источники
Для ШУМ сборщик получает данные через JSON API InSales. API здесь означает способ запросить сведения у системы магазина в готовом формате. Для SHEDEUX используется карта страниц сайта и разметка Product — структурированное описание товара, размещённое на его странице.
Оба маршрута приводят данные к каталогу, который читает витрина. Это позволяет отделить получение информации от её показа. Для похожего внедрения сначала нужно разобраться, какой источник доступен: штатный обмен данными или содержимое страниц. Затем определить, какие поля действительно можно получить и где остаются вопросы.
Как каталог становится мобильной витриной
Веб-интерфейс загружает подготовленный каталог и строит сетку товаров. В ней есть поиск и категории: посетитель может сузить выбор по разделу или найти модель текстовым запросом. Эти функции помогают превратить набор карточек в последовательность действий, удобную для знакомства с ассортиментом.
Два интерфейса сохраняют визуальные признаки брендов. У ШУМ используется тёмное оформление с оранжевым акцентом, у SHEDEUX — светлое с коралловым. В SHEDEUX предусмотрена адаптация темы к системной настройке. Так общая механика каталога сочетается с отдельным характером каждого примера.
Что происходит внутри карточки товара
Карточка открывает фотографии и галерею с перелистыванием. Посетитель может рассмотреть товар и добавить его в избранное. Список избранного хранится на устройстве: в этой версии он помогает вернуться к выбранным моделям в том же браузерном контексте.
Кнопка «Купить на сайте» ведёт на страницу соответствующего товара. Это определяет границу пользовательского пути: витрина помогает выбрать и посмотреть, а дальнейшая работа проходит в интернет-магазине. Для первого проекта такой маршрут позволяет сфокусироваться на качестве поиска, карточки и перехода к нужному предложению.
Как обработали товары без указанной цены
У части товаров ШУМ исходный каталог не содержит заполненной цены. В демонстрационном решении для таких записей предусмотрена формулировка «Цена по запросу» с переходом на сайт. Значение не достраивается по похожим моделям и не превращается в произвольную сумму.
Это небольшое правило показывает важный принцип работы с данными: интерфейс должен отражать то, что известно из источника. Для магазина можно согласовать и другой следующий шаг — например, обращение к сотруднику. Но сначала нужно определить, кто предоставляет ответ и как он связан с конкретным товаром.
Как каталог передаётся Telegram боту
Бот использует тот же подготовленный каталог. В нём предусмотрены просмотр категорий, переход между страницами выдачи, карточка с фотографией и поиск обычным текстом. Кнопка запуска витрины связывает диалоговый способ выбора с более подробным визуальным интерфейсом.
Так посетитель получает два входа в ассортимент: через сообщение или через Mini App. Для дальнейшего внедрения важно проверить их согласованность на телефоне. Человек должен находить нужный товар, видеть подходящие сведения и попадать на правильную страницу. Такой полный проход показывает удобство решения лучше отдельного снимка экрана.
Что предусмотрено для обновления данных
Сборщики записывают новый каталог во временный файл и затем заменяют готовый. Это помогает избежать ситуации, когда интерфейс читает частично записанные данные. В документации также предусмотрено сохранение предыдущего каталога при недоступности источника. Для повторяемой витрины важна аккуратная передача каждого обновления.
Расписание обновления и размещение описаны как следующие действия для подключения. В данном кейсе речь идёт о подготовленном демонстрационном решении. Перед запуском магазина потребуется проверить источник, открытие Mini App, ответ бота и переходы. После этого можно определить, как сопровождать каталог в ежедневной работе.
Что можно повторить в другом магазине
Начать стоит с небольшого набора товаров и одного сценария выбора. Сначала получить сведения, затем показать поиск, карточку и переход на сайт. На таком примере легко обсудить визуальный стиль и обнаружить проблемы входных данных: отсутствующие цены, фотографии или ссылки.
После проверки можно добавлять функции по реальной потребности магазина. Этот кейс помогает понять, как Telegram дополняет существующий каталог и где проходит граница первого этапа. Важен конкретный путь пользователя и проверяемый выход каждого шага: запись товара, экран карточки и соответствующая страница сайта.
ШУМ и SHEDEUX показывают два демонстрационных варианта витрины из существующего каталога. Источник даёт данные, интерфейс помогает выбирать, бот открывает дополнительный путь поиска. Такой пример позволяет согласовать первый этап продукта до расширения функций и запуска для посетителей.
Подготовим Telegram витрину вашего каталога
Расскажите, где сейчас хранится ассортимент и как клиент выбирает товар. Мы разберём источник данных, подготовим первый сценарий и поможем с внедрением или обучением команды.
