Skip to main content
Header 区块是购物车抽屉固定的顶部区域,为抽屉提供清晰的标题和明显的关闭方式。你可以通过将 TitleLogoClose button 分配到左侧和右侧区块来控制其布局。由于 Header 固定在顶部,购物车其余部分滚动时它保持可见。
抽屉顶部带有购物车标题、商品数量和关闭控件的页眉区块

行为

  • Header 固定在抽屉顶部,不随购物车主体滚动。
  • 关闭控件始终可用,可关闭抽屉。

设置

标题可翻译。如果你的标题解析为空(例如未设置的翻译),购物车会回退显示 Cart,这样页眉永远不会空白。 元素按你选择的顺序从左到右显示,每个元素同一时间只能被分配到一个区块。

位置和限制

  • **区域:**仅限顶部。
  • **数量上限:**每个购物车状态 1 个。
  • **状态:**已装满和空购物车(每个状态都有自己的 Header 实例)。
  • 两种状态下都默认添加到新购物车。未锁定,所以你可以删除它或用眼睛开关隐藏它。

自定义模板

支持从其 Code 标签页使用自定义模板,用你的 JSX 替换此区块的内置标记。以下是它接收的 props。
logoUrl 是唯一没有内置等效项的 prop:Header 上传的图片只会由自定义模板渲染。如果商家设置了 logo 却没有显示,原因就在这里。
如果你不把 onClose 接到任何东西上,购物者仍然可以通过点击遮罩层或按 Escape 关闭抽屉,但你的页眉将没有关闭按钮。请务必包含一个。

设计

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

Text(文字)

Design 中的 Text(文字)部分让你控制购物车标题的排版。加粗和文字颜色在上方的富文本编辑器(Settings 标签页)中设置,而不是在这里。 什么是设计设置?在这里了解更多:设计设置