> ## 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.

# Блок Product add-on

> Блок Product add-on в Aftersell Cart: предлагайте один конкретный товар как быстрое добавление внутри drawer-корзины.

> Блок **Product add-on** предлагает один конкретный товар, который вы выбираете, в качестве дополнения внутри корзины, продвигая один известный товар (гарантию, пробник, бестселлер) как быстрое добавление прямо в корзине.

<Info>
  В отличие от [**Upsells**](/ru/aftersell/cart/upsells-block), который показывает товары, выбранные стратегией, Product add-on всегда показывает именно тот товар, который вы выбрали.
</Info>

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-product-add-on-block-additional-product.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=29c7598c41c78f6503af7f9cd7ec084a" alt="Блок Product add-on, предлагающий покупателю дополнительный товар для включения в корзину" width="678" height="125" data-path="images/aftersell/cart-product-add-on-block-additional-product.png" />
</Frame>

<div id="behavior">
  ## Поведение
</div>

* **Если не найден активный вариант** — товар не задан, архивирован или отсутствует в наличии — блок **ничего не отображает** вместо неработающей кнопки.
* Элемент управления отражает, находится ли в корзине позиция дополнения *именно этого блока*, поэтому его отключение удаляет добавленную им позицию (и не влияет на тот же товар, добавленный в другом месте).
* Цена compare-at зачёркивается при наличии настоящей уценки; надпись «% off» скрывается, если скидка округляется до значения ниже 1%.
* Изображение дополнения по умолчанию берётся из главного изображения товара, если у выбранного варианта его нет.

<div id="settings">
  ## Настройки
</div>

| Настройка        | Что она контролирует                                                                                              | По умолчанию                          |
| ---------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| **Display type** | Как выглядит элемент добавления: **Toggle** или **Checkbox**.                                                     | Toggle                                |
| **Product**      | Вариант товара для предложения — один селектор охватывает оба. Изображение и цена берутся из выбранного варианта. | Нет                                   |
| **Title**        | Заголовок в виде форматированного текста.                                                                         | `<strong>{{product_title}}</strong>`  |
| **Price label**  | Строка цены.                                                                                                      | `{{price}}`                           |
| **Description**  | Сопроводительный текст.                                                                                           | `Add {{product_title}} to your order` |

**Title**, **Price label** и **Description** поддерживают одни и те же четыре токена: `{{product_title}}`, `{{price}}`, `{{compare_at_price}}` и `{{savings}}`.

<div id="placement-and-limits">
  ## Размещение и ограничения
</div>

* **Регион:** тело или низ.
* **Максимум:** 3 на состояние корзины — заполненная и пустая корзина получают каждая свой лимит.
* **Состояние:** и заполненная, и пустая корзина.
* Не добавляется по умолчанию. Не заблокирован — вы можете удалить или скрыть его.

<div id="custom-template">
  ## Пользовательский шаблон
</div>

Поддерживает [пользовательский шаблон](/ru/aftersell/cart/custom-templates) на вкладке Code, который заменяет встроенную разметку этого блока вашим JSX. Вот props, которые он получает.

<div id="content">
  ### Контент
</div>

| Prop                      | Тип              | Для чего используется                                                                                                                                    |
| ------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `addonTitle`              | `string`         | Заголовок в виде обычного текста. Используйте его для alt-текста и `aria-label`, а также как запасной вариант при отсутствии форматированного заголовка. |
| `addonTitleHtml`          | `string`         | Санитизированный HTML заголовка с форматированием. Пустой при отсутствии.                                                                                |
| `descriptionHtml`         | `string`         | Санитизированный HTML описания с форматированием. Пустой при отсутствии.                                                                                 |
| `formattedPrice`          | `string`         | Надпись цены в валютном формате. Пустая, если не отображается.                                                                                           |
| `formattedCompareAtPrice` | `string`         | Отформатированная цена compare-at варианта (MSRP). Пустая, если нет реальной экономии.                                                                   |
| `savings`                 | `string`         | Надпись экономии в целых процентах, например `25%`. Пустая при отсутствии экономии.                                                                      |
| `priceHtml`               | `string \| null` | Санитизированный HTML цены с форматированием из отдельного поля цены. `null`, если пусто.                                                                |
| `ctaText`                 | `string`         | Надпись кнопки, для формата `button`.                                                                                                                    |
| `imageUrl`                | `string`         | Изображение товара. Пустое при отсутствии.                                                                                                               |
| `productUrl`              | `string`         | URL страницы товара. Пустой при отсутствии — в этом случае не делайте изображение или заголовок ссылками.                                                |

<div id="state-and-actions">
  ### Состояние и действия
</div>

| Prop           | Тип                                  | Для чего используется                                                                                           |
| -------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| `variantId`    | `number \| null`                     | Определённый вариант. `null`, когда нет активного варианта, поскольку товар не задан или отсутствует в наличии. |
| `format`       | `'button' \| 'checkbox' \| 'toggle'` | Как покупатель добавляет дополнение. Разветвляйте вашу разметку по этому значению.                              |
| `isEnabled`    | `boolean`                            | Находится ли дополнение сейчас в корзине.                                                                       |
| `isAdding`     | `boolean`                            | `true`, пока выполняется добавление или удаление. Отключайте ваш элемент управления по этому значению.          |
| `handleAdd`    | `() => void`                         | Добавляет дополнение. Для формата `button`.                                                                     |
| `handleToggle` | `() => void`                         | Переключает дополнение в корзину и из неё. Для `checkbox` и `toggle`.                                           |
| `isLoading`    | `boolean`                            | `true`, пока корзина ещё выполняет свою первую загрузку.                                                        |

<Warning>
  `format` определяет, какой обработчик применяется: `handleAdd` для `button`, `handleToggle` для `checkbox` и `toggle`. `null` в `variantId` означает, что добавлять нечего, поэтому блокируйте ваш элемент управления по этому значению вместо вызова обработчика, который не может завершиться успешно.
</Warning>

<div id="design">
  ## Дизайн
</div>

Стилизуйте этот блок через его раздел **Design** в панели настроек. Это переопределения на уровне блока, которые накладываются поверх вашего глобального дизайна и возвращаются к нему, если оставлены пустыми.

<div id="text">
  ### Текст
</div>

Раздел **Text** в Design позволяет управлять типографикой трёх элементов. Используйте селектор **Text element**, чтобы переключаться между ними.

**Title** — название товара. Также поддерживает пользовательский шрифт. Полужирное начертание и цвет текста задаются в редакторе форматированного текста выше (на вкладке Settings), а не здесь.

| Настройка          | Что она контролирует     | По умолчанию        |
| ------------------ | ------------------------ | ------------------- |
| **Font**           | Шрифт для заголовка.     | Наследуется из темы |
| **Size**           | Размер шрифта.           | `15px`              |
| **Line height**    | Множитель высоты строки. | `1.33`              |
| **Letter spacing** | Межбуквенный интервал.   | Обычный             |

**Price** — строка цены. Полужирное начертание и цвет текста задаются в редакторе форматированного текста выше.

| Настройка          | Что она контролирует     | По умолчанию |
| ------------------ | ------------------------ | ------------ |
| **Size**           | Размер шрифта.           | `15px`       |
| **Line height**    | Множитель высоты строки. | `1.33`       |
| **Letter spacing** | Межбуквенный интервал.   | Обычный      |

**Description** — сопроводительный текст. Полужирное начертание и цвет текста задаются в редакторе форматированного текста выше.

| Настройка          | Что она контролирует     | По умолчанию |
| ------------------ | ------------------------ | ------------ |
| **Size**           | Размер шрифта.           | `14px`       |
| **Line height**    | Множитель высоты строки. | `1.29`       |
| **Letter spacing** | Межбуквенный интервал.   | Обычный      |

<Tip>
  Клик по текстовому элементу прямо в предпросмотре корзины подсвечивает его и автоматически открывает его элементы управления в панели.
</Tip>

Что такое настройки дизайна? Узнайте больше здесь: [Настройки дизайна](/ru/aftersell/cart/design-settings).