如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Recommend Album 推荐专辑装修模块
概述
Recommend Album 是一个为商城后台「设计 → 装修」功能增加推荐专辑展示模块的插件。模块由两部分组成：一侧为专辑介绍横幅（含专辑封面图、标题、简短描述和「Shop Now」按钮），另一侧为商品网格（带折扣角标）。商品来源支持两种方式：手动挑选商品（优先展示）或从专辑分类自动拉取。左右布局可切换，非常适合用于首页专辑推荐、促销活动专区、品牌精选展示等场景。
主要功能
📦 专辑推荐 + 商品网格
| 区域 | 内容 | 说明 |
|---|---|---|
| 专辑横幅 | 封面图 + 标题 + 描述 + 「Shop Now」按钮 | 按钮跳转到所选专辑分类页 |
| 商品网格 | 带折扣角标的商品卡片 | 支持手动挑选或按专辑自动拉取 |
🎯 两种商品来源
| 来源方式 | 说明 |
|---|---|
| 选择专辑 | 选择一个商品分类，自动展示该分类下的商品 |
| 选择商品 | 手动搜索并挑选商品，支持拖拽排序，优先于专辑商品展示 |
📐 灵活的配置选项
| 配置项 | 说明 |
|---|---|
| 布局 | 商品在右 / 商品在左（横幅在另一侧） |
| 标题 | 横幅主标题（支持多语言） |
| 简短描述 | 横幅描述文字（支持富文本） |
| 按钮标题 | 「Shop Now」按钮文案（支持多语言） |
| 产品总数量 | 可设置 1~50 个商品 |
| PC每排数量 | 可设置 2~6 列 |
| 移动端每排数量 | 可设置 1~3 列 |
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
🛒 商品卡片特性
| 特性 | 说明 |
|---|---|
| 折扣角标 | 自动计算折扣百分比，以品牌色旗形角标展示（X% OFF） |
| 价格展示 | 现价 + 原价划线 |
| 登录后显示价格 | 遵循系统设置，未登录时可隐藏价格 |
| 图片悬停放大 | 商品图片悬停时平滑放大 |
🎨 专辑横幅特性
| 特性 | 说明 |
|---|---|
| 封面背景 | 专辑封面图作为背景，文字卡片居中悬浮 |
| 卡片样式 | 白色卡片居中显示，带阴影效果 |
| 响应式设计 | 移动端自动堆叠为横幅在上、商品在下 |
技术特点
-
✅ 双布局灵活切换：商品在右 / 商品在左，适配不同设计需求
-
✅ 双商品来源：手动挑选商品（优先）或按专辑自动拉取
-
✅ 商品拖拽排序：手动挑选的商品支持拖拽调整顺序
-
✅ 响应式网格：PC 端 2~6 列，移动端 1~3 列，自动适配
-
✅ 折扣角标自动计算：根据原价与售价自动计算并展示折扣百分比
-
✅ 智能价格显示：遵循系统「登录后显示价格」配置
-
✅ 专辑选择器：弹窗式分类选择器，支持搜索
-
✅ 商品多选器：弹窗式商品选择器，支持搜索和多选
-
✅ 任意主题兼容：前台视图由插件自带，样式使用 CSS 变量适配主题
-
✅ 装修编辑器完美支持：实时预览，专辑和商品选择器直观易用
适用场景
-
首页专辑/分类推荐（如「夏季精选」+ 商品网格）
-
品牌专区展示（品牌故事 + 热销商品）
-
促销活动专区（活动介绍 + 促销商品）
-
新品发布区（新品专辑 + 新品列表）
-
内容 + 商品组合营销
