购物车交互原型需要把“数量变化”和“金额重算”连起来：先更新对应商品数量，再按单价计算小计与合计，并同步显示。还要定义最小数量、删除和结算不可用状态，不能只让数字看起来会变化。
可以在墨刀原型中用两个商品练习变量与交互。本文沿着数量1、数量2、总价三个变量展开，配有操作图和动态演示；原型用于说明规则，不会执行真实下单与支付。
数量变量、显示绑定与金额计算
变量用于保存数据，绑定负责把数据用于页面显示，交互事件负责在指定条件下改值。这三件事不是同一件事：只创建一个“总价”变量，并不会自动知道两件商品的单价和数量。需要在相应交互中明确更新或重算规则。
把数据从展示文字中分离后，可以分别检查：
- 数量变量是否对应正确商品，而不是两个商品误用同一个变量。
- 金额公式是否包含所有应参与计价的商品。
- 数量变化后，显示与计算是否取到同一份最新数据。
确定购物车原型交互目标
我们要实现的“会算账”购物车，至少包含以下的功能点：
商品数量可调节（+/-按钮）。
购物车总价跟随商品数量变化实时更新。
最终呈现出一个“所见即所得”的智能购物体验。
搭建购物车并设置变量交互
先搭两件商品与结算区域
在开始设置变量逻辑之前，我们需要先把购物车的页面结构搭建好。打开墨刀原型，通过拖拽的方式快速添加你需要的组件，包括商品卡片、图片、商品名称、单价、数量调节按钮（+/-）、总价展示区，以及结算按钮等。
你可以为每一个商品模块复制同一个结构，保持统一样式，同时也方便后续做联动逻辑设置。建议将每一个商品区域用分组功能管理起来，便于后续批量修改或复制扩展。
墨刀支持对齐辅助线和组件吸附等功能，可以帮助你快速整理出整洁、专业的界面结构，整个过程无需写代码，仅靠拖拽和调节属性面板就能完成，大大降低了搭建门槛。
创建数量和总价变量
先在变量区域建立数量1、数量2、总价三个数字变量，名称要与后面的绑定一致。具体入口以当前原型编辑器为准，截图用于定位相应设置区域。
用于计算练习时，设商品A单价20元、商品B单价30元，两件商品初始数量都为1，总价初始为50元。这些是便于手算的示例数值，与截图中的商品价格不同；若使用截图价格，也应让初始合计与数量一致。
根据我们的购物车示例，这里需要创建3个关键变量：数量1、数量2 和总价。其中，数量1和数量2分别对应购物车中两个商品的数量，用来实时记录用户点击“+”或“-”按钮时的商品数量变化。总价变量则用来存储整个购物车中所有商品的合计金额，是后续计算满减、运费和优惠券等逻辑的基础。
新建变量时选择数字类型，并分别设置初始值。数量不能随意设为0而仍显示已购买一件；总价也不能一直保留0等第一次点击后才正确。若使用金额小数，演示中统一显示位数，正式系统的金额精度仍由开发规则处理。
把变量绑定到数量与总价
变量创建完成后，我们需要将这些变量与页面中的组件进行绑定，让界面能随变量的变化自动更新，实现真正的数据驱动效果。
首先，选中原型页面中显示“总价”的文本框。在右侧属性栏中找到文本编辑区域，点击“绑定变量”，从下拉列表中选择你之前创建的变量【总价】。
将商品A、B的数量显示分别绑定数量1、数量2。若使用步进器，确认组件值与变量如何同步；若用独立的加减按钮，则分别添加修改对应数量的行为。仅把显示文本绑定到变量，并不等于点击加号就会改值。
数量变化后重新计算合计
给数量变化配置金额重算：先让商品A的数量更新，再把总价设为“20 × 数量1 + 30 × 数量2”。这是一条业务算式，不是可直接复制的编辑器语法；在表达式区域插入对应变量并选择运算符。若用监听数量变化的方式触发重算，要避免同时在按钮上重复触发两遍相同逻辑。
商品B也要进入同一套重算规则。复制交互后，重点核对被修改的是数量2，而不是仍然修改数量1。预览时交替操作两件商品，排除“只有第一个加号正确”的情况。
通过以上操作，整个购物车原型就具备了基础的“自动计算”能力，点击预览可以查看购物车实时更新总价的动效，实现了商品数量与总价之间的动态联动，提升了原型的真实交互表现。
两件商品的金额是否始终一致
| 操作 | 数量A / B | 商品合计 |
|---|---|---|
| 初次打开 | 1 / 1 | 50元 |
| A增加一件 | 2 / 1 | 70元 |
| B增加一件 | 2 / 2 | 100元 |
| A减少一件 | 1 / 2 | 80元 |
| 移除A，仅保留B | 0 / 2 | 60元 |
这组手算值用于对照你的练习，不是已经在当前账号运行的测试结果。若页面金额慢一拍，检查重算是否发生在数量更新之前；若某行数字不变，检查它绑定的变量。
数量为1时，可以规定减号不可操作，并保留单独删除入口；也可以让减到0触发删除确认，但必须明确选择哪一种。删除所有商品后，应显示空购物车和继续选购入口，结算按钮不可用。库存上限、商品失效和取消勾选不应继续按普通商品计价。
Baymard的食品购物研究讨论了列表中展示已加入数量的价值。借鉴的是“让用户知道加了什么”的反馈方式，而不是把某一种列表交互视为所有电商场景的唯一答案。需要整理表单与变量变化的关系时，也可阅读监听变量与动态表单。
满减、运费和优惠券怎样叠加
基础计价稳定后，再增加满减、运费和优惠券。先写清各项规则及先后顺序，分别展示商品合计与应付金额，避免把多个折扣都直接改到同一个总价上。
满减门槛与折扣恢复
先确定满减门槛按哪个金额判断。例如练习规则为商品合计满100元减10元，99元不减、100元减10元。需要显式设置条件或表达式，变量不会凭名称自动识别活动。折扣后金额与商品合计应分别保存或计算，避免连续点击时在已优惠金额上再次减10元。
免运费门槛
如果练习规则是满88元免运费，就明确门槛是否包含88，以及按优惠前还是优惠后的金额判断。比如按优惠后金额判断，87.99元收6元，88元免运费；减少商品数量后，也应重新判断，不能只处理达到门槛的方向。
优惠券与应付金额
优惠券要说明适用商品、门槛、可否与满减叠加，以及取消选择后的恢复方式。示例可以设置“可用券减5元，不与满减叠加”，再单独展示商品合计、优惠、运费和应付金额。不要只把优惠变量从总价中减掉，却允许出现负数或重复扣减。
完成数量与金额联动后，再把购物车连接到确认订单页。结算按钮应带着同一份商品、数量和价格规则继续，而不是跳到一张无关静态页面。餐饮场景还需要菜品规格与堂食/外卖规则，可接着参考点餐小程序原型设计。
