小组件模板

小组件模板系统

仪表板 → 小组件 → 模板

模板系统让您可以完全掌控保修选项、购物车项目、订单状态显示和运输保障在店面上的呈现方式。12 种小组件类型中的每一种都可以使用自定义 HTML 模板，通过 Handlebars 风格的变量和数据属性实现交互。

注意自定义模板需要在小组件配置中启用 useCustomTemplate。禁用时将使用默认渲染。

模板管理器

在 仪表板 → 小组件 → 模板 中打开模板管理器。它提供带语法高亮和自动补全的 Monaco 代码编辑器、预览面板，以及按小组件类型列出的可用变量文档。

数据属性参考

数据属性将模板元素与 Umbrella 小组件的 JavaScript 连接起来。

弹窗触发器

属性	说明
`data-umbrella-modal-trigger`	点击时打开弹窗。取值：`"selector"` 或 `"info"`。
`data-umbrella-modal-close-btn`	点击时关闭弹窗。

保修选项选择

属性	说明
`data-umbrella-options`	必需。选项选择器的容器。
`data-umbrella-option`	必需。标记单个可选选项。
`data-umbrella-option-price`	显示选项价格（切换变体时更新）。
`data-umbrella-selected-state`	根据选中状态改变可见性。
`data-umbrella-selected-warranty-title`	显示所选保修的标题。
`data-umbrella-selected-warranty-price`	显示所选保修的价格。使用 `"rounded"` 或 `"withCents"`。

购物车操作

属性	说明
`data-umbrella-add-to-cart-btn`	在弹窗/购物车中必需。将所选保修加入购物车。
`data-umbrella-decline-btn`	在弹窗/购物车中必需。拒绝保修。

运输保障

属性	说明
`data-umbrella-shipping-protection-checkbox`	必需。用于启用运输保障的复选框。
`data-umbrella-shipping-protection-checkbox-label`	必需。复选框的标签。

可展开区块

属性	说明
`data-umbrella-expandable-section`	可展开区块的容器。
`data-umbrella-expandable-content`	显示/隐藏的内容。
`data-umbrella-expandable-toggle`	切换内容显示的按钮。

折叠面板

属性	说明
`data-umbrella-collapsible-accordion`	折叠面板容器。
`data-umbrella-collapsible-item`	单个折叠面板项。
`data-umbrella-collapsible-button`	面板项的切换按钮。
`data-umbrella-collapsible-content`	面板项的内容区域。

下拉菜单

属性	说明
`data-umbrella-dropdown-menu`	下拉菜单容器。
`data-umbrella-dropdown-toggle`	打开/关闭下拉菜单。
`data-umbrella-dropdown-content`	下拉菜单内容面板。
`data-umbrella-dropdown-option-value`	每个下拉选项的值。
`data-umbrella-dropdown-selected-value`	显示所选的值。
`data-umbrella-dropdown-unselected-placeholder`	未选择任何内容时显示的占位文字。

模板变量参考

变量使用 Handlebars 语法：{{variable}} 用于文本，{{{variable}}} 用于 HTML 安全内容（价格）。

产品

{{productImage}}, {{productName}}, {{productType}}, {{productHandle}}, {{productId}}, {{productQuantity}}, {{{productPrice}}}

所选变体

{{selectedVariantId}}, {{selectedVariantTitle}}, {{{selectedVariantPrice}}}

保修

{{warrantyId}}, {{warrantyTitle}}, {{{warrantyDescription}}}, {{warrantyImage}}, {{warrantyProductHandle}}, {{warrantyProductUrl}}

选项循环（`{{#each options}}`）

{{serviceLevel}}, {{term}}, {{title}}, {{{description}}}, {{imageUrl}}, {{isNoCoverageOption}}, {{{priceRounded}}}, {{{priceWithCents}}}, {{{totalPrice}}}, {{variantId}}

所选保修（购物车）

{{warrantyTerm}}, {{warrantyServiceLevel}}, {{{warrantyPrice}}}, {{{warrantyPriceRounded}}}, {{warrantyTermDisplay}}, {{warrantyVariantId}}

显示模式标志

{{isInlineMode}}, {{isIndividualMode}}, {{isModalMode}}, {{{cheapestPrice}}}, {{{cheapestPriceRounded}}}

订单项上下文

{{isProtectedProductLineItem}}, {{isWarrantyLineItem}}

购物车定价

{{isMultipleQuantity}}, {{{warrantySingleLineItemPrice}}}, {{{warrantyTotalLineItemPrice}}}（另有 rounded 和 withCents 变体）

保障标志

{{isEligible}}, {{coversManufacturerDefect}}, {{coversAccidentalDamage}}, {{coversWearAndTear}}, {{coversSpillOrStain}}, {{coversLostOrStolen}}

保单（订单状态）

{{policyId}}, {{policyNumber}}, {{policyStatus}}, {{policyStartDate}}, {{policyEndDate}}, {{isActive}}, {{claimWindowOpen}}, {{daysRemaining}}, {{orderName}}, {{fileClaimUrl}}

各小组件类型可用的变量

小组件类型	产品	变体	保修	选项	保障	显示模式	订单项	购物车	保单
pdp_widget	是	是	是	是	是	是	—	—	—
selector_modal	是	是	是	是	是	部分	—	—	—
info_modal	是	是	是	—	是	—	—	—	—
cart_protected	是	是	是	—	是	—	是	是	—
cart_unprotected	是	是	是	是	是	是	—	是	—
order_status	—	—	是	—	是	—	—	—	是
order_status_modal	—	—	是	—	是	—	—	—	是
order_status_post_purchase	—	—	是	是	是	—	—	—	—
order_status_post_purchase_modal	—	—	是	是	是	—	—	—	—
shipping_protection	—	—	是	—	是	—	—	—	—
shipping_protection_modal	—	—	是	—	是	—	—	—	—

提示

价格请使用三重花括号 {{{price}}}，以便正确渲染 HTML 实体
务必包含 data-umbrella-options 和 data-umbrella-option，选项选择才能正常工作
使用不同的产品变体进行测试，确认价格会随之更新
使用 {{#if isInlineMode}} 为特定显示模式编写布局
在弹窗中包含 data-umbrella-modal-close-btn