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

# Блок Shipping protection

> Блок Shipping protection корзины Aftersell: подключаемая защита заказа, фиксирующая выбор на заказе.

> Блок **Shipping protection** предлагает подключаемую защиту доставки, которую покупатели могут включить в корзине, позволяя им добавить защиту от повреждения, потери или кражи во время доставки, и фиксирует этот выбор на заказе для ваших инструментов фулфилмента или обработки претензий.

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

* Добавление защиты делает две вещи: добавляет **реальную строку товара Shopify** для товара защиты и устанавливает атрибут корзины `_shipping_protected` в `true`.
* **Этот атрибут переживает оформление заказа и попадает на заказ** как атрибут примечания заказа (`_shipping_protected`), поэтому ваши инструменты фулфилмента или претензий могут определить, какие заказы защищены.
* Покупатели могут как добавлять, так и убирать защиту с помощью элемента управления, независимо от выбранного вами типа отображения.
* **Если пригодного варианта защиты не существует, блок ничего не отображает**, вместо того чтобы показывать элемент управления, вызывающий ошибку при клике.

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

| Настройка        | Что она контролирует                                                                                                                             | По умолчанию                                                      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- |
| **Title**        | Заголовок с форматированным текстом. Поддерживает `{{product_title}}` и `{{price}}`.                                                             | `<strong>{{product_title}}</strong>`                              |
| **Price label**  | Строка цены, отображаемая под заголовком. Поддерживает `{{product_title}}` и `{{price}}`. Очистите это поле, чтобы полностью скрыть строку цены. | `{{price}}`                                                       |
| **Description**  | Сопроводительный текст.                                                                                                                          | `Protect your order from damage, loss, or theft during shipping.` |
| **Price**        | Цена защиты (числовая, задаёт взимаемую сумму).                                                                                                  | `2.5`                                                             |
| **Product**      | Товар защиты (создаётся приложением).                                                                                                            | —                                                                 |
| **Display type** | Как выглядит элемент управления: **Toggle** или **Checkbox**.                                                                                    | Toggle                                                            |

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

* **Область:** body или bottom.
* **Максимум:** 1 на состояние корзины.
* **Состояние:** только заполненная корзина.
* Не добавляется по умолчанию. Не заблокирован — вы можете удалить или скрыть его.

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

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

| Prop              | Тип                                  | Для чего он                                                                                             |
| ----------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| `isEnabled`       | `boolean`                            | Находится ли защита доставки сейчас в корзине.                                                          |
| `isPending`       | `boolean`                            | `true`, пока выполняется добавление или удаление. Отключайте свой элемент управления по этому признаку. |
| `title`           | `string`                             | Заголовок в виде обычного текста. Резервный вариант при отсутствии форматированного заголовка.          |
| `titleHtml`       | `string`                             | Санитизированный HTML форматированного заголовка. Пустой, если его нет.                                 |
| `descriptionHtml` | `string`                             | Санитизированный HTML форматированного описания. Пустой, если его нет.                                  |
| `priceHtml`       | `string \| null`                     | Санитизированный HTML форматированной цены из выделенного поля цены. `null`, если поле пустое.          |
| `priceLabel`      | `string`                             | Отформатированная метка цены. Пустая, если цена не отображается.                                        |
| `imageUrl`        | `string`                             | Изображение защиты. Пустое, если его нет.                                                               |
| `ctaText`         | `string`                             | Надпись на кнопке, для формата `button`.                                                                |
| `format`          | `'button' \| 'checkbox' \| 'toggle'` | Как покупатель подключает защиту. Ветвите вашу разметку по этому значению.                              |
| `handleAdd`       | `() => void`                         | Добавляет защиту в корзину. Для формата `button`.                                                       |
| `handleToggle`    | `() => void`                         | Переключает защиту в корзине. Для `checkbox` и `toggle`.                                                |
| `isLoading`       | `boolean`                            | `true`, пока корзина выполняет первую загрузку.                                                         |

<Warning>
  `format` определяет, какой обработчик применяется: `handleAdd` для `button`, `handleToggle` для `checkbox` и `toggle`. Подключение не того обработчика делает элемент управления нерабочим у мерчантов, выбравших другой формат.
</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).