本文为付费教程的骨架翻译：场景与步骤按原文梳理，锁定部分的代码按 Bricks 官方机制补全实现，并已注明「补全实现」。未复制原文代码。
场景：商品网格快速预览
电商网站的商品网格页，访客往往想在不离开列表的情况下快速看看某件商品：图片、价格、简介，甚至直接加购。插件能实现，但用 Bricks 自带的 Popup（弹窗/灯箱） 和 Interactions（交互） 功能可以零插件完成，而且弹窗里放什么完全由你控制——想加 SKU、评价星、颜色选项都可以自己排。
效果：商品卡片上的按钮被点击 → 弹出灯箱 → 左侧是产品图片（或画廊），右侧是标题、价格、短简介、加入购物车按钮和产品 Meta。每个商品弹的内容都是该商品自己的数据（动态数据驱动）。
Step 1：导入 Product Info Popup 模板
- 进入 Bricks → Templates，从模板库导入名为 Product Info 的 Popup 模板（付费原文附带的成品模板链接，导入后按需修改）。
- 检查模板条件：确保它作为 Popup 存在（模板类型为 Popup），不需要绑定到某个页面条件——弹窗由按钮交互触发。
- 如果不想用模板，也可以手动新建一个 Popup 模板：左侧放 Image/Gallery，右侧用 Basic Text 放产品标题、价格、短简介，再加一个 Add to Cart 按钮元素。
弹窗模板的样式（圆角、阴影、尺寸、关闭按钮）都在模板里一次性调好，网格页面每个商品复用它。
Step 2：产品信息动态填充（补全实现）
付费原文锁定，这里按 Bricks 机制补全实现。关键问题：弹窗是全局模板，怎么知道当前点击的是哪个商品？
Bricks 的 Popup 支持通过按钮的数据属性 + 交互动作传递上下文。标准做法：
- 在商品查询循环的卡片上，给快速预览按钮设置自定义数据属性，如
data-product-id="{woo_id}"（把当前商品 ID 写进属性）。 - 点击交互触发 Popup 打开时，Bricks 会把按钮元素作为「来源元素」传入 Popup。
- Popup 内部元素不要用全局动态数据，而是利用 Bricks 的「从来源元素继承」机制：把 Popup 里的产品标题、价格等元素绑定为当前来源元素的动态数据（如
{woo_title}、{woo_price}在 Popup 内会解析到触发它的按钮所在商品的字段）。
具体配置路径：选中 Popup 内的标题元素 → 动态数据 → 数据来源选「Trigger Element（触发元素）」相关选项（或直接依赖 Bricks 对 Popup 上下文的产品数据解析）。不同 Bricks 版本入口名称略有差异，以构建器内实际选项为准。
Step 3：按钮点击交互
- 在商品网格（查询循环）的卡片里选中快速预览按钮。
- 添加点击（click）交互：动作类型选 Show Popup，目标选 Step 1 的 Product Info Popup。
- 保存并到前端测试：点击任意商品的预览按钮，弹窗出现且内容是该商品的数据；点击关闭按钮或遮罩关闭。
如果需要「点击加购后反馈」，可在 Popup 内加 Notice 元素（需先在 Bricks → Settings → WooCommerce 开启 Notice 元素）。
原理说明
- Bricks Popup 是模板级的可复用弹窗，Interactions 的 Show Popup 动作负责触发，两者组合无需任何 JS。
- 「谁触发、显示谁的数据」靠触发元素上下文：按钮在哪个循环项里，Popup 里的商品动态数据就解析到哪个商品。这是整套方案能零插件跑通的核心机制。
- 商品图用 Gallery/图片元素的 WooCommerce 动态数据（如
{woo_product_gallery}），标题价格短简介同理，全部动态驱动。
小结
快速预览 = 一个 Product Info Popup 模板 + 卡片按钮的 Show Popup 交互 + 触发元素上下文的数据解析。相比插件方案，弹窗内容 100% 可控、样式与全站一致、不增加插件负担。锁定部分按 Bricks 机制补全实现，版本差异以构建器选项为准。
小结：Bricks 零插件快速预览的关键是理解 Popup 的触发元素上下文——按钮在哪，弹窗数据就属于哪。模板一次做好，全网格复用。