# Магазин

Витрина магазина проекта прямо в приложении: каталог, карточка товара, корзина, оформление и заказы покупателя. Товары, цены, остатки, доставку и оплату элементы берут из магазина — в приложении их не заводят. Как устроен магазин и как витрина связана с блоками «Оформить заказ» и «Оплата заказа» — в разделе [Магазин](https://support.watbot.ru/shop/sales).

В каждом элементе сначала выбирается **«Магазин»** — магазин проекта, товары которого показывает элемент. В конструкторе элементы показывают настоящие товары этого магазина.

Как добавлять элементы и что у них общего — на странице [Элементы экрана](https://support.watbot.ru/mini-apps/elements).

| Элемент | Что показывает | Выход |
|---|---|---|
| [«Категории магазина»](https://support.watbot.ru/mini-apps/elements/shop#категории-магазина) | Категории каталога | Всегда — «Категория N» |
| [«Товары магазина»](https://support.watbot.ru/mini-apps/elements/shop#товары-магазина) | Список товаров с поиском и отбором | С отметкой «Открывать товар по нажатию» — «Товар N» |
| [«Карточка товара»](https://support.watbot.ru/mini-apps/elements/shop#карточка-товара) | Один товар: фото, цена, варианты, описание | — |
| [«Корзина»](https://support.watbot.ru/mini-apps/elements/shop#корзина) | Товары в корзине и итог | Всегда — надпись кнопки оформления |
| [«Оформление заказа»](https://support.watbot.ru/mini-apps/elements/shop#оформление-заказа) | Поля покупателя, доставка, оплата, итог | Всегда — надпись кнопки |
| [«Мои заказы»](https://support.watbot.ru/mini-apps/elements/shop#мои-заказы) | Заказы этого покупателя | С отметкой «Открывать заказ по нажатию» — «Заказ N» |

Обычный путь покупателя: категории → товары категории → карточка товара → корзина → оформление → блок «Оформить заказ». Выбор каждого экрана уходит в переменную, следующий экран читает её подстановкой.

## Категории магазина

Категории каталога, из которых покупатель выбирает раздел.

![Элемент «Категории магазина»: категории плитками и настройки элемента](https://support.watbot.ru/_media/ru/02-mini-apps/15-elements/_images/shop-categories.webp?v=1791781230)

- **«Показывать подкатегории»** — категория, подкатегории которой показать. Пусто — категории верхнего уровня.
- **«Вид»** — «Строками» или «Плитками».
- **«Показывать число товаров»** — сколько товаров в категории.
- **«Идентификатор категории в переменную»** — по умолчанию `categoryId`. По ней следующий экран покажет товары этой категории.
- **«Текст, когда ничего не найдено»**.

Выход «Категория N» есть всегда: по категории всегда переходят.

## Товары магазина

Список товаров: весь каталог или одна категория, с поиском, панелью отбора и кнопкой «В корзину».

![Элемент «Товары магазина»: товары плиткой со строкой поиска и настройки элемента](https://support.watbot.ru/_media/ru/02-mini-apps/15-elements/_images/shop-products.webp?v=1791781230)

**Что показывать:**

- **«Категория»** — пусто — весь каталог. Категория показывается вместе с подкатегориями.
- **«Категория из переменной»** — подстановка с идентификатором категории, например `{{ categoryId }}` из элемента «Категории». Переменная важнее выбранной выше; пуста — показывается весь каталог.
- **«Вид»** — «Строками», «Карточками» или «Плиткой».
- **«Скруглённые углы фото»**, у карточек и плитки — **«Высота фото, px»** (фото вписывается в эту высоту целиком, не обрезаясь; 0 — своей высотой) и **«Листать фото в карточке»** — несколько фото товара листают прямо в списке.

**«Отбор»:**

- **«Сортировка»** — «Сначала новые», «Сначала дешёвые», «Сначала дорогие», «По названию».
- **«Товаров за раз»** — до 50; следующие подгрузятся при прокрутке с отметкой «Подгружать при прокрутке». «Надпись при подгрузке» — текст в это время.
- **«Только в наличии»**.

**«Поиск и отбор»:**

- **«Строка поиска»** — ищет по названию и описанию, опечатки прощает. «Подсказка в строке поиска» — серый текст в пустой строке.
- **«Панель отбора»** — отбор по характеристикам магазина со счётчиками. Открывается окном по кнопке рядом с поиском; «Заголовок окна отбора» — его название. В панель попадают характеристики с включённым «Показывать в фильтрах» — [Категории, характеристики и фильтры](https://support.watbot.ru/shop/catalog).

**«Карточка товара»** в списке:

- **«Показывать старую цену»** — зачёркнутая цена, если она больше текущей.
- **«Кнопка «В корзину»»** и «Надпись на кнопке». У товара с вариантами на кнопке — «Выбрать»: вариант выбирают в карточке товара.
- **«Открывать товар по нажатию»** и **«Идентификатор товара в переменную»** — по умолчанию `productId`. По ней экран товара покажет карточку.
- **«Текст, когда ничего не найдено»**.

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

Один товар целиком: фотографии, цена, выбор варианта по опциям, описание и характеристики, кнопка «В корзину».

![Элемент «Карточка товара»: фото, цена и кнопка «В корзину» и настройки элемента](https://support.watbot.ru/_media/ru/02-mini-apps/15-elements/_images/shop-product.webp?v=1791781230)

- **«Какой товар показывать»** — обычно переменная, в которую элемент «Товары» кладёт выбранный товар: `{{ productId }}`.
- **«Что показывать»** — «Фотографии» (с отметками «Фото во всю ширину, без отступов по краям» и «Скруглённые углы фото»), «Описание», «Характеристики», «Показывать старую цену».
- **«Надпись на кнопке»** — вместо «В корзину».
- **«Текст, когда товара нет»** — товар могли снять с продажи или удалить. Пусто — «Товар не найден».

Как покупатель выбирает вариант — списком, кнопками, цветом или картинкой — задаётся в карточке товара в магазине.

В конструкторе элемент показывает образец по первому товару магазина: какой товар откроется у покупателя, заранее неизвестно.

## Корзина

Товары в корзине покупателя: количество, итог и кнопка оформления.

![Элемент «Корзина»: два товара, итог и кнопка «Оформить заказ» и настройки элемента](https://support.watbot.ru/_media/ru/02-mini-apps/15-elements/_images/shop-cart.webp?v=1791781230)

- **«Магазин»** — корзина у покупателя общая с другими каналами этого магазина: товар, добавленный в чат-боте, виден и здесь.
- **«Показывать фото товаров»** и «Скруглённые углы фото».
- **«Оформление»** — «Надпись на кнопке» (по умолчанию «Оформить заказ») и «Цвет». С этой кнопки ведёт связь на экран оформления заказа.
- **«Текст пустой корзины»** — пусто — «Корзина пуста».

В конструкторе корзина показывает образец из первых товаров магазина.

Выход корзины — кнопка оформления, он есть всегда.

## Оформление заказа

Поля покупателя, выбор доставки и оплаты и итог заказа.

![Элемент «Оформление заказа»: поля покупателя, итог и кнопка «Оформить заказ» и настройки элемента](https://support.watbot.ru/_media/ru/02-mini-apps/15-elements/_images/shop-checkout.webp?v=1791781230)

- **«Магазин»** — заказ соберётся из корзины этого магазина.
- **«Что спрашивать»** — «Имя», «Телефон», «Почта», «Комментарий». Обязательность полей и минимальную сумму задают настройки магазина. Здесь можно не спрашивать то, что этому экрану не нужно: известные имя, телефон и почта подставятся сами.
- **«Показывать итог»**.
- **«Надпись на кнопке»** (по умолчанию «Оформить заказ») и «Цвет». С этой кнопки ведёт связь на блок «Оформить заказ».
- **«Текст, когда корзина пуста»**.

Доставка и оплата — способы из настроек магазина. Адрес покупатель вводит, если выбранная доставка его требует.

## Мои заказы

Заказы этого покупателя с номером, датой, статусом и суммой.

![Элемент «Мои заказы»: заказы покупателя и настройки элемента](https://support.watbot.ru/_media/ru/02-mini-apps/15-elements/_images/shop-orders.webp?v=1791781230)

- **«Сколько заказов показывать»** — от 1 до 20.
- **«Открывать заказ по нажатию»** и **«Идентификатор заказа в переменную»** — по умолчанию `orderId`. По ней экран заказа покажет подробности, а блок «Оплата заказа» — ссылку на оплату.
- **«Текст, когда заказов нет»** — пусто — «Заказов пока нет».