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

# 预览购物车

> 在发布前预览你的 Aftersell Cart——在编辑器画布中以及在你的上线店面主题上。

预览购物车有两种方式：在构建过程中于编辑器内实时预览，以及在公开之前在你的店面主题上预览。

<div id="the-editor-canvas">
  ## 编辑器画布
</div>

购物车编辑器的中央是一个渲染真实购物车的实时预览。它**并排显示两个购物车状态**——一张 **Filled cart** 卡片和一张 **Empty cart** 卡片——让你在工作时可以同时看到两者。

* **选择正在编辑的状态**：使用侧边栏中的 **Filled / Empty** 开关，或点击卡片**上方的标题**。点击卡片*内部*不会切换状态——它会选中光标下的区块。活动卡片会显示轮廓线，你正在编辑的区块会有自己的高亮。
* **缩放**：使用画布上的缩放胶囊控件（25%–200%）：`+` 和 `−` 以 10% 为步进，点击百分比可重置为 75%。Ctrl/Cmd + 滚轮以光标为中心缩放，普通滚动和拖动用于平移。
* 预览会随着你更改[设计设置](/zh/aftersell/cart/design-settings)和[自定义 CSS](/zh/aftersell/cart/custom-css) 实时反映变化。

<div id="preview-on-your-storefront">
  ## 在店面上预览
</div>

对购物车使用 **Preview**，即可在新标签页中的真实主题上查看它，而无需将其公开：

* **上线购物车**直接打开你的店面——上线购物车已经就是购物者看到的内容。
* **草稿购物车**打开**主题预览**。你选择在哪个主题上预览（默认是你的主主题），Aftersell 会仅为你的预览会话在该主题上暂载草稿购物车，不会影响你的上线购物车。你选择的主题必须已启用 app embed。

<Note>
  草稿预览可能无法完全反映上线购物车的行为——请把它当作一个接近的近似，并在发布后做最终检查。
</Note>

预览前请保存更改——编辑器会提示你保存，以便预览反映你的最新工作。

<div id="empty-vs-filled-states">
  ## 空状态与已装满状态
</div>

两个状态在编辑器画布中始终都可用（两张卡片），所以你可以独立设计和检查空购物车和已装满购物车。在店面上，购物者看到与其购物车匹配的状态。

<div id="sample-data-scenarios">
  ## 示例数据场景
</div>

[Cart items 区块](/zh/aftersell/cart/cart-items-block)的设置面板有一个带 **Sample data** 选择器的 **Preview** 部分，让你在不同的行项目场景之间切换编辑器预览，从而无需构建匹配的购物车即可检查每种场景的效果：

| 场景                    | 显示内容                    |
| --------------------- | ----------------------- |
| **Standard product**  | 应用了折扣的单个产品。             |
| **Long product name** | 标题非常长的产品，用于检查文本换行和溢出。   |
| **Bundle**            | 一个套装主行及其子商品。            |
| **Subscription**      | 带有销售计划标签的订阅行。           |
| **All item types**    | 长产品名、订阅和套装行同时出现在一个购物车中。 |

你的选择只影响编辑器预览。它永远不会保存到购物车，重新加载编辑器时会重置。