配置商品与交易页面模块

08 页面构建器 / 08.02 模块与展示

先准备商品，再配置页面

先在 WordPress 后台完成商品类型、价格、库存、属性和交付设置。多规格商品还要配置具体规格组合，例如“红色、M 码”，这类组合称为变体。

使用有构建器编辑和保存权限的账号，打开目标网站的构建器，选择商品列表、商品详情或对应交易页面。商品列表负责展示商品，商品详情读取当前商品，购物车、结账、支付通知和订单模块分别用于交易过程中的页面。

设置商品列表的数据范围

添加或选中商品列表，进入「内容设置」，先设置数据来源，再调整排序和数量。

设置	怎么使用
数据来源	普通商品目录选择「常规列表」；详情页的相关商品区可选择「当前内容相关」。后者需要当前内容作为依据。
分类等筛选条件	按需要选择商品分类、品牌、标签或属性范围，再检查实际商品是否符合条件。
自动归档	用于根据当前商品归档页取得内容。普通页面应明确选择所需范围。
默认排序	选择列表初始排序；使用热门排序时，一并检查热门天数。
数量	设置总数量、每行上限和最小卡片宽度。窄屏下实际列数可能少于上限。
加载方式	选择分页或加载更多，需要时开启自动加载更多。
标签数量	限制商品卡片展示的标签数量，当前输入范围为 0 至 20。

选择布局并调整卡片

当前商品列表已不止网格、列表、瀑布流三种布局，还提供商品专用布局和横向轮播。请在「布局样式」中选择，再按当前布局提供的展示项配置。

设置	调整要点
展示项	选择卡片需要显示的信息。切换布局后重新检查，避免沿用不适合新布局的组合。
标题	调整行数、字号和粗细，用较长的商品名称检查截断效果。
缩略图类型	当前设置提供常规和切换类型；背景类型未开放，不应按旧说明寻找该选项。
缩略图占满、宽度和圆角	调整图片所占区域及转角，并检查不同形状的商品图是否被过度裁切。
缩略图尺寸和比例	选择合适的图片版本和区域比例，兼顾清晰度与加载量。
卡片内边距和间距	分别调整卡片内部留白与卡片之间的距离。整个模块的边距和圆角到「容器设置」修改。
轮播箭头	横向轮播布局可设置箭头显示和位置。箭头移到外侧后，要检查留白和裁切。

配置商品详情和交易页面

1. 进入商品详情模板，添加商品主展示区，并选择需要的信息。
2. 按页面需要组合正文、Banner、评论等模块。
3. 分别检查购物车、结账、支付通知和订单页面是否使用了对应模块。
4. 保存设置，打开一件真实商品，检查图片、价格、规格选择和购买入口。
5. 对多规格商品逐个切换变体，核对图片、价格和可购状态，不要只检查默认预览。

构建器主要控制展示。价格、库存、规格、税费和交付规则仍由商品及相关后台设置决定。隐藏价格区域不会自动把商品变成询盘商品。

从商品页走完整个购买流程

页面上出现购买按钮，并不说明支付已经配置完成。先检查商品是否可售、是否有库存、规格是否完整，再核对价格、币种、支付凭据和游客购买条件。

还要检查支付结果能否返回网站并更新订单。外部支付服务把处理结果通知网站的过程，通常称为支付回调。

1. 使用普通顾客账号打开目标网站的商品页；需要支持游客购买时，再以未登录状态检查。
2. 选择规格和数量，进入购物车或结账页，核对商品、金额及适用费用。
3. 按实际业务允许的测试方式检查支付流程，确认返回页面和订单状态一致。
4. 对数字商品核对交付内容，对需要配送的商品核对配送信息。

检查多语言和不同网站

商品译文及其变体要分别核对，尤其是价格、库存、附件和交付字段。SKU 是区分商品或规格的识别号，也应检查是否正确；不要仅凭复制成功就认定这些数据已持续同步。

同一后台对应多个网站时，应从当前网站的商品页实际走到结账页。另一个网站的成功订单，不能证明当前网站的支付、配送和商品范围都已配置正确。

付款失败时，按页面或接口给出的具体报错排查商品、库存、规格、价格、币种和支付配置，避免只反复修改购买按钮的外观。