Skip to main content
购物车只知道 Shopify Ajax API 告诉它的内容:标题、价格、数量、属性。它并不知道你的 metafields。**cart enricher(购物车增强器)**可以从 Storefront API 获取额外的产品或变体字段,并将其附加到每个匹配的行项目上,这样你就可以显示配送时间预估、“单独发货”提示、成分列表,或你存储在产品上的任何其他信息。 典型用途:按产品显示配送时间窗口、过敏原或成分徽章、自定义”库存不足”标记、积分倍数、订阅者专属价格。

注册 enricher

三个字段: 每当购物车加载或发生变化时,Aftersell 会为购物车中的每个产品或变体获取你的 fragment。这个获取是非阻塞的:购物车会立即渲染,并在数据到达后重新触发 cart_updated。缓慢或失败的 fragment 永远不会延迟或破坏购物车。

读取数据

由于数据增强是异步的,在第一次获取完成之前 line.metadata.deliveryundefined。读取时务必加保护判断。

在购物车中渲染

数据增强把数据放到行项目上;用 React 模式的自定义代码块来绘制它。将该块添加为 Cart items 子块,这样它会为每个行项目渲染一次,并通过 props.line 接收该行项目:
增强后的值从 Storefront API 原样返回且未经清理。请像上面那样以文本形式渲染,绝不要使用 dangerouslySetInnerHTML 或写入原始 HTML。

变体级数据

当 metafield 存放在变体而不是产品上时,将 onType 设为 'ProductVariant'

不止于 metafields

fragment 会被拼接进 Storefront API 查询,因此 API 在 ProductProductVariant 上暴露的任何内容都可以用,不仅仅是 metafields:

需要注意的要点

  • 每次读取都要加保护。 metadata 默认是 {},在获取完成之前你的命名空间是 undefined。购物车总是在数据到达之前渲染。
  • 每个 id 都是独立的命名空间。 多个 enricher 可以共存而不冲突,包括其他应用注册的。
  • Metafields 必须对 Storefront 可见。 未对 Storefront API 开放的 metafield 会返回 null。如果什么都拿不到,请在 Shopify 后台检查其定义。
  • 保持 fragment 精简。 它会在每次购物车变化时为购物车中的每个产品运行。只请求你要用的字段,而不是所有字段。
  • 在初始化阶段注册。 它是一个 hook,所以应放在 Initialization 脚本的开头。
  • 花括号必须配对。 fragment 外层不加花括号,但任何嵌套选择都需要自己配对的括号。不配对的 fragment 会被拒绝。

后续阅读