显示删除线价格与折扣角标
在实际价格旁显示一个划掉的价格，能让折扣一目了然。本教程对年付产品卡片进行改造，在年付方案的月均价格旁边，以删除线形式展示月付方案的每月价格，并在顶部添加折扣角标。
Strikethrough formatting applies to a whole text element — you can’t cross out a variable inside a larger text. That’s why the crossed-out price lives in its own text element, side by side with the discounted price in a horizontal container.
如果只需为同一产品显示一个虚高的”原价”——例如以删除线显示当前价格的两倍——可以直接添加现成的原价元素。本文介绍的是删除线价格来自另一个产品真实价格的情况。
开始之前
- 搭建一个包含产品的付费墙页面——例如，参考创建基础付费墙页面。本文以提供年度和月度产品的付费墙为例进行说明。
1. 叠加价格行
年度卡片目前只有一行价格——年度产品的 prod_price 变量后跟 /year，显示效果例如 $29.99/year。在它上方再添加一行月度价格。
- 在 Layers 面板中，选择年度产品卡片内的价格文本。由于它已处于卡片的垂直容器中，复制的副本将堆叠在其下方。
- 点击图层上的三点菜单 ，选择 Duplicate。副本出现在原件下方。下一步中，上方文本将成为月度价格行，下方文本保留年度价格。
2. 将月度行拆分为两个价格
月度行包含两个文本元素：划线的月度方案价格和年度方案的每月均摊价格。
变量选择器仅显示当前流程屏幕中已有产品的价格。如需引用不在流程中的产品，请创建一个空白屏幕，在其中添加产品元素并将该产品分配给它，同时确保没有任何导航操作会跳转到该屏幕。
-
选中顶部文本元素，点击其三点菜单，选择 Wrap > Wrap in Horizontal Container。
-
点击新容器内文本层的三点菜单，选择 Duplicate。
-
选择第一个文本元素，清空其 Content 字段。点击变量图标
，选择月付产品，然后选择其 prod_price_per_month属性。在变量后输入/month。 -
在 Design 标签页的 Typography 下，将 Decoration 设置为 Strikethrough （参见样式与外观 — Decoration）。
-
选择第二个文本元素，以相同方式替换其内容，但选择年付产品的
prod_price_per_month属性。在变量后输入/month。
3. 弱化年付价格
复制的月付价格继承了原有的价格样式，因此三个价格目前大小和字重完全相同。让年付价格更低调一些，使月付行更加突出。
- 在画布上，选中最下方的文本元素——即年付价格。
- 在元素上方的工具栏中，打开文本样式下拉菜单，选择一种更低调的样式——例如 Caption。或者，在 Design 标签页的 Typography 下选择其他样式。
4. 添加折扣徽章
徽章用于在价格旁边突出显示节省金额。
- 点击 + > Badge。
- 在 Layers 面板中，将徽章拖入年度产品内部，放在包含价格的垂直容器与单选按钮之间。
- 选中徽章的文本图层，编辑 Content 字段——例如填入
Save 75%。
折扣百分比没有对应的变量——请根据你的实际价格计算后，以静态文本方式输入。
现在，年度卡片以月度套餐为参照价格：划线的月价、年度套餐折算的月均价，以及折扣徽章并排显示在同一行，完整年价显示在下方。
