如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Product Tabs 商品选项卡装修模块
概述
Product Tabs 是一个为商城后台「设计 → 装修」功能增加商品选项卡展示模块的插件。你可以添加多个「专辑」（每个专辑为一个商品分类），前台以选项卡（Tab）形式展示——顶部是各专辑的标题导航，切换选项卡即可切换展示对应专辑下的商品。商品卡片自带折扣角标（X% OFF）、原价划线与现价，底部「查看更多」按钮跳转到当前专辑的分类页。非常适合用于首页多品类商品推荐、品牌专区展示、促销活动分类导购等场景。
主要功能
🏷️ 选项卡式商品展示
| 特性 | 说明 |
|---|---|
| 多专辑支持 | 可添加多个商品分类作为专辑，每个专辑独立为一个选项卡 |
| 两种切换方式 | 支持鼠标移动悬停切换 / 点击切换 |
| 独立商品列表 | 每个选项卡自动拉取对应分类下的商品 |
| 查看更多链接 | 底部按钮自动链接到当前选项卡的商品分类页 |
🛒 商品卡片特性
| 特性 | 说明 |
|---|---|
| 折扣角标 | 自动计算折扣百分比，以品牌色旗形角标展示（X% OFF） |
| 价格展示 | 现价 + 原价划线，清晰呈现优惠力度 |
| 登录后显示价格 | 遵循系统设置，未登录时可隐藏价格 |
| 图片悬停放大 | 商品图片悬停时平滑放大 |
📐 丰富的配置选项
| 配置项 | 说明 |
|---|---|
| 标题 | 模块主标题（支持多语言） |
| 简短描述 | 模块描述文字（支持富文本） |
| 产品总数量 | 每个选项卡展示的商品数量（1~50个） |
| PC每排数量 | 可设置 2~6 列 |
| 移动端每排数量 | 可设置 1~3 列 |
| 专辑切换方式 | 鼠标移动 / 点击 |
| 查看更多文案 | 自定义按钮文字（支持多语言） |
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
📋 专辑（选项卡）管理
| 特性 | 说明 |
|---|---|
| 拖拽排序 | 选项卡支持拖拽调整顺序 |
| 自定义标题 | 每个选项卡可自定义导航标题（支持多语言） |
| 专辑选择器 | 弹窗式分类选择器，支持搜索 |
| 自动解析 | 自动拉取专辑封面、标题和跳转链接 |
技术特点
-
✅ 选项卡切换流畅：支持鼠标悬停和点击两种切换模式，切换时有淡入动画
-
✅ 响应式网格：PC 端 2~6 列，移动端 1~3 列，自动适配
-
✅ 折扣角标自动计算：根据原价与售价自动计算并展示折扣百分比
-
✅ 智能价格显示：遵循系统「登录后显示价格」配置
-
✅ 选项卡导航智能命名：优先使用自定义标题，无自定义时自动取分类末级名称
-
✅ 无数据自动隐藏：无商品的选项卡在前台自动隐藏（装修预览时展示占位卡片）
-
✅ 查看更多动态链接：自动链接到当前激活选项卡的商品分类页
-
✅ 任意主题兼容：前台视图由插件自带，商品卡片复用当前主题组件
-
✅ 装修编辑器完美支持：实时预览，选项卡可拖拽排序
适用场景
-
首页多品类商品推荐（女装/男装/童装/配饰）
-
品牌专区展示（耐克/阿迪/彪马）
-
促销活动分类导购（限时抢购/热销爆款/新品上市）
-
季节性商品推荐（春夏/秋冬/节日限定）
-
楼层式商品导航
