小组件配置

小组件配置概览

Umbrella 提供 12 种小组件类型，用于控制保修选项在店铺前台、购物车、结账页和订单状态页上的显示方式。每种类型都有自己的模板和配置选项。

---

小组件类型

小组件类型	键	使用场景
PDP 小组件	pdp_widget	产品页面保修选择器
选择器弹窗	selector_modal	保修选项选择弹窗
信息弹窗	info_modal	保修信息弹窗
购物车已保障	cart_protected	带保修的购物车商品行
购物车未保障	cart_unprotected	不带保修的购物车商品行（追加销售）
PDP OEM 小组件	pdp_oem_widget	在产品页面显示 OEM 保修
订单状态	order_status	订单状态页上的保修信息
订单状态弹窗	order_status_modal	订单状态页上的保修详情弹窗
订单状态购买后	order_status_post_purchase	订单状态页上的购买后追加销售
订单状态购买后弹窗	order_status_post_purchase_modal	购买后保修选择弹窗
运输保障	shipping_protection	购物车中的运输保障
运输保障弹窗	shipping_protection_modal	运输保障详情弹窗

---

显示模式

延长保修

模式	说明
inline	直接在页面上显示所有保修选项
modal	显示摘要；点击后打开包含完整选项的弹窗
individual	每个选项都有自己的加入购物车按钮

运输保障

模式	说明
checkbox	简单的复选框开关
button-choice	按钮式选择

---

PDP 选项

• 显示模式 — inline、modal 或 individual
• 必须选择选项 — 在加入购物车之前要求顾客做出保修选择
• 自动选择第一项 — 加载时预先选中第一个保修选项
• 加入购物车时弹窗 — 点击“加入购物车”时打开保修选择器
• 显示“不需要保障”选项 — 显示明确的“拒绝”选项

自定义注入

• 在选择器上方自定义注入 — 显示在保修选择器上方的 HTML 内容
• 自定义注入选择器 — 用于指定小组件放置位置的 CSS 选择器
• 自定义注入位置 — outside-above、inside-top、inside-bottom 或 outside-below

---

购物车选项

• 隐藏信息按钮 — 隐藏保修详情按钮
• 隐藏移除按钮 — 隐藏移除保修按钮
• 在购物车中隐藏延长保修商品行 — 隐藏保修行（仍在购物车中，只是不可见）
• 隐藏延长保修商品行价格档位 — 隐藏价格档位信息
• 隐藏延长保修商品行详情 — 隐藏期限和服务级别
• 计入受保障商品行总价 — 将保修价格合并到产品总价中
• 禁用保修商品行交互 — 防止点击保修商品
• 隐藏保障详情 — 隐藏保障范围信息
• 隐藏保修期限 — 隐藏时长
• 隐藏 Umbrella 品牌标识 — 移除 Umbrella 标志
• 使用自定义模板 — 使用自定义 HTML 模板（参见小组件模板）

---

订单状态选项

• 隐藏索赔按钮 — 隐藏“提交索赔”
• 隐藏状态指示器 — 隐藏有效/已过期/待处理指示器
• 隐藏索赔期信息 — 隐藏索赔期详情

---

订单状态弹窗选项

• 隐藏保单 ID — 隐藏保单 ID 编号
• 隐藏开始日期 / 隐藏结束日期 — 隐藏保障日期
• 隐藏索赔期 — 隐藏索赔期信息
• 隐藏查看保单按钮 — 隐藏指向完整保单详情的链接
• 隐藏提交索赔按钮 — 隐藏提交索赔的按钮

---

运输保障选项

• 显示模式 — checkbox 或 button-choice
• 结账按钮 HTML — 选择按钮的自定义 HTML
• “不需要，继续”文本 — 拒绝选项的文本（例如“不用了，谢谢”）

---

本地化

使用嵌套的语言对象为小组件文本添加翻译：

{
  "translations": {
    "fr": {
      "addProtection": "Ajouter la protection",
      "fileAClaim": "Deposer une reclamation"
    }
  }
}

---

相关内容

• 小组件模板 — 自定义 HTML 模板和数据属性
• Shopify 主题扩展 — 通过主题嵌入使用 PDP 小组件
• Shopify 结账扩展 — 结账小组件设置
• Shopify 订单扩展 — 订单状态小组件显示