Открытие панели из конструктора страниц

Aftersell перехватывает добавление в корзину на стандартных формах товара Shopify. Конструкторы лендингов часто добавляют товар в корзину по-своему, используя JavaScript-вызов вместо отправки формы, поэтому товар попадает в корзину, но панель остаётся закрытой, либо покупатель перенаправляется на /cart.

Решение в одну строку

После завершения добавления в корзину конструктором скажите корзине обновиться и открыться:

window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});

Добавьте это как второе действие на кнопке, после собственного «add to cart» конструктора, и отключите опцию конструктора «go to cart» или «redirect after add».

Сначала попробуйте open_on_background_add — это часто решает проблему, вообще не затрагивая кнопку.

Сначала вариант без кода

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

На уровне сети. Aftersell отслеживает запросы к эндпоинтам корзины Shopify. Если добавление последовало за реальным кликом или нажатием клавиши в течение примерно трёх секунд, оно считается инициированным покупателем, и панель открывается согласно вашей обычной настройке Open cart when an item is added. Любой конструктор, добавляющий через Ajax cart API Shopify (/cart/add.js), попадает сюда — а это самый распространённый случай, поэтому сначала просто попробуйте вашу кнопку: возможно, она уже работает без каких-либо изменений.
Стандартные события корзины Shopify. Добавление, объявленное таким образом, всегда считается фоновым, независимо от того, кликал ли покупатель. Фоновые добавления не открывают панель, если вы явно не включите это:

window.aftersell.cart.configure({ open_on_background_add: true });

Вставьте это в Cart settings → Custom script → Initialization. Если панель теперь открывается после кнопки добавления вашего конструктора, готово — без работы над каждой кнопкой, и это покрывает все страницы.

open_on_background_add также охватывает добавления вообще без жеста покупателя — когда другое приложение или скрипт пишет в корзину. Включайте её только если хотите, чтобы и они открывали панель.

Если ни один из путей не открывает панель, используйте явный вызов ниже.

Настройка по конструкторам

Replo

Откройте страницу в редакторе Replo и выберите кнопку Add to Cart.
В правой боковой панели откройте вкладку Interactions.
В разделе On Click нажмите + и выберите Run JavaScript.

Вставьте:

window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});

Снова выберите взаимодействие Add Product to Cart и отключите Go to cart after?.
Проверьте в предпросмотре, что панель открывается, затем опубликуйте.

Повторите на каждой странице с кнопкой добавления в корзину.

PageFly и GemPages

Оба позволяют прикрепить пользовательский JavaScript к клику по кнопке или добавить элемент с пользовательским кодом на страницу. Используйте тот же фрагмент, настроенный на выполнение после действия добавления в корзину конструктора, и отключите любую настройку «redirect to cart» на кнопке.

Ваша собственная кнопка

Если вы добавляете в корзину сами, пропустите лишний цикл и используйте собственное действие SDK, которое обновляет корзину и может открыть панель за один шаг:

document.querySelector('#my-add-button').addEventListener('click', () => {
  window.aftersell.cart.actions.addItem(VARIANT_ID, 1).then(() => {
    window.aftersell.cart.actions.open();
  });
});

Используйте refresh() только когда что-то другое изменило корзину и Aftersell должен это подхватить:

fetch('/cart/add.js', { method: 'POST', /* … */ })
  .then(() => window.aftersell.cart.actions.refresh())
  .then(() => { window.aftersell.cart.actions.open(); });

Когда кнопка конструктора должна полностью обходить Aftersell

Иногда верно обратное: форме нужен собственный поток, и перехват Aftersell мешает. Исключите только эту форму:

window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
  form.hasAttribute('data-skip-aftersell')
);

Затем добавьте data-skip-aftersell на форму. Это лучше, чем skip_add_to_cart_interceptor, который отключает перехват для всех форм на странице. Ещё проще, если вы можете редактировать разметку формы: добавьте класс aftersell-cart-skip-atc на <form>, и Aftersell её пропустит — скрипт не нужен.

<form action="/cart/add" method="post" class="aftersell-cart-skip-atc">

Устранение неполадок

Симптом	Вероятная причина
Товар добавлен, панель остаётся закрытой	Конструктор не генерирует стандартные события корзины Shopify. Используйте явный вызов `refresh()` + `open()`.
Покупатель перенаправляется на `/cart`	Опция конструктора «go to cart after add» всё ещё включена. Отключите её.
Панель открывается, но показывает устаревшее содержимое	`open()` выполнился до разрешения `refresh()`. Объедините их через `.then()`, как показано выше.
Вообще ничего не происходит	Действия, вызванные до загрузки корзины, выводят предупреждение в консоль и ничего не делают. Оберните в `window.aftersell.cart.ready().then(…)`, если кнопку можно нажать так рано.
Работает на одной странице, но не на другой	Большинство конструкторов применяют взаимодействия постранично. Повторите настройку на каждой.

Проверьте window.aftersellCartDebugEvents, если вызов, кажется, ничего не делает, поскольку сбои SDK поглощаются, а не выбрасываются.

Что дальше

Configure: open_on_background_add и другие опции панели.
Действия: refresh, open и addItem.
Хуки: исключение отдельной формы.

Начало работы

Главная страница

Лучшие практики

Апселлы после покупки

Корзина

Апселлы на странице оформления заказа (Shopify Plus)

Страница благодарности

Апселлы на странице товара

Rokt Thanks

Стратегии

Аналитика и отслеживание

Интеграции

Aftersell MCP

Оплата и аккаунт

Устранение неполадок

Открытие панели из конструктора страниц

Решение в одну строку

Сначала вариант без кода

Настройка по конструкторам

Replo

PageFly и GemPages

Ваша собственная кнопка

Когда кнопка конструктора должна полностью обходить Aftersell

Устранение неполадок

Что дальше

​Решение в одну строку

​Сначала вариант без кода

​Настройка по конструкторам

​Replo

​PageFly и GemPages

​Ваша собственная кнопка

​Когда кнопка конструктора должна полностью обходить Aftersell

​Устранение неполадок

​Что дальше

Решение в одну строку

Сначала вариант без кода

Настройка по конструкторам

Replo

PageFly и GemPages

Ваша собственная кнопка

Когда кнопка конструктора должна полностью обходить Aftersell

Устранение неполадок

Что дальше