Bricks 用 Popup + 交互做 WooCommerce 商品快速预览

本文为付费教程的骨架翻译：场景与步骤按原文梳理，锁定部分的代码按 Bricks 官方机制补全实现，并已注明「补全实现」。未复制原文代码。

场景：商品网格快速预览

电商网站的商品网格页，访客往往想在不离开列表的情况下快速看看某件商品：图片、价格、简介，甚至直接加购。插件能实现，但用 Bricks 自带的 Popup（弹窗/灯箱） 和 Interactions（交互） 功能可以零插件完成，而且弹窗里放什么完全由你控制——想加 SKU、评价星、颜色选项都可以自己排。

效果：商品卡片上的按钮被点击 → 弹出灯箱 → 左侧是产品图片（或画廊），右侧是标题、价格、短简介、加入购物车按钮和产品 Meta。每个商品弹的内容都是该商品自己的数据（动态数据驱动）。

Step 1：导入 Product Info Popup 模板

1. 进入 Bricks → Templates，从模板库导入名为 Product Info 的 Popup 模板（付费原文附带的成品模板链接，导入后按需修改）。

2. 检查模板条件：确保它作为 Popup 存在（模板类型为 Popup），不需要绑定到某个页面条件——弹窗由按钮交互触发。

3. 如果不想用模板，也可以手动新建一个 Popup 模板：左侧放 Image/Gallery，右侧用 Basic Text 放产品标题、价格、短简介，再加一个 Add to Cart 按钮元素。

弹窗模板的样式（圆角、阴影、尺寸、关闭按钮）都在模板里一次性调好，网格页面每个商品复用它。

Step 2：产品信息动态填充（补全实现）

付费原文锁定，这里按 Bricks 机制补全实现。关键问题：弹窗是全局模板，怎么知道当前点击的是哪个商品？

Bricks 的 Popup 支持通过按钮的数据属性 + 交互动作传递上下文。标准做法：

1. 在商品查询循环的卡片上，给快速预览按钮设置自定义数据属性，如 data-product-id="{woo_id}"（把当前商品 ID 写进属性）。

2. 点击交互触发 Popup 打开时，Bricks 会把按钮元素作为「来源元素」传入 Popup。

3. Popup 内部元素不要用全局动态数据，而是利用 Bricks 的「从来源元素继承」机制：把 Popup 里的产品标题、价格等元素绑定为当前来源元素的动态数据（如 {woo_title}、{woo_price} 在 Popup 内会解析到触发它的按钮所在商品的字段）。

具体配置路径：选中 Popup 内的标题元素 → 动态数据 → 数据来源选「Trigger Element（触发元素）」相关选项（或直接依赖 Bricks 对 Popup 上下文的产品数据解析）。不同 Bricks 版本入口名称略有差异，以构建器内实际选项为准。

Step 3：按钮点击交互

1. 在商品网格（查询循环）的卡片里选中快速预览按钮。

2. 添加点击（click）交互：动作类型选 Show Popup，目标选 Step 1 的 Product Info Popup。

3. 保存并到前端测试：点击任意商品的预览按钮，弹窗出现且内容是该商品的数据；点击关闭按钮或遮罩关闭。

如果需要「点击加购后反馈」，可在 Popup 内加 Notice 元素（需先在 Bricks → Settings → WooCommerce 开启 Notice 元素）。

原理说明

• Bricks Popup 是模板级的可复用弹窗，Interactions 的 Show Popup 动作负责触发，两者组合无需任何 JS。

• 「谁触发、显示谁的数据」靠触发元素上下文：按钮在哪个循环项里，Popup 里的商品动态数据就解析到哪个商品。这是整套方案能零插件跑通的核心机制。

• 商品图用 Gallery/图片元素的 WooCommerce 动态数据（如 {woo_product_gallery}），标题价格短简介同理，全部动态驱动。

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

小结

快速预览 = 一个 Product Info Popup 模板 + 卡片按钮的 Show Popup 交互 + 触发元素上下文的数据解析。相比插件方案，弹窗内容 100% 可控、样式与全站一致、不增加插件负担。锁定部分按 Bricks 机制补全实现，版本差异以构建器选项为准。

小结：Bricks 零插件快速预览的关键是理解 Popup 的触发元素上下文——按钮在哪，弹窗数据就属于哪。模板一次做好，全网格复用。

注意事项

快速预览有几点要确认：一是弹窗数据来自触发按钮的上下文——按钮在哪件商品卡片里，弹窗读的就是哪件，所以模板一次做好、全网格复用，不用每个产品单独做弹窗；二是移动端别让弹窗太大，快速预览通常从卡片按钮触发，弹窗里内容要克制，避免在小屏占满整屏；三是锁定部分按官方机制补全即可，不同 Bricks 版本弹窗/交互选项名称可能微调，以构建器实际选项为准。相比插件方案，弹窗内容 100% 可控、样式与全站一致、零插件负担。

常见问题（FAQ）

Q：弹窗怎么知道显示哪件商品？ A：数据来自触发按钮的上下文，按钮在哪张卡片，弹窗就读哪件，模板一次复用。

Q：一定要装插件做快速预览吗？ A：不用，Bricks 自带 Popup + Interactions 零插件就能做，内容还完全可控。

Q：移动端要注意什么？ A：弹窗内容别太多，避免小屏占满整屏，影响浏览。

Q：弹窗里能放加购按钮吗？ A：能，弹窗内容你完全控制，SKU、评价、加购等都能自己排。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Form Builder Complete Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程