> ## 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, чтобы кнопки добавления в корзину в Replo, PageFly, GemPages и собственные кнопки открывали панель корзины Aftersell.
Aftersell перехватывает добавление в корзину на стандартных формах товара Shopify. Конструкторы лендингов часто добавляют товар в корзину по-своему, используя JavaScript-вызов вместо отправки формы, поэтому товар попадает в корзину, но панель остаётся закрытой, либо покупатель перенаправляется на `/cart`.
## Решение в одну строку
После завершения добавления в корзину конструктором скажите корзине обновиться и открыться:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
Добавьте это как **второе действие** на кнопке, после собственного «add to cart» конструктора, и отключите опцию конструктора «go to cart» или «redirect after add».
Сначала попробуйте [`open_on_background_add`](#the-no-code-option-first) — это часто решает проблему, вообще не затрагивая кнопку.
## Сначала вариант без кода
Aftersell обнаруживает добавления, которые обработал не он сам, двумя способами. Оба работают всегда — они подключаются вместе при загрузке, и ни один не подавляет другой, поэтому одно добавление может быть объявлено обоими — и каждое объявление применяет правило открытия независимо:
* **На уровне сети.** Aftersell отслеживает запросы к эндпоинтам корзины Shopify. Если добавление последовало за реальным кликом или нажатием клавиши в течение примерно трёх секунд, оно считается инициированным покупателем, и панель открывается согласно вашей обычной настройке **Open cart when an item is added**. Любой конструктор, добавляющий через Ajax cart API Shopify (`/cart/add.js`), попадает сюда — а это самый распространённый случай, поэтому сначала просто попробуйте вашу кнопку: возможно, она уже работает без каких-либо изменений.
* **[Стандартные события корзины Shopify](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events).** Добавление, объявленное таким образом, всегда считается *фоновым*, независимо от того, кликал ли покупатель. Фоновые добавления не открывают панель, если вы явно не включите это:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```
Вставьте это в **Cart settings → Custom script → Initialization**. Если панель теперь открывается после кнопки добавления вашего конструктора, готово — без работы над каждой кнопкой, и это покрывает все страницы.
`open_on_background_add` также охватывает добавления вообще без жеста покупателя — когда другое приложение или скрипт пишет в корзину. Включайте её только если хотите, чтобы и они открывали панель.
Если ни один из путей не открывает панель, используйте явный вызов ниже.
## Настройка по конструкторам
### Replo
1. Откройте страницу в редакторе Replo и выберите кнопку **Add to Cart**.
2. В правой боковой панели откройте вкладку **Interactions**.
3. В разделе **On Click** нажмите `+` и выберите **Run JavaScript**.
4. Вставьте:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
5. Снова выберите взаимодействие **Add Product to Cart** и отключите **Go to cart after?**.
6. Проверьте в предпросмотре, что панель открывается, затем опубликуйте.
Повторите на каждой странице с кнопкой добавления в корзину.
### PageFly и GemPages
Оба позволяют прикрепить пользовательский JavaScript к клику по кнопке или добавить элемент с пользовательским кодом на страницу. Используйте тот же фрагмент, настроенный на выполнение после действия добавления в корзину конструктора, и отключите любую настройку «redirect to cart» на кнопке.
### Ваша собственная кнопка
Если вы добавляете в корзину сами, пропустите лишний цикл и используйте собственное действие SDK, которое обновляет корзину и может открыть панель за один шаг:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-add-button').addEventListener('click', () => {
window.aftersell.cart.actions.addItem(VARIANT_ID, 1).then(() => {
window.aftersell.cart.actions.open();
});
});
```
Используйте `refresh()` только когда что-то *другое* изменило корзину и Aftersell должен это подхватить:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
fetch('/cart/add.js', { method: 'POST', /* … */ })
.then(() => window.aftersell.cart.actions.refresh())
.then(() => { window.aftersell.cart.actions.open(); });
```
## Когда кнопка конструктора должна полностью обходить Aftersell
Иногда верно обратное: форме нужен собственный поток, и перехват Aftersell мешает. Исключите только эту форму:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
form.hasAttribute('data-skip-aftersell')
);
```
Затем добавьте `data-skip-aftersell` на форму. Это лучше, чем [`skip_add_to_cart_interceptor`](/ru/aftersell/cart/sdk-configure#skip_add_to_cart_interceptor), который отключает перехват для всех форм на странице.
Ещё проще, если вы можете редактировать разметку формы: добавьте класс **`aftersell-cart-skip-atc`** на `