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

# Upcart x Replo landing page builder

> 本文介绍如何设置 Replo，使产品加入购物车时打开 Upcart 抽屉。

Replo 是一款强大的落地页构建器，但其默认的“Add to Cart”行为会重定向到 Shopify 购物车页面。这会打断 Upcart 预期的体验，因为 Upcart 使用的是滑出式抽屉。

借助一段简单的 JavaScript 代码，你可以让 Replo 在产品加入购物车时通知 Upcart，使顾客停留在同一页面并立即打开抽屉。

这也体现了 JavaScript 不仅可用于 Upcart 集成，还可用于商店中更广泛的购物车自定义。

***

<div id="why-this-integration-matters">
  ## 此集成的重要性
</div>

默认情况下，Replo 支持多种加入购物车后的行为：

* 重定向到 Shopify 购物车页面
* 重定向到 checkout
* 停留在当前页面（不与抽屉交互）

除非你显式触发，否则 Upcart 不会自动打开。此设置可确保在点击 Replo 的“Add to Cart”按钮后立即打开抽屉。

***

<div id="step-1-open-the-product-page-in-replo">
  ## 步骤 1：在 Replo 中打开产品页面
</div>

1. 在 Replo 编辑器中打开你的产品页或落地页
2. 在页面布局中选中 **Add to Cart** 按钮
3. 在右侧边栏中点击 **Interactions** 选项卡

<img src="https://mintlify.s3.us-west-1.amazonaws.com/aftersell/images/upcart/replo-editor-interactions-on-click.gif" alt="在 Replo 编辑器 Interactions 选项卡中为 Add to Cart 按钮添加 On Click 交互" />

<div id="step-2-add-a-second-interaction">
  ## 步骤 2：添加第二个交互
</div>

1. 确认该按钮已使用 **Add Product to Cart** 交互
2. 点击 **On Click** 下方的 `+` 图标
3. 在操作列表中选择 **Run JavaScript**
4. 在代码输入框中粘贴以下内容：
   ```javascript theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   window.upcartRegisterAddToCart();
   ```
   这会告诉 Upcart 在产品加入购物车后立即打开抽屉。

<div id="step-3-disable-replo-redirect-to-the-cart-page">
  ## 步骤 3：禁用 Replo 重定向到购物车页面
</div>

1. 再次选中 **Add Product to Cart** 交互
2. 关闭 **Go to cart after?** 开关

这样可以防止 Replo 重定向到 Shopify 购物车页面，否则会完全绕过 Upcart 抽屉。

<div id="step-4-preview-and-publish">
  ## 步骤 4：预览并发布
</div>

1. 在 Replo 中点击 **Preview** 测试交互
2. 将一件产品加入购物车，确认 Upcart 抽屉会自动打开
3. 确认无误后，点击 **Publish Page** 将更改上线

***

<div id="notes">
  ## 注意事项
</div>

* 此设置必须应用于你同时使用 Replo + Upcart 的**每个页面**
* `window.upcartRegisterAddToCart();` 函数来自 Upcart 的公共 API，无需额外安装代码即可使用
* 此方法同时适用于 Replo 页面的移动端和桌面端版本

<div id="notes-2">
  # **注意事项**
</div>

现在，Replo 应该不再重定向到 Shopify 购物车页面，而是在商品加入购物车时通知 Upcart。

请注意：你需要为在 Replo Landing Page Designer 中设计的每个产品页面完成此流程。