设置购买
要在页面上设置购买功能，需要添加一个购买按钮并配置其 Purchase 操作。该操作可以针对特定产品，也可以针对用户从页面上的产品元素中选择的任意产品。
让 AI 编辑器将年度计划拆分为每日费用、划掉旧价格，或标注最超值的选项。它只会调整当前屏幕上的产品卡片样式，不会影响你的产品目录或价格。
添加产品
产品元素是在画布上展示产品的可视化卡片。
添加产品元素的步骤：
-
在画布上，点击目标屏幕上的 +。
-
选择 Products。
-
选择一种布局预设：垂直列表、水平列表、功能轮播、功能卡片、横幅列表或底部弹窗。
-
选中每张产品卡片，在 Design 面板的下拉菜单中为其分配对应的产品。
未附加产品的产品元素会阻止预览和发布。请为其分配产品或删除该元素。
- （可选）如需在用户从该卡片购买时应用优惠，请从优惠下拉菜单中选择优惠。请参阅为流程添加优惠。
如需在卡片上显示带删除线的原价，请在其中添加原价元素。
您也可以将购买操作直接附加到产品卡片的点击交互上。点击卡片即可触发购买，无需单独设置购买按钮。
如果您删除了某个产品组并用新的替换，请确保每个操作和变量都指向新组。仍然指向已删除组的引用会阻止预览和发布。
添加购买按钮
购买按钮会在用户点击时触发购买操作。
添加购买按钮的步骤：
- 在画布上，点击屏幕上的 +。
- 选择 Button，然后选择一个按钮预设。
- 选中该按钮后，在右侧面板中打开 Interactions 选项卡。
- 点击 Add trigger > On tap，然后点击 Add action。
- 将 Action 设置为 Purchase，然后将 Product 设置为以下之一：
products.selectedProduct：购买用户从屏幕上的 Products 元素中选择的产品。- 指定产品：无论屏幕上选择了什么，始终购买该产品。
在按钮上显示价格
要将所选产品的价格插入按钮标签，请使用变量：
- 选中按钮后，在右侧面板中打开 Design 标签页。
- 在 Content 字段中，将光标放置在价格应显示的位置。
- 点击变量图标，选择
products.selectedProduct，然后选择prod_price属性。完整变量解析为products.selectedProduct.prod_price。 - 在变量周围添加静态文本，例如
Subscribe for {prod_price}。
当用户选择不同产品时，标签会自动更新。
恢复购买
要让用户恢复之前的购买记录，请在界面上添加一个恢复按钮或链接。
添加恢复购买元素的步骤：
- 在画布上，点击界面中的 +。
- 选择 Button，然后选择 Links 添加文字链接，或选择其他按钮类型添加样式按钮。
- 选中该元素后，在右侧面板中打开 Interactions 标签，然后点击 Add trigger。
- 选择 On tap，然后点击 Add action。
- 在 Action 下拉菜单中，选择 Restore purchases。
未绑定动作的恢复购买按钮，或者产品目录中缺失的产品，看起来与正常可用的界面完全相同。在发布之前，flow-audit skill 可以检查流程中每个界面的上述问题。
根据所选产品显示额外元素
如果页面上有产品，你可以根据用户选择的产品来显示或隐藏其他元素。
设置条件可见性的步骤：
- 在 Products 元素中，选择一个产品卡片。
- 在右侧面板中打开 Interactions 标签页，然后点击 Add trigger。
- 选择 On tap，然后点击 Add action。
- 在 Action 下拉菜单中，选择 Show 或 Hide。
- 选择当该产品被选中时要显示或隐藏的元素。
从其他元素更改所选产品
用户通常通过点击产品卡片来更改选择。如果需要从屏幕上的其他位置切换选择，可以添加一个 选择产品 操作，并将其指向目标产品卡片。
操作设置步骤如下：
- 选择需要触发选中操作的元素——按钮、开关或其他任意元素。
- 在右侧面板中打开 Interactions 标签页，点击 Add trigger。
- 选择触发器，然后点击 Add action。
- 在 Action 下拉菜单中选择 Select product。
- 将 Product 设置为该操作应选中的产品卡片。
该操作仅适用于同一屏幕上产品组中的产品卡片。若要根据用户的选择选取不同的产品，请将该操作包装在条件操作中。
查看流程中的产品
左侧边栏中的 Products 面板将现有产品映射到流程中的每个屏幕。
每个屏幕包含两个部分：
- Default — 单个产品，在屏幕加载时默认选中。
- Other — 同一屏幕上可选的其他产品。
