从页面构建器打开抽屉

Aftersell 会拦截标准 Shopify 产品表单上的加购操作。落地页构建器通常以它们自己的方式加购，使用 JavaScript 调用而不是提交表单，因此商品进入了购物车，但抽屉没有打开，或者购物者被重定向到 /cart。

一行代码的修复

在构建器的加购完成后，让购物车重新拉取并打开：

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

将其作为按钮上的第二个动作添加，放在构建器自己的”add to cart”之后，并关闭构建器的”go to cart”或”加购后跳转”选项。

请先尝试 open_on_background_add，它往往无需改动按钮就能解决问题。

先试无代码方案

Aftersell 通过两种方式检测不是它自己处理的加购。两者始终同时运行——它们在启动时一起挂载，互不抑制，因此一次加购可能被两者同时宣告——并且每次宣告都独立应用打开规则：

通过网络请求。 Aftersell 监听发往 Shopify 购物车端点的请求。如果加购发生在真实点击或按键后的大约三秒内，就被视为购物者驱动，抽屉会按照你正常的 Open cart when an item is added 设置打开。任何通过 Shopify 的 Ajax cart API（/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 绑定到按钮点击，或在页面上添加自定义代码元素。使用相同的代码片段，让它在构建器的加购动作之后运行，并禁用按钮上任何”跳转到购物车”的设置。

你自己的按钮

如果你是自己往购物车添加商品，可以省去往返请求，直接使用 SDK 自带的 action，它能一步完成更新购物车并打开抽屉：

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

仅当是其他东西改变了购物车、你需要让 Aftersell 同步时才使用 refresh()：

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 更好，后者会对页面上的所有表单关闭拦截。如果你能编辑表单的标记，还有更简单的办法：给 <form> 添加类名 aftersell-cart-skip-atc，Aftersell 就会跳过它，无需任何脚本。

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

故障排查

症状	可能原因
商品已加入，抽屉未打开	构建器没有发出 Shopify 的标准购物车事件。使用显式的 `refresh()` + `open()` 调用。
购物者被重定向到 `/cart`	构建器的”加购后跳转到购物车”选项仍处于开启状态。关闭它。
抽屉打开了但显示的是旧内容	`open()` 在 `refresh()` 完成之前就运行了。像上面那样用 `.then()` 串联它们。
完全没有反应	在购物车加载完成之前调用的 actions 会在控制台发出警告并且什么也不做。如果按钮可能在那么早就被点击，请包裹在 `window.aftersell.cart.ready().then(…)` 中。
在一个页面上有效，在另一个页面上无效	大多数构建器的交互是按页面设置的。在每个页面上重复设置。

如果某个调用看起来什么也没做，请检查 window.aftersellCartDebugEvents，因为 SDK 的失败会被吞掉而不是抛出。

后续阅读

Configure：open_on_background_add 及其他抽屉选项。
Actions：refresh、open 和 addItem。
Hooks：豁免单个表单。

开始使用

主页

最佳实践

购后追加销售

购物车

结账追加销售（Shopify Plus）

感谢页面

产品页面追加销售

Rokt Thanks

策略

分析与跟踪

集成

Aftersell MCP

计费与账户

故障排除

一行代码的修复

先试无代码方案

按构建器逐一设置

Replo

PageFly 和 GemPages

你自己的按钮

当构建器的按钮应完全绕过 Aftersell 时

故障排查

后续阅读

​一行代码的修复

​先试无代码方案

​按构建器逐一设置

​Replo

​PageFly 和 GemPages

​你自己的按钮

​当构建器的按钮应完全绕过 Aftersell 时

​故障排查

​后续阅读

一行代码的修复

先试无代码方案

按构建器逐一设置

Replo

PageFly 和 GemPages

你自己的按钮

当构建器的按钮应完全绕过 Aftersell 时

故障排查

后续阅读