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

# Требование принятия условий перед оформлением заказа

> Сценарий использования Cart SDK, который добавляет чекбокс условий в корзину Aftersell и блокирует оформление заказа, пока покупатель не примет их.

Добавьте чекбокс под кнопкой оформления заказа и не позволяйте покупателю продолжить, пока он не поставит галочку. Полезно для принятия условий, возрастных ограничений и подтверждений изготовления на заказ.

<Warning>
  **Событие `checkout` не может отменить оформление заказа.** Оно срабатывает как уведомление непосредственно перед переходом браузера, поэтому возврат `false` или вызов `preventDefault` ничего не делает. Единственный способ ограничить оформление заказа — не дать кнопке реагировать на клики *до* её нажатия, что и показано на этой странице.

  Относитесь к этому как к UI-барьеру, а не юридической гарантии. Настойчивый покупатель всё равно может попасть на оформление заказа напрямую.
</Warning>

<div id="how-it-works">
  ## Как это работает
</div>

Три части:

1. **Блок Custom code** под кнопкой оформления заказа отображает чекбокс.
2. Пока галочка не установлена, блок добавляет класс на кнопки оформления заказа и экспресс-оплаты корзины через [shadow root](/ru/aftersell/cart/sdk-overview#shadowroot).
3. **Custom CSS** делает так, что этот класс отключает клики.

<div id="step-1-add-the-checkbox-block">
  ## Шаг 1: добавьте блок с чекбоксом
</div>

Добавьте блок [Custom code](/ru/aftersell/cart/custom-code-blocks) под блоком кнопки Checkout, переключите его в режим **React component** и вставьте:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  const [accepted, setAccepted] = useState(false);

  useEffect(() => {
    const root = window.aftersell?.cart?.shadowRoot;
    if (!root) return;

    const targets = root.querySelectorAll(
      '.cart-external-checkout-button, .cart-external-express-buttons'
    );
    targets.forEach((el) => el.classList.toggle('checkout-gated', !accepted));
  }, [accepted, props.cart]);

  return (
    <div style={{ width: '100%', fontSize: '14px', textAlign: 'center' }}>
      <label style={{ display: 'flex', gap: '6px', justifyContent: 'center', alignItems: 'center' }}>
        <input
          type="checkbox"
          checked={accepted}
          onChange={(e) => setAccepted(e.target.checked)}
        />
        <span>
          I accept the{' '}
          <a href="https://yourstore.com/terms" target="_blank" rel="noopener noreferrer">
            Terms &amp; Conditions
          </a>
        </span>
      </label>
      {!accepted && (
        <div style={{ color: '#c00', fontWeight: 600, marginTop: '6px' }}>
          Please accept the terms above to continue.
        </div>
      )}
    </div>
  );
}
```

Нажмите **Compile**, затем включите **«Use custom template»**. Пока вы этого не сделаете, блок ничего не отображает.

Зависимость `props.cart` важна: она повторно применяет класс после повторного рендера корзины, который иначе бы его стёр.

<div id="step-2-add-the-css">
  ## Шаг 2: добавьте CSS
</div>

В **Cart settings → Custom CSS**:

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout-gated {
  pointer-events: none !important;
  opacity: 0.5 !important;
}
```

Именно `pointer-events: none` фактически блокирует клик; прозрачность лишь показывает покупателю причину.

<div id="step-3-test-it">
  ## Шаг 3: протестируйте
</div>

В [предпросмотре](/ru/aftersell/cart/previewing-carts) убедитесь, что:

* Кнопка оформления заказа затемнена и не реагирует на клики при загрузке.
* Установка галочки включает её; снятие снова отключает кнопку.
* Кнопки экспресс-оплаты также заблокированы.
* Добавление или удаление товара не включает кнопку заново, пока галочка снята.

Последний пункт — типичная проблема. Если кнопка сама включается после изменения корзины, эффект не перезапускается. Проверьте, что `props.cart` находится в массиве зависимостей.

<div id="tracking-who-accepted">
  ## Отслеживание того, кто принял условия
</div>

Чекбокс — это состояние только в браузере; оно никогда не попадает в заказ. Чтобы зафиксировать принятие, проставляйте его на каждую строку как свойство в момент добавления в корзину:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<input type="hidden" name="properties[_terms_version]" value="2026-01">
```

Добавьте это в форму товара в теме. Shopify считывает `properties[...]` прямо с формы, поэтому значение доходит до заказа, кто бы ни выполнял добавление: Aftersell, тема или другое приложение.

Свойство с префиксом `_` не отображается в строке для покупателя, но всё же доходит до Shopify и появляется в заказе. Это фиксирует, *какая* версия условий действовала, а не то, что покупатель поставил галочку.

<div id="things-to-get-right">
  ## Что важно сделать правильно
</div>

* **Обращайтесь только к классам `cart-external-*`.** Двойники `cart-internal-*` — внутренняя механика корзины, а не точка входа для вашего кода. См. [Custom CSS](/ru/aftersell/cart/custom-css).
* **Проверяйте существование `shadowRoot`** перед использованием. Он равен `undefined`, пока корзина не загрузится.
* **Блок ничего не отображает до загрузки корзины**, поэтому кнопка оформления заказа никогда не бывает кратковременно активной до применения ограничения.
* **React-блок, выбросивший ошибку, ничего не отображает**, а остальная часть корзины продолжает работать — здесь это означает незащищённую кнопку оформления заказа. Протестируйте в предпросмотре перед публикацией.

<div id="where-to-go-next">
  ## Что дальше
</div>

* **[Блоки Custom code](/ru/aftersell/cart/custom-code-blocks)**: режим React и его props.
* **[Custom CSS](/ru/aftersell/cart/custom-css)**: соглашение о публичных классах.
* **[События](/ru/aftersell/cart/sdk-events#checkout)**: что событие `checkout` может и чего не может.