# Магазин

Вітрина магазину проєкту просто в застосунку: каталог, картка товару, кошик, оформлення та замовлення покупця. Товари, ціни, залишки, доставку й оплату елементи беруть із магазину — у застосунку їх не створюють. Як влаштовано магазин і як вітрина пов'язана з блоками «Оформити замовлення» і «Оплата замовлення» — у розділі [Магазин](https://support.jetbot24.ru/uk/shop/sales).

У кожному елементі спочатку вибирається **«Магазин»** — магазин проєкту, товари якого показує елемент. У конструкторі елементи показують справжні товари цього магазину.

Як додавати елементи й що в них спільного — на сторінці [Елементи екрана](https://support.jetbot24.ru/uk/mini-apps/elements).

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

Звичайний шлях покупця: категорії → товари категорії → картка товару → кошик → оформлення → блок «Оформити замовлення». Вибір на кожному екрані потрапляє у змінну, наступний екран читає її підстановкою.

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

Категорії каталогу, з яких покупець вибирає розділ.

![Елемент «Категорії магазину»: категорії плитками та налаштування елемента](https://support.jetbot24.ru/_media/uk/02-mini-apps/15-elements/_images/shop-categories.webp?v=1791786051)

- **«Показувати підкатегорії»** — категорія, підкатегорії якої показати. Порожньо — категорії верхнього рівня.
- **«Вигляд»** — «Рядками» або «Плитками».
- **«Показувати кількість товарів»** — скільки товарів у категорії.
- **«Ідентифікатор категорії в змінну»** — за замовчуванням `categoryId`. За ним наступний екран покаже товари цієї категорії.
- **«Текст, коли нічого не знайдено»**.

Вихід «Категорія N» є завжди: за категорією завжди переходять.

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

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

![Елемент «Товари магазину»: товари плиткою з рядком пошуку та налаштування елемента](https://support.jetbot24.ru/_media/uk/02-mini-apps/15-elements/_images/shop-products.webp?v=1791786051)

**Що показувати:**

- **«Категорія»** — порожньо — увесь каталог. Категорія показується разом із підкатегоріями.
- **«Категорія зі змінної»** — підстановка з ідентифікатором категорії, наприклад `{{ categoryId }}` з елемента «Категорії магазину». Змінна важливіша за вибрану вище; порожня — показується весь каталог.
- **«Вигляд»** — «Рядками», «Картками» або «Плиткою».
- **«Заокруглені кути фото»**, у карток і плитки — **«Висота фото, px»** (фото вписується в цю висоту повністю, без обрізання; 0 — власною висотою) і **«Гортати фото в картці»** — кілька фото товару гортають просто в списку.

**«Добір»:**

- **«Сортування»** — «Спочатку нові», «Спочатку дешеві», «Спочатку дорогі», «За назвою».
- **«Товарів за раз»** — до 50; наступні підвантажаться під час прокручування з позначкою «Підвантажувати під час прокручування». «Напис під час завантаження» — текст у цей час.
- **«Лише в наявності»**.

**«Пошук і добір»:**

- **«Рядок пошуку»** — шукає за назвою та описом, пробачає одруківки. «Підказка в рядку пошуку» — сірий текст у порожньому рядку.
- **«Панель добору»** — добір за характеристиками магазину з лічильниками. Відкривається вікном за кнопкою поруч із пошуком; «Заголовок вікна добору» — його назва. До панелі потрапляють характеристики з увімкненим «Показувати у фільтрах» — [Категорії, характеристики та фільтри](https://support.jetbot24.ru/uk/shop/catalog).

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

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

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

Один товар повністю: фотографії, ціна, вибір варіанта за опціями, опис і характеристики, кнопка «У кошик».

![Елемент «Картка товару»: фото, ціна та кнопка «У кошик» і налаштування елемента](https://support.jetbot24.ru/_media/uk/02-mini-apps/15-elements/_images/shop-product.webp?v=1791786051)

- **«Який товар показувати»** — зазвичай змінна, у яку елемент «Товари магазину» кладе вибраний товар: `{{ productId }}`.
- **«Що показувати»** — «Фотографії» (з позначками «Фото на всю ширину, без відступів по краях» і «Заокруглені кути фото»), «Опис», «Характеристики», «Показувати стару ціну».
- **«Напис на кнопці»** — замість «У кошик».
- **«Текст, коли товару немає»** — товар могли зняти з продажу або видалити. Порожньо — «Товар не знайдено».

Як покупець вибирає варіант — списком, кнопками, кольором чи картинкою — задається в картці товару в магазині.

У конструкторі елемент показує зразок за першим товаром магазину: який товар відкриється в покупця, заздалегідь невідомо.

## Кошик

Товари в кошику покупця: кількість, підсумок і кнопка оформлення.

![Елемент «Кошик»: два товари, підсумок і кнопка «Оформити замовлення» та налаштування елемента](https://support.jetbot24.ru/_media/uk/02-mini-apps/15-elements/_images/shop-cart.webp?v=1791786051)

- **«Магазин»** — кошик у покупця спільний з іншими каналами цього магазину: товар, доданий у чат-боті, видно й тут.
- **«Показувати фото товарів»** і «Заокруглені кути фото».
- **«Оформлення»** — «Напис на кнопці» (за замовчуванням «Оформити замовлення») і «Колір». Від цієї кнопки веде зв'язок на екран оформлення замовлення.
- **«Текст порожнього кошика»** — порожньо — «Кошик порожній».

У конструкторі кошик показує зразок із перших товарів магазину.

Вихід кошика — кнопка оформлення, він є завжди.

## Оформлення замовлення

Поля покупця, вибір доставки й оплати та підсумок замовлення.

![Елемент «Оформлення замовлення»: поля покупця, підсумок і кнопка «Оформити замовлення» та налаштування елемента](https://support.jetbot24.ru/_media/uk/02-mini-apps/15-elements/_images/shop-checkout.webp?v=1791786051)

- **«Магазин»** — замовлення збереться з кошика цього магазину.
- **«Що запитувати»** — «Ім’я», «Телефон», «Пошта», «Коментар». Обов'язковість полів і мінімальну суму задають налаштування магазину. Тут можна не запитувати те, що цьому екрану не потрібне: відомі ім'я, телефон і пошта підставляться самі.
- **«Показувати підсумок»**.
- **«Напис на кнопці»** (за замовчуванням «Оформити замовлення») і «Колір». Від цієї кнопки веде зв'язок на блок «Оформити замовлення».
- **«Текст, коли кошик порожній»**.

Доставка й оплата — способи з налаштувань магазину. Адресу покупець вводить, якщо вибрана доставка її потребує.

## Мої замовлення

Замовлення цього покупця з номером, датою, статусом і сумою.

![Елемент «Мої замовлення»: замовлення покупця та налаштування елемента](https://support.jetbot24.ru/_media/uk/02-mini-apps/15-elements/_images/shop-orders.webp?v=1791786051)

- **«Скільки замовлень показувати»** — від 1 до 20.
- **«Відкривати замовлення після натискання»** і **«Ідентифікатор замовлення в змінну»** — за замовчуванням `orderId`. За ним екран замовлення покаже подробиці, а блок «Оплата замовлення» — посилання на оплату.
- **«Текст, коли замовлень немає»** — порожньо — «Замовлень поки немає».