> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Блок Upsells
> Блок Upsells корзины Aftersell — товарные предложения, выбранные Стратегией и показываемые в панели.
> Блок **Upsells** показывает товарные предложения в панели корзины, выбранные заданной вами **Стратегией**. Когда покупатель открывает корзину, блок выводит товары, которые ваша Стратегия возвращает на основе текущего содержимого корзины и настроенных вами правил таргетинга.
Увеличивайте средний чек, показывая релевантные товарные предложения в момент открытия корзины, с помощью Стратегии, которая выбирает, что показать, на основе содержимого корзины и ваших правил таргетинга.
В отличие от блока [**Product add-on**](/ru/aftersell/cart/product-add-on-block), который всегда показывает один выбранный вами товар, Upsells управляется Стратегией, решающей, что показать.
## Поведение
* Товары запрашиваются в реальном времени на основе текущей корзины покупателя, поэтому предложения отражают её фактическое содержимое.
* **Весь раздел скрывается, когда товары не разрешаются** — Стратегия не привязана, Стратегия ничего не возвращает или ни один из возвращённых товаров не доступен для покупки. Покупатели никогда не видят пустой раздел Upsells.
* Если возвращённое предложение содержит скидку, покупатель видит честное зачёркивание и значок скидки, а скидка применяется при оформлении заказа.
## Настройки
| Настройка | Что она контролирует | По умолчанию |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| **Title** | Заголовок с форматированным текстом над предложениями. Поддерживает жирный, курсив, выравнивание и цвет. | `You may also like` |
| **Add button text** | Надпись на кнопке добавления каждого товара. | `Add` |
| **Strategy** | Стратегия, выбирающая, какие товары показывать. | Стратегия Shopify AI, назначается автоматически |
| **Layout** | **Carousel** или **List**. | Carousel |
| **Maximum products** | Сколько товаров показывать максимум. Принимает `1`–`12`. | `4` |
| **Show compare-at price** | Показывать ли зачёркнутую цену «до скидки». | Вкл. |
| **Show product reviews** | Показывать ли звёздные рейтинги и количество отзывов на каждой карточке upsell. Рейтинги берутся из метаполей товара вашего приложения для отзывов и появляются только при наличии валидных данных отзывов. | Выкл. |
### Поддерживаемые приложения для отзывов
Поддерживаются следующие приложения для отзывов на основе метаполей: Shopify Product Reviews, Junip, Okendo, Growave, Fera, Stamped, Loox, REVIEWS.io, Automizely Reviews, Judge.me, Ali Reviews, Trustoo, Rivo, Rivyo и Vitals. Yotpo не поддерживается, поскольку использует отдельный API, а не метаполя товара.
## Дизайн
Блок Upsells имеет переопределения дизайна на уровне блока в его панели **Design**. Они переопределяют глобальные настройки дизайна корзины только для этого блока. Пустое значение наследует глобальную настройку.
### Оформление текста
Блок Upsells включает раздел **Text** в своих настройках Design. Используйте его для управления типографикой отдельных текстовых элементов на каждой карточке upsell. Выберите текстовый элемент из селектора, чтобы настроить его параметры:
| Настройка | Что она контролирует |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Text color** | Цвет выбранного текстового элемента. |
| **Font** | **Theme font** (наследует шрифт вашей темы) или **Custom font** (введите название шрифта, который уже загружает ваша тема). Доступно только для **Heading**. |
| **Size** | Размер шрифта в пикселях. |
| **Weight** | Насыщенность шрифта: Light, Regular, Medium, Semibold или Bold. |
| **Line height** | Межстрочный интервал как множитель размера шрифта (например, `1.4`). |
| **Letter spacing** | Межбуквенный интервал в пикселях. Отрицательные значения сжимают текст. |
Текстовые элементы, которые можно оформить, сгруппированы по категориям:
**Heading**
* **Heading** — заголовок раздела над карточками upsell (например, *You may also like*). Также поддерживает собственный шрифт. Жирность и цвет задаются в редакторе Rich Text выше.
**Product**
* **Product title** — название товара на каждой карточке upsell.
* **Review count** — количество отзывов, отображаемое при включённом **Show product reviews**.
**Pricing**
* **Price** — текущая цена на каждой карточке.
* **Compare-at price** — зачёркнутая исходная цена.
* **Discount** — надпись скидки (например, *20% off*).
Если оставить поле пустым, элемент сохраняет значение по умолчанию.
Клик по текстовому элементу прямо в предпросмотре корзины подсвечивает его и автоматически открывает его настройки в панели.
### Цвета плиток
| Настройка | Что она контролирует | По умолчанию |
| ------------------------- | ----------------------------------------- | ------------ |
| **Tile background color** | Цвет фона каждой карточки товара upsell. | Прозрачный |
| **Tile border color** | Цвет рамки каждой карточки товара upsell. | `#F6F6F7` |
### Отзывы
Когда включено **Show product reviews**, вы можете настроить цвета звёзд в разделе **Reviews** панели Design.
| Настройка | Что она контролирует | По умолчанию |
| -------------------- | ---------------------------------- | ------------ |
| **Star color** | Заполненная часть каждой звезды. | `#FDCC0D` |
| **Empty star color** | Незаполненная часть каждой звезды. | `#D1D5DB` |
## Размещение и ограничения
* **Область:** body или bottom.
* **Максимум:** 1 на состояние корзины — заполненная и пустая корзина получают каждая свой.
* **Состояние:** как заполненная, так и пустая корзина.
* Не добавляется по умолчанию. Не заблокирован — вы можете удалить или скрыть его.
## Выбор стратегии
Блок Upsells не приходит пустым: если Стратегия не задана, Aftersell использует стратегию Shopify AI вашего магазина — создавая её, если у вас её ещё нет, — и подставляет её, поэтому блок работает сразу. Откройте селектор **Strategy**, чтобы изменить её. Селектор содержит две группы:
**Quick start**
* **Create strategy from selected products** — выберите конкретные товары напрямую, и Стратегия будет создана для вас автоматически.
* **Create strategy from scratch** — открывает редактор Стратегий, чтобы вы могли создать правила, не покидая редактор корзины.
**Strategies**
* **Shopify AI recommendations** — создаёт Стратегию на основе собственных рекомендаций Shopify, называемую **Shopify AI recommended products** везде, где она появляется впоследствии. Этот пункт исчезает, как только она у вас есть, поскольку магазину нужна только одна стратегия Shopify AI.
* Ваши существующие Стратегии, перечисленные по названиям. Введите текст в поле поиска, чтобы отфильтровать их.
После выбора Стратегии её название появляется в строке стратегии внутри блока.
## Управление выбранной стратегией
После привязки Стратегии в строке стратегии появляется кнопка **•••** (многоточие). Нажмите её, чтобы открыть меню действий:
* **Edit strategy** — открывает редактор Стратегий в новой вкладке, поэтому ваша сессия редактора корзины и любые несохранённые изменения остаются нетронутыми. Эта опция недоступна для стратегии рекомендаций Shopify AI, которая управляется автоматически и не имеет редактируемых правил.
* **Remove from upsell** — отвязывает Стратегию от этого блока. Сама Стратегия не удаляется; она остаётся доступной в вашем списке Стратегий.
Редактирование Стратегии в новой вкладке не влияет на сессию редактора корзины — вы можете вернуться на вкладку редактора корзины и продолжить настройку без потери работы.
## Пользовательский шаблон
Поддерживает [пользовательский шаблон](/ru/aftersell/cart/custom-templates) на вкладке Code, который заменяет встроенную разметку этого блока вашим JSX. Вот props, которые он получает.
### Содержимое блока
| Prop | Тип | Для чего он |
| --------------- | ---------------------- | ------------------------------------------------------------------------------ |
| `title` | `string` | Заголовок раздела. |
| `addButtonText` | `string` | Надпись на кнопке добавления в корзину. |
| `layout` | `'carousel' \| 'list'` | Горизонтальная прокрутка или перенос. Ветвите вашу разметку по этому значению. |
| `upsells` | `UpsellCard[]` | Готовые к отображению товары. См. [структуру карточки](#the-upsell-card) ниже. |
| `isLoading` | `boolean` | `true`, пока товары upsell ещё загружаются. |
### Добавление в корзину
| Prop | Тип | Для чего он |
| ----------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
| `selectVariant` | `(productId: string, variantId: number) => void` | Выбирает вариант для товара. |
| `handleAdd` | `(productId: string) => void` | Добавляет выбранный вариант этого товара в корзину. |
| `addingProductId` | `string \| null` | Товар, добавляемый в данный момент, чтобы вы могли отключить только его кнопку. `null` в состоянии покоя. |
### Элементы управления каруселью
Актуальны только когда `layout` равен `'carousel'`.
| Prop | Тип | Для чего он |
| -------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------- |
| `trackRef` | `{ current: HTMLDivElement \| null }` | Прикрепите к вашему скроллеру через `ref={props.trackRef}`, чтобы стрелки могли его прокручивать. |
| `atStart` | `boolean` | `true`, когда лента у начального края. Отключите левую стрелку. |
| `atEnd` | `boolean` | `true`, когда лента у конечного края. Отключите правую стрелку. |
| `scrollByCard` | `(direction: 1 \| -1) => void` | Прокручивает ленту на одну карточку влево (`-1`) или вправо (`1`). |
### Карточка upsell
Каждый элемент в `upsells`:
| Поле | Тип | Для чего оно |
| ------------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `productId` | `string` | GID товара. Используйте его как ключ React и как цель добавления в корзину. |
| `title` | `string` | Заголовок товара. |
| `description` | `string` | Описание в виде обычного текста. `''`, если у товара его нет. |
| `url` | `string \| null` | URL страницы товара. `null`, если недоступен. |
| `imageUrl` | `string \| null` | Основное изображение. `null`, если у товара его нет. |
| `selectedVariantImageUrl` | `string \| null` | Собственное изображение выбранного варианта. `null`, если у варианта его нет — используйте `imageUrl` как резерв. |
| `variantTitle` | `string \| null` | Значения опций выбранного варианта (например, `Medium / Blue`), уже разрешённые. `null`, когда у варианта нет реального названия — пусто или используется плейсхолдер Shopify `Default Title`. Товар с одним именованным вариантом всё равно возвращает это название, поэтому защищайтесь через `{upsell.variantTitle && …}`, а не привязывайтесь к `hasMultipleVariants`. |
| `priceLabel` | `string` | Отображаемая цена, уже отформатированная. Цена со скидкой при её наличии, иначе цена варианта. |
| `compareAtLabel` | `string \| null` | Зачёркнутая исходная цена, уже отформатированная. `null`, когда зачёркивать нечего. |
| `discountLabel` | `string \| null` | Встроенная метка скидки, например `(20% off)`. `null`, когда скидки нет. |
| `review` | `object \| null` | `{ rating, count, stars }`, где `stars` — 5 предварительно отрендеренных URL изображений с уже учтённым дробным заполнением. Отображайте каждый как элемент изображения. `null`, когда отзывы выключены или у товара их нет. |
| `options` | `Array<{ name, values }>` | Группы опций для построения селекторов или свотчей. |
| `variants` | `array` | Комбинации вариантов. См. ниже. |
| `selectedVariantId` | `number` | Выбранный в данный момент вариант. Передавайте его в `selectVariant`. |
| `hasMultipleVariants` | `boolean` | Нужно ли вообще отображать селектор вариантов. |
| `vendor` | `string` | Производитель товара. |
| `selectedVariantImageUrl` | `string \| null` | Собственное изображение выбранного варианта. `null`, если его нет — используйте `imageUrl` как резерв. |
Каждый элемент в `variants` содержит `id`, `title`, `price` и `compareAtPrice` (сырые, неотформатированные, в основной единице валюты в виде строк), `availableForSale`, `imageUrl`, `sku` и `selectedOptions` (`[{ name, value }]`).
**Доступность указана по комбинациям, а не по опциям.** `options` даёт вам группы для отображения, но то, можно ли купить конкретный выбор, находится в соответствующем элементе `variants`. Сопоставьте выбранную покупателем комбинацию с `variants` и ориентируйтесь на `availableForSale` этого элемента, а не предполагайте, что каждое значение в `options` доступно для заказа.
`priceLabel` и `compareAtLabel` уже отформатированы для отображения, тогда как `variants[].price` и `variants[].compareAtPrice` — сырые строки в основной единице валюты. Не смешивайте их: показывайте метки, а сырые значения используйте только для сравнений.
## Дизайн
Стилизуйте этот блок в разделе **Design** его панели настроек. Это переопределения на уровне блока, которые накладываются поверх глобального дизайна и возвращаются к нему, когда не заполнены.
Что такое настройки дизайна? Подробнее здесь: [Настройки дизайна](/ru/aftersell/cart/design-settings).