> ## 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 Cart 抽屉。
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"或"加购后跳转"选项。
请先尝试 [`open_on_background_add`](#the-no-code-option-first)，它往往无需改动按钮就能解决问题。
## 先试无代码方案
Aftersell 通过两种方式检测不是它自己处理的加购。两者始终同时运行——它们在启动时一起挂载，互不抑制，因此一次加购可能被两者同时宣告——并且每次宣告都独立应用打开规则：
* **通过网络请求。** Aftersell 监听发往 Shopify 购物车端点的请求。如果加购发生在真实点击或按键后的大约三秒内，就被视为购物者驱动，抽屉会按照你正常的 **Open cart when an item is added** 设置打开。任何通过 Shopify 的 Ajax cart API（`/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 绑定到按钮点击，或在页面上添加自定义代码元素。使用相同的代码片段，让它在构建器的加购动作之后运行，并禁用按钮上任何"跳转到购物车"的设置。
### 你自己的按钮
如果你是自己往购物车添加商品，可以省去往返请求，直接使用 SDK 自带的 action，它能一步完成更新购物车并打开抽屉：
```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();
});
});
```
仅当是*其他东西*改变了购物车、你需要让 Aftersell 同步时才使用 `refresh()`：
```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`](/zh/aftersell/cart/sdk-configure#skip_add_to_cart_interceptor) 更好，后者会对页面上的所有表单关闭拦截。
如果你能编辑表单的标记，还有更简单的办法：给 `