Skip to main content
Notes 区块是一个可折叠字段,购物者无需离开购物车即可添加订单备注或特殊说明(礼品留言、配送说明等)。备注会保存到购物车并一直带到订单中。
显示可折叠订单备注字段的备注区块,购物者可在其中添加特殊说明

行为

  • 该字段是一个可折叠的展开控件,默认折叠。折叠仅是视觉效果——已保存的备注仍然生效。当已保存备注且处于折叠状态时,会显示一个对勾,让购物者知道备注已存储。
  • 备注在购物者点击别处时保存(失焦时),并提供保存中/已保存/错误的状态反馈。
  • 如果购物车备注在别处被更改——/cart 页面或另一个标签页——该字段会同步过来,除非购物者已经开始输入,这样他们正在编写的备注永远不会被覆盖。

设置

位置和限制

  • **区域:**主体或底部。
  • **数量上限:**每个购物车状态 1 个。
  • **状态:**仅限已装满购物车。
  • 默认不添加。未锁定——你可以删除或隐藏它。

自定义模板

支持从其 Code 标签页使用自定义模板,用你的 JSX 替换此区块的内置标记。以下是它接收的 props。
备注在 onNoteBlur 时保存,而不是每次按键时。onNoteChangeonNoteBlur 都要接线,否则备注会静默地永远无法持久保存。将状态文本放在 live region 中,让屏幕阅读器播报保存中和已保存。

设计

使用设置面板中的 Design 部分为此区块设置样式。这些是按区块的覆盖,叠加在你的全局设计之上,留空时回退到全局设计。

Text(文字)

Design 中的 Text(文字)部分让你控制两个元素的排版。使用 Text element 选择器在它们之间切换。 Title——备注字段上方的区域标题。加粗在上方的富文本编辑器(Settings 标签页)中设置。文字颜色在 Design 的 Toggle 部分设置。 Note field——购物者输入备注的 textarea 中的文字。 什么是设计设置?在这里了解更多:设计设置