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

# Перехват добавления в корзину

> Почему Aftersell берёт добавление в корзину на себя, как определить, перехвачена ли форма, и все способы исключить форму.

Когда покупатель нажимает **Add to cart**, Aftersell обычно обрабатывает добавление сам, а не позволяет это делать теме. Эта страница объясняет, почему так происходит, что это значит для добавленных вами скриптов и как отключить перехват для одной формы или для всех сразу.

Большинству магазинов ничего из этого менять не нужно. Читайте дальше, если ваш скрипт перестал срабатывать при добавлении в корзину или если кнопка добавления в корзину ведёт себя странно.

<div id="what-interception-does">
  ## Что делает перехват
</div>

Aftersell слушает submit добавления в корзину раньше темы. Когда он его распознаёт, он:

1. Останавливает событие, чтобы ничего другое на странице не обработало этот клик.
2. Отправляет добавление в Shopify сам.
3. Открывает drawer Aftersell Cart.

Шаг 1 — самый важный, и именно из-за него существует эта страница.

<div id="why-it-exists">
  ## Зачем это нужно
</div>

Без этого на один и тот же клик реагируют обе корзины. Тема добавляет товар и открывает свою панель, Aftersell добавляет его и открывает свою, и покупатель видит две корзины, часто с товаром, добавленным дважды.

Остановка события — самый простой способ гарантировать одно добавление и одну корзину.

<div id="what-it-costs">
  ## Чего это стоит
</div>

Остановка события останавливает его для **всех**, а не только для темы. Любой другой код, слушающий это же добавление в корзину, перестаёт работать: ваша аналитика, трекинг-пиксель, приложение подписок или комплектов, скрипт, который вы добавили сами.

Сбой происходит молча. В консоли браузера ничего не появляется, а само добавление работает, поэтому обычный симптом — неверное число, а не что-то видимо сломанное:

* события `add_to_cart` отсутствуют в GA4, Meta или TikTok
* приложение подписок или комплектов работает на странице товара, но не через корзину
* ваш собственный `addEventListener` на форме никогда не срабатывает

Если что-то из этого вам знакомо, причина именно в этом, и решение приведено ниже.

<div id="when-aftersell-doesnt-intercept">
  ## Когда Aftersell не перехватывает
</div>

Перехват включён не всегда. Aftersell не трогает добавление в корзину, когда:

* **Он распознаёт корзину вашей темы.** На темах, с которыми Aftersell умеет работать, он делает собственную корзину темы неактивной вместо блокировки события, а затем позволяет теме выполнить добавление обычным образом. Ваши скрипты работают, как всегда работали. См. [Какие темы](#which-themes-aftersell-recognizes) ниже.
* **Форма не добавляет позицию.** Форму без варианта `id` и без `items[]` он не трогает.
* **Вы отказались от перехвата** одним из способов, описанных ниже.

Когда Aftersell не выполняет добавление, он всё равно следит за запросом корзины и открывает drawer, когда его видит. См. [Прежде чем выбрать: что меняется](#before-you-choose-what-changes).

<div id="which-themes-aftersell-recognizes">
  ## Какие темы Aftersell распознаёт
</div>

| Тема                                          |                                                                                             |
| --------------------------------------------- | ------------------------------------------------------------------------------------------- |
| **Dawn** и остальная бесплатная семья Shopify | Craft, Colorblock, Crave, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste |
| **Horizon**                                   | текущая тема Shopify по умолчанию                                                           |
| **Impulse**                                   |                                                                                             |

Aftersell сопоставляет темы по **тому, как они устроены**, а не по названию, поэтому кастомная тема, ответвлённая от любой из этих, обычно тоже распознаётся, включая приватные сборки, которые Aftersell никогда не видел.

<Note>
  Верно и обратное: сильно кастомизированная сборка может отойти от своего исходника настолько, что Aftersell её больше не распознаёт, хотя тема всё ещё называется «Dawn». Присутствие в этом списке делает распознавание вероятным, но не гарантированным.
</Note>

<div id="your-options">
  ## Ваши варианты
</div>

Выберите самый узкий, который решает вашу задачу. Каждая строка отдаёт больше, чем предыдущая.

| Вариант                                                              | Область                              | Aftersell всё равно открывает drawer |
| -------------------------------------------------------------------- | ------------------------------------ | ------------------------------------ |
| [`registerSkipAddToCartRule`](#per-form-a-rule-in-code)              | Формы, которые выбирает ваше правило | Да, по запросу корзины               |
| [`aftersell-cart-skip-atc`](#per-form-a-class-in-your-theme)         | Одна форма или кнопка                | Да, по запросу корзины               |
| [`skip_add_to_cart_interceptor`](#whole-store-turn-interception-off) | Каждая форма в магазине              | Да, по запросу корзины               |

<div id="before-you-choose-what-changes">
  ### Прежде чем выбрать: что меняется
</div>

Отказ от перехвата возвращает добавление вашей теме, и это поднимает два вопроса, на которые стоит ответить до выбора строки: откроется ли ваша корзина и не появится ли рядом с ней корзина темы.

<div id="will-your-cart-still-open">
  #### Откроется ли ваша корзина?
</div>

Обычно да, без каких-либо действий с вашей стороны. Кто бы ни выполнял добавление, Aftersell следит за запросом, идущим к Shopify, и открывает drawer, когда его видит, следуя вашей обычной настройке **Open cart when an item is added**. Вам не нужно ничего вызывать самим.

Три ситуации это ломают, и у всех трёх есть решение:

**Добавление идёт куда-то помимо стандартных cart-эндпоинтов Shopify.** Aftersell следит за `/cart/add`, `/cart/change`, `/cart/update` и `/cart/clear` на вашем собственном домене. Приложение, добавляющее через собственный эндпоинт и синхронизирующее корзину потом, этому не видно. Откройте корзину сами, когда добавление этого приложения завершится:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});
```

**Между кликом и запросом проходит более трёх секунд.** Aftersell считает добавление, следующее непосредственно за реальным кликом или нажатием клавиши, инициированным покупателем. За пределами этого окна оно считается фоновым добавлением, которое не открывает drawer, если вы это не включите:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```

**Ваша настройка корзины запрещает это.** Если **Open cart when an item is added** выключено или вы установили `open_on_add_to_cart: 'never'`, drawer никто не откроет. Это работа согласно конфигурации.

<div id="will-the-themes-cart-open-too">
  #### Откроется ли также корзина темы?
</div>

Это риск, который несут в себе отказы от перехвата, и ответ зависит от вашей темы.

Отключение собственной корзины темы **отделено от перехвата** и происходит при загрузке страницы в любом случае, поэтому ни один из здешних отказов не включает её обратно. На теме из [списка распознаваемых](#which-themes-aftersell-recognizes) собственная корзина темы остаётся тихой, и покупатель видит одну корзину, вашу.

На теме, которую Aftersell не распознаёт, ничто не сдерживает корзину темы. Отказ от перехвата означает, что тема обрабатывает добавление ровно так, как всегда, включая открытие собственной панели или переход на `/cart`, а Aftersell открывает свой drawer по замеченному запросу. Это две корзины, и именно ради этого существует перехват.

Если так происходит, у вас есть три варианта: оставить перехват включённым для этой формы, использовать более узкий отказ, не покрывающий формы, которые вызывают проблему, или самостоятельно остановить собственную корзину темы в коде темы.

<Tip>
  Сначала включайте отказ от перехвата в тестовой или неопубликованной теме. Если собственная корзина темы появляется там, где её раньше не было, ваша тема не из тех, что Aftersell распознаёт, и для этих форм лучше оставить перехват включённым.
</Tip>

<Note>
  Это касается только добавления в корзину. Пропуск **иконки корзины** мимо Aftersell с помощью класса `aftersell-cart-wont-open-cart` — это другое: клик по иконке корзины не отправляет запрос, поэтому Aftersell нечего наблюдать, и drawer не откроется. См. ниже.
</Note>

<div id="per-form-a-rule-in-code">
  ### Для одной формы: правило в коде
</div>

Предпочтительный вариант. Зарегистрируйте правило, возвращающее `true` для форм, которые вы хотите оставить в покое:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
  form.hasAttribute('data-skip-aftersell')
);
```

Разместите его в **Cart settings → Custom script → Initialization**. Правила аддитивны: ваше работает рядом с любыми другими, и любое правило, вернувшее `true`, пропускает эту форму. Подробности в [Хуках](/ru/aftersell/cart/sdk-hooks#registerskipaddtocartrule).

<div id="per-form-a-class-in-your-theme">
  ### Для одной формы: класс в вашей теме
</div>

Если вы не хотите писать правило, добавьте класс `aftersell-cart-skip-atc` в вашей теме:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<form action="/cart/add" method="post" class="aftersell-cart-skip-atc">
```

<Note>
  Для submit формы класс должен быть на **самом элементе form**. Родительский `div` не сработает. Для кнопки, добавляющей в корзину без submit формы, класс может быть на кнопке или любом элементе вокруг неё.
</Note>

<div id="whole-store-turn-interception-off">
  ### Для всего магазина: отключить перехват
</div>

Грубый вариант. Добавление в корзину ведёт себя ровно так, как изначально задумано в вашей теме, для каждой формы:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ skip_add_to_cart_interceptor: true });
```

<Warning>
  Эта опция читается **один раз, при загрузке корзины**. Она работает только из скрипта **Initialization** вашей корзины. Установка её позже, внутри `ready()` или из обработчика события, ничего не делает и завершается молча.
</Warning>

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

<div id="the-cart-icon-is-separate">
  ## Иконка корзины обрабатывается отдельно
</div>

Иконка корзины в вашем шапке обрабатывается собственным перехватчиком со своим отказом. Отключение перехвата добавления в корзину не меняет того, что делает иконка корзины, и наоборот.

Клик по иконке корзины открывает drawer Aftersell вместо перехода на `/cart`. Чтобы оставить одну иконку или кнопку в покое, добавьте к ней или к любому элементу вокруг неё класс `aftersell-cart-wont-open-cart`:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<a href="/cart" class="aftersell-cart-wont-open-cart">Cart</a>
```

Этот элемент управления тогда делает то, для чего его создала ваша тема, обычно ведёт на страницу корзины. Aftersell полностью выходит из процесса, поэтому **drawer не откроется**. В отличие от добавления в корзину, здесь нет запроса, за которым можно наблюдать, поэтому если вы хотите, чтобы ваша корзина открылась от этого элемента, вам нужно сказать об этом:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});
```

Здесь применима та же проблема с заглушением: поскольку Aftersell останавливает клик, ваша аналитика и пиксели также не видят кликов по иконке корзины. Если исправить нужно только это, оставьте drawer и прекратите заглушение:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ skip_open_cart_interceptor: true });
```

Ваши слушатели работают, drawer по-прежнему открывается, а клик по-прежнему не ведёт на `/cart`. Подробности в [Configure](/ru/aftersell/cart/sdk-configure#skip_open_cart_interceptor).

<Note>
  Чтобы поменять *то, какие* элементы открывают корзину, а не отключать их, используйте **Cart settings → Advanced → Cart icon selector** вместо редактирования темы.
</Note>

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

* **[Configure](/ru/aftersell/cart/sdk-configure)**: все опции SDK, включая упомянутые здесь.
* **[Хуки](/ru/aftersell/cart/sdk-hooks)**: контроль на уровне формы и позиции.
* **[Открыть drawer из page builder](/ru/aftersell/cart/sdk-use-case-page-builder)**: для Replo, PageFly, GemPages и кастомных кнопок, добавляющих в корзину своим способом.