Skip to main content
Replo 是一款强大的落地页构建器，但其默认的“Add to Cart”行为会重定向到 Shopify 购物车页面。这会打断 Upcart 预期的体验，因为 Upcart 使用的是滑出式抽屉。 借助一段简单的 JavaScript 代码，你可以让 Replo 在产品加入购物车时通知 Upcart，使顾客停留在同一页面并立即打开抽屉。 这也体现了 JavaScript 不仅可用于 Upcart 集成，还可用于商店中更广泛的购物车自定义。

​
此集成的重要性

默认情况下，Replo 支持多种加入购物车后的行为：
  • 重定向到 Shopify 购物车页面
  • 重定向到 checkout
  • 停留在当前页面（不与抽屉交互）
除非你显式触发，否则 Upcart 不会自动打开。此设置可确保在点击 Replo 的“Add to Cart”按钮后立即打开抽屉。

​
步骤 1：在 Replo 中打开产品页面

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

​
步骤 2：添加第二个交互

  1. 确认该按钮已使用 Add Product to Cart 交互
  2. 点击 On Click 下方的 + 图标
  3. 在操作列表中选择 Run JavaScript
  4. 在代码输入框中粘贴以下内容：
    这会告诉 Upcart 在产品加入购物车后立即打开抽屉。

​
步骤 3：禁用 Replo 重定向到购物车页面

  1. 再次选中 Add Product to Cart 交互
  2. 关闭 Go to cart after? 开关
这样可以防止 Replo 重定向到 Shopify 购物车页面，否则会完全绕过 Upcart 抽屉。

​
步骤 4：预览并发布

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

​
注意事项

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

​
注意事项

现在，Replo 应该不再重定向到 Shopify 购物车页面，而是在商品加入购物车时通知 Upcart。 请注意：你需要为在 Replo Landing Page Designer 中设计的每个产品页面完成此流程。