> ## 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.
# Блок Rewards
> Блок Rewards в Aftersell Cart: многоуровневая бесплатная доставка, скидки и бесплатные подарки, включая разные уровни по рынку, стране или валюте.
> Блок **Rewards** показывает индикатор прогресса к уровням вознаграждений (бесплатная доставка, скидка на заказ или бесплатный подарок), которые покупатели разблокируют, добавляя больше товаров в корзину, мотивируя более крупные корзины, показывая покупателям, насколько они близки к следующему вознаграждению, и автоматически предоставляя заработанные вознаграждения. Уровни могут различаться по рынку, стране и валюте.
## Проверка порогов уровней
Список уровней каждого условия содержит до **4** уровней — блок Rewards с несколькими условиями по рынку, стране или валюте хранит до 4 на условие, а поскольку показывается первое совпадающее условие, любой отдельный покупатель видит не более 4. Порог каждого уровня должен быть строго больше порога предыдущего уровня — пороги должны идти по возрастанию. Если порог уровня равен или ниже порога предыдущего уровня, на поле порога этого уровня появляется встроенная ошибка, а кнопка **Save** блокируется до устранения проблемы. Затронутый уровень автоматически разворачивается, чтобы ошибка была видна.
Например, если Уровень 1 установлен на \$100, Уровень 2 должен быть установлен на \$101 или выше.
## Поведение
* Прогресс **исключает** из суммы позиции подарков-вознаграждений, позиции product add-on, позиции защиты доставки и подарочные карты, чтобы эти товары не приближали покупателя к вознаграждению искусственно.
* Сообщение показывает оставшуюся сумму или количество до следующего уровня, либо сообщение о завершении, когда все уровни достигнуты.
* **Бесплатные подарки предоставляются автоматически.** Когда покупатель достигает уровня с подарком, подарок добавляется в корзину; если он опускается ниже, подарок удаляется. При выключенном суммировании вознаграждений предоставляется только подарок наивысшего достигнутого уровня.
* **Add back removed free gifts** контролирует, что происходит, когда покупатель вручную удаляет автоматически предоставленный подарок. Если включено (по умолчанию), подарок автоматически добавляется снова при следующем обновлении корзины. Если выключено, удаление учитывается, и подарок остаётся вне корзины до конца этой сессии, чтобы покупатели не боролись с корзиной, отказываясь от подарка.
## Настройки
| Настройка | Что она контролирует | По умолчанию |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- |
| **Rewards calculation** | Измеряется ли прогресс по **Cart total (\$)** или **Cart quantity (#)**. | Cart total (\$) |
| **Stack rewards across tiers** | Вкл.: применять каждое вознаграждение, разблокированное покупателем, вплоть до наивысшего достигнутого уровня. Выкл.: применять только вознаграждение наивысшего разблокированного уровня. | Вкл. |
| **Add back removed free gifts** | Повторно добавлять заработанный бесплатный подарок после того, как покупатель его удалил. | Вкл. |
| **Show tier icons** | Отображаются ли иконки уровней на индикаторе. | Вкл. |
| **Show tier labels** | Отображается ли текст надписи на каждом маркере уровня на индикаторе. | Выкл. |
| **Text after completing full rewards bar** | Форматированный текст, отображаемый после достижения всех уровней. | `All rewards unlocked!` |
| **Tiers** | Уровни вознаграждений (см. ниже). До **4** на условие; панель показывает счётчик `n/4` и отключает **Add tier** при достижении лимита. | Нет |
Каждый **уровень** разворачивается в:
| Настройка уровня | Что она контролирует | По умолчанию |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- |
| **Reward type** | **Free shipping**, **Order discount** или **Free gift**. Изменение сбрасывает заголовок этого уровня и надпись на индикаторе прогресса на формулировку по умолчанию для нового типа. | Free shipping |
| **Threshold (\$)** / **Threshold (items)** | Сумма корзины или количество товаров, разблокирующие уровень. Надпись следует за **Rewards calculation**. Минимум `1`. | `50` |
| **Discount value type** | Только для скидок на заказ: **Percentage (%)** или **Fixed amount (\$)**. | Percentage (%) |
| **Percentage off** / **Amount off** | Только для скидок на заказ: размер скидки. Проценты ограничены значением 100. | `10` |
| **Title before achieving tier** | Сообщение в виде форматированного текста, отображаемое, пока покупатель ещё не достиг уровня. Поддерживает токен `{{amount}}`. | `You're {{amount}} away from free shipping!` |
| **Progress bar label** | Надпись, отображаемая на маркере уровня. | `Free shipping` |
| **Gift products** | Только для бесплатных подарков: предоставляемый товар(ы)/вариант(ы), до **3** на уровень. | Нет |
## Размещение и ограничения
* **Регион:** любой (верх, тело или низ).
* **Максимум:** 1 на состояние корзины — заполненная и пустая корзина получают каждая свой.
* **Состояние:** и заполненная, и пустая корзина.
* Не добавляется по умолчанию. Не заблокирован, поэтому вы можете удалить или скрыть его.
## Вознаграждения по рынкам
Rewards — это блок, у которого на сегодня есть полный интерфейс **Conditions**: определяйте несколько наборов уровней, каждый нацелен на **рынок Shopify**, **страну покупателя** или **валюту покупателя** (**In** или **Not in**). Покупателю показывается первое совпадающее условие. Если ни одно не совпало, блок для него ничего не отображает.
Каждое условие — это карточка в панели настроек (**When** + условие). Под ней раздел **Display** содержит уровни для этого условия. Держите конкретные правила выше универсального условия **All buyers**. Порядок — это приоритет, а не комбинация всех совпадений.
Вы не можете удалить последнее условие (всегда требуется хотя бы одно). Предпросмотр в редакторе не оценивает реального покупателя; выберите условие в панели, чтобы просмотреть этот вариант.
О том, как условия соотносятся с переключателем-глазом и другими блоками, см. [Показ или скрытие по рынку, стране или валюте](/ru/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency).
## Пользовательский шаблон
Поддерживает [пользовательский шаблон](/ru/aftersell/cart/custom-templates) на вкладке Code, который заменяет встроенную разметку этого блока вашим JSX. Вот props, которые он получает.
| Prop | Тип | Для чего используется |
| -------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `milestones` | `Milestone[]` | Уровни вознаграждений по порядку. См. ниже. |
| `rewardsMessageHtml` | `string` | Сообщение о прогрессе или завершении в виде санитизированного HTML. |
| `showIcons` | `boolean` | Включил ли продавец иконки уровней. |
| `showTierLabels` | `boolean` | Включил ли продавец надписи уровней на индикаторе. |
| `isLoading` | `boolean` | Здесь всегда `false`: блок отображает встроенный скелетон во время загрузки и вызывает ваш шаблон только тогда, когда корзина готова. |
Каждый `Milestone`:
| Поле | Тип | Для чего используется |
| ----------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `id` | `string` | Стабильный ключ уровня. Используйте его как ваш React `key`. |
| `label` | `string` | Надпись уровня в виде обычного текста. |
| `icon` | `ReactElement \| null` | Предварительно отрисованный элемент иконки. `null`, если у уровня её нет. Отображайте его напрямую: `{m.icon}`. |
| `isCompleted` | `boolean` | Достигла ли корзина этого уровня. |
| `positionPercent` | `number` | Насколько заполнен **собственный сегмент этого уровня** на индикаторе, от `0` до `100` — не позиция на одном общем индикаторе. |
```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function Rewards(props) {
return (
{props.milestones.map((milestone) => (
// Each tier gets its own track; positionPercent (0-100) fills that track.
{props.showIcons && milestone.icon ? milestone.icon : null}
{props.showTierLabels && milestone.label !== '' ? milestone.label : null}
))}
);
}
```
`m.icon` — это **предварительно отрисованный элемент**, а не URL или имя иконки, поэтому отображайте его напрямую, а не пытайтесь построить из него элемент изображения.
`milestones` никогда не бывает пустым внутри пользовательского шаблона. Когда нет уровней для показа, блок ничего не отображает, и ваш шаблон вообще не вызывается, поэтому вам не нужна ветка для пустого состояния.
## Дизайн
Стилизуйте этот блок через его раздел **Design** в панели настроек. Это переопределения на уровне блока, которые накладываются поверх вашего глобального дизайна и возвращаются к нему, если оставлены пустыми.
### Текст
Раздел **Text** в Design позволяет управлять типографикой текстовых элементов вознаграждений. Используйте селектор **Text element**, чтобы переключаться между ними.
**Message** — сообщение о прогрессе или завершении. Также поддерживает пользовательский шрифт. Полужирное начертание и цвет текста задаются в редакторе форматированного текста выше (на вкладке Settings), а не здесь.
| Настройка | Что она контролирует | По умолчанию |
| ------------------ | ------------------------ | ------------------- |
| **Font** | Шрифт для сообщения. | Наследуется из темы |
| **Size** | Размер шрифта. | `14px` |
| **Line height** | Множитель высоты строки. | `1.43` |
| **Letter spacing** | Межбуквенный интервал. | Обычный |
**Tier label** — надпись, отображаемая на каждом маркере уровня. Доступна только при включённой опции **Show tier labels**.
| Настройка | Что она контролирует | По умолчанию |
| ------------------ | ---------------------------------------------------------------- | -------------------------- |
| **Text color** | Цвет надписи уровня. | Второстепенный цвет текста |
| **Size** | Размер шрифта. | `13px` |
| **Weight** | Насыщенность шрифта — Light, Regular, Medium, Semibold или Bold. | Regular (400) |
| **Line height** | Множитель высоты строки. | `1.2` |
| **Letter spacing** | Межбуквенный интервал. | Обычный |
Клик по текстовому элементу прямо в предпросмотре корзины подсвечивает его и автоматически открывает его элементы управления в панели.
Что такое настройки дизайна? Узнайте больше здесь: [Настройки дизайна](/ru/aftersell/cart/design-settings).