围绕“配置 Web-App 站点门户”完成必要设置，并通过测试账号验证生效范围。
概述
本文说明“配置 Web-App 站点门户”的适用条件、配置步骤、验证方法和回退方式。
开始之前
[!IMPORTANT]
- 适用范围：订货通专业版。
- 角色权限：使用具备订货通管理权限的管理员账号。
- 前置配置：准备测试客户、商品和价格数据。
操作步骤与说明
Web_App 站点门户
站点门户概述
站点门户与之前的企业门户是两个框架，可理解为站点门户为订货通 3.0 前端框架。这个全新的前端框架基于全新的技术，对商城进行了重构。
-
使用场景： 在电商发展的长期影响下，客户对订货商城的 UI 美观度、操作流畅性以及功能定制化需求不断提升。原有渠道门户因设计风格传统、体验不佳，已难以满足期望。全新升级的站点门户采用国际主流 B2B 电商 SaaS 模式，提供符合现代审美的 UI 设计、优化的订货流程，支持灵活配置与定制开发，旨在提升用户体验，满足订货需求。
-
功能升级及价值 订货门户 3.0 全新上线，UI 颜值及体验全面升级，支持组件灵活配置与 PWC 低代码定制开发。在显著提升用户体验和效率的同时，可满足业务个性化定制需求。
申请灰度
申请订货通独立站点灰度项
配置完成后，大概的效果如下：
配置和应用
Web 站点
新增 Web 站点
1、在订货通的配置中，新建站点门户，维护基本信息：站点名称、是否需要登录访问、适用范围；可点立即使用直接引用订货通商城模板
需要登录访问：不需要时，需要开启游客模式
移动端显示底导航：新建成功后此配置无法更改
2、点击操作WEB 站点进入 web 门户配置页面，根据需要配置页面和组件，并在主导航菜单中配置显示出来
3、访问设置中，可讲订货通公共小程序或专属小程序绑定站点门户移动端进行访问
首页、页眉页脚及导航配置
订货通首页组件：商品列表、广告轮播、收藏商品、推荐分类
1、配置页眉，一般新增一个栅栏容器，配置栅栏布局，对齐方式
2、举例：栅栏容器分三列，依次拖入图片、多级导航、个人中心
个人中心，可以再拖一个栅栏容器，放迷你购物车组件
多级导航：除了首页、新建几个站内页面、例如：商城、商品详情、购物车、订单；通过配置导航内容新建菜单项绑定站内页面
3、配置页脚：一般配置快捷访问链接，主要用到组件，栅栏容器、富文本组件
4、配置首页区域：幻灯片、图文组件 1、商品列表等
商城页配置
订货通商品组件：商品列表、商品分类数、商品筛选（左侧）、商品筛选（顶部）、商品筛选结果、商品排序、商品分页、商品列表数据
商城列表页
1、新建商城页签
2、配置商品组件
商品详情页配置
1、新建商品详情页（不用在导航中显示）
2、组装商品详情组件
购物车页面配置
1、新建购物车页面
2、组装购物车页面组件
订单页面配置
1、新建销售订单页面
2、依次配置订单列表、详情、新建页面
App 站点
新增 App 站点
同个站点门户，搭建移动端
维护站点页面
同 web 端一样，按顺序维护首页、商城（商品列表）、商品详情、购物车、订单等页面。
维护 App 导航
配置多级导航，将需要显示出来的页面配置出来。
访问站点门户
访问 Web 站点
提供新的站点门户 url 给客户，或绑定在企业门户中，让用户体验新的站点效果。
1、首页效果
2、商城效果
3、购物车效果
4、订单效果
访问 App 站点
1、提供新的站点门户 url 给客户，或提供客户与伙伴门户地址，让用户体验新的站点效果。
2、登录商城后，效果如下。
多级导航模式
底导航模式
其他功能
配件商城支持基于整机选配件
互联应用配件商城中新增整机选配件组件，管理员配置好组件后，经销商或终端用户在站点中点击整机选配件按钮就会显示产品爆炸图（爆炸图以拆解视角清晰展示整机各部件的位置、层级和关联关系），用户点击对应部件即可快速定位适配配件，消除人工识别误差，大幅缩短选配时间。
管理端：
应用端：
注：依赖开关，开启 CPQ 配置，且爆炸图报价开关已开启（需首先购买“OCR 文字识别资源包-通用识别类型（高精度位置）”后，才能开启产品爆炸图功能。）
开启爆炸图功能后，在销售 BOM 的详情页右上角，点击“配置爆炸图”，可进入爆炸图的配置页面。
进入爆炸图配置页面后，在 OCR 识别次数足够的前提下，系统会自动识别出爆炸图的部件编号，在左侧销售 BOM 列表的“图纸编号”字段上，选中对应的部件编号，即可完成匹配。
Web 站点支持单个产品分类/商城类目、单产品显示
管理端：配置导航内容，可指定数据源，选择具体的产品分类或是单个产品
应用端
组件说明
幻灯片
幻灯片组件概述
幻灯片（走马灯）组件是用于在商城首页展示多轮播内容的可视化组件，支持配置轮播项、自动切换、样式及交互效果，可用于商品推广、活动宣传等场景，提升页面视觉吸引力与信息触达效率。
组件添加
- 进入首页编辑页面，在左侧组件面板中展开「订货通组件」分类。
- 找到幻灯片组件，将其拖拽至页面编辑区域的目标位置。
- 组件添加后，系统自动生成默认轮播结构，可在右侧面板进行配置。
核心属性
| 配置项 | 说明 |
|---|---|
| 轮播项 | 定义轮播展示的内容条目，支持多条目管理 |
| 高度 | 设置组件整体显示高度 |
| 自动切换 | 控制轮播是否自动播放 |
幻灯片内容配置
4（1） 结构说明
商城幻灯片由多个轮播项组成，每个轮播项由重叠容器承载，内部包含：
-
背景图片：作为轮播视觉基底
-
文本组件：展示标题 / 副标题等文字内容
-
富文本组件：补充描述性文字
-
按钮组件：配置跳转交互（如「BUY」购买按钮）
4（2） 内容编辑方式
在左侧大纲树中展开「走马灯」节点，选择目标「轮播项」。
展开「重叠」子节点，可分别编辑：
- 文本：修改标题文字、字体、颜色、字号等样式。
- 富文本组件：编辑描述内容，支持富文本格式（如换行、加粗）。
- 按钮：修改按钮文字、链接地址、点击事件（如跳转商品详情页）。
可直接在中间预览区域点击对应元素，快速进入编辑状态。
图文组件 1
图文组件概述
图文组件 1 是订货通组件库中的复合型布局组件，用于在页面中展示「图片 + 文字 + 按钮」的组合内容，适合作为品牌介绍、活动说明或商品引导模块。
核心功能与配置项
-
图片子组件支持上传 / 替换品牌 / 商品相关图片可设置对齐方式（左 / 中 / 右）支持配置点击跳转（外部链接 / 内部页面）
-
富文本子组件支持编辑标题、描述文本，可自定义字体、字号、颜色用于展示品牌介绍、活动文案等
-
按钮子组件可自定义按钮文字（如示例中的 “
LEARNMORE”）支持配置点击跳转链接，引导用户执行操作
个性化推荐商品（商品列表）
个性化推荐商品组件概述
个性化商品（商品列表）是订货通组件库中的推荐类组件，用于在页面中展示符合特定规则的商品列表，实现精准的商品推荐场景。
核心配置项
数据来源配置
组件支持两种数据来源模式，可根据业务需求选择：表格
| 来源类型 | 配置方式 | 适用场景 |
|---|---|---|
| 手动选择 | 点击「+ 添加商品」，从商品库中手动勾选商品（最多 30 个） | 固定推荐特定商品（如爆款、新品） |
| 自定义 | 点击「设置条件」，通过商品标签等规则筛选商品（如「商品标签 等于 推荐」） | 动态推荐符合标签规则的商品（如按分类、标签自动更新） |
2（2） 布局配置
- 显示个数：设置当前页面展示的商品数量（示例中为 7 或 10 个）。
- 显示方式：换行：商品自动换行排列，适合展示更多内容。横向滚动：商品横向排列，通过左右滑动查看更多，节省垂直空间。
- 换行：商品自动换行排列，适合展示更多内容。
- 横向滚动：商品横向排列，通过左右滑动查看更多，节省垂直空间。
富文本支持插入分类名称
管理端：商城页签，插入富文本组件，可配置产品分类/商城类目名称变量
应用端：选择具体产品分类后，显示分类名称
预期结果与验证
- 重新打开配置页，确认“配置 Web-App 站点门户”涉及的开关、范围或规则保持为保存值。
- 使用测试账号执行受影响流程，确认页面入口、数据范围和操作权限与本次配置一致。
- 检查本次配置影响的业务记录，确认其按正文规则生成或流转。
常见问题与故障排除
- 正式使用前，请先用测试数据验证。
- 功能不可见时，请检查版本、权限和数据范围。
撤销或回退
- 返回本文所述的配置入口。
- 恢复变更前的开关、布局或规则值。
- 使用测试账号重新验证受影响流程。