商城促销图片展示全链路总览 (Promotion Display Overview)
写在前面（给电商运营、市场营销与商城管理员）：
在过去的 B2B 商城运营中，更换首页 Banner、推出限时特惠活动往往依赖技术人员改动页面代码或由设计手工替换切图。由于缺乏统一的活动生命周期、受众过滤与多语言治理机制，经常导致“活动已过期但横幅仍在展示”、“不同区域仓库库存不一时向客户展示了无法配送的产品活动”、“双语商城中海外商户看到的仍是全中文海报”、“手机端直接缩放桌面大图导致字迹模糊”等痛点。现在，通过全新定制开发的
3will_website_sale_promotion_display模块，我们构建了从后台活动与素材治理、展示位置抽象解耦、多语言海报分发、精准受众定向到前端无代码可视化装修的完整闭环。
1. 业务痛点与解决方案对照
针对生鲜食材配送与大宗 B2B 餐饮电商的典型运营场景，本模块实现了以下针对性升级：
| 业务环节 | 传统痛点 | 现在的解决方案 | 核心操作角色 |
|---|---|---|---|
| 广告位与装修 | 页面硬编码或写死图片，改动 Banner 需要技术人员重新发版上线。 | 「展示位置 (Position)」解耦抽象：定义标准广告位通道（如“商品列表顶部通栏”、“大促活动专区”），页面组件绑定位置即可动态拉取内容。 | 运营/管理员：定义位置与拖拽 Snippet |
| 展示形态多样性 | 无法根据页面性质区分展示形态（通栏需轮播滑动，大促专区需多图平铺）。 | 双核心形态支持：单组件支持一键切换「轮播 (Carousel)」与「罗列 (Grid)」，分别完美适配列表页置顶通栏与独立大促专题页。 | 视觉/装修人员：属性面板无代码切换 |
| 多语言本地化 | 跨国与多语种商户（如中英文）共用同一套海报，英文商户无法看懂中文营销文案。 | 原生多语言 (i18n) 动态海报：单条海报支持绑定特定语言（zh_CN / en_US），前台随商户语言偏好无缝切换专属海报，并支持通用语言兜底。 | 市场营销/外贸拓展：配置多语种素材 |
| 多终端体验 | 桌面端大图在平板与手机端等比压缩后文字过小、按钮错位，影响后厨采购体验。 | 三端响应式与双图架构：支持「桌面端」与「移动端专属图」，并在桌面、平板、手机三端提供自适应排版。 | 视觉设计/运营：上传对应规格素材 |
| 客群定向 | 所有登录客户与游客看到的促销海报一模一样，无法针对高价值连锁 KA 或特定区域开展定向营销。 | 三层受众定向机制：支持按「客户分类标签（如 VIP 批发商、连锁餐饮）」、「发货仓库（如华东总仓、华南仓）」与「独立网站」求交过滤。 | 营销主管：配置适用标签与仓库 |
2. 核心架构与业务工作流
系统采用“活动主表（Activity）- 海报素材（Image）- 展示位置（Position）- 页面组件（Snippet）”四层解耦的架构：
3. 两个标准业务场景与三端效果直观呈现
为了贴近实际业务运作，系统在两个典型商业场景中分别配置了不同的展示策略：
场景一：商品列表页（/shop）上方 Banner —— 轮播展示 (Carousel)
在商户最常访问的商品目录与采购下单页顶部，放置黄金展示位通栏，采用轮播模式 (Carousel)，支持左右滑动、分页指示点与自动定时切换，不占用过多垂直翻页高度。
1. 桌面端效果 (Desktop View)
超宽画幅呈现清晰大字号海报并排滑动，左侧保留商品分类与单仓筛选侧边栏，右侧主视区直观展示核心大促利益点，文字清晰易读：
2. 平板端效果 (Pad / iPad View)
自适应平板中等屏幕宽度，分类栏与商品网格紧凑排列，轮播图保持良好横纵比例并支持触控滑动：
3. 手机移动端全屏效果 (Mobile / iPhone View)
自动收起侧边栏为抽屉导航，顶部自适应呈现单张大字号轮播 Banner，下方承接单仓提示与商品卡片。采用真机全屏竖向流呈现，文字饱满清晰：
场景二：单独的促销活动专属页（/promotions）—— 单列罗列展示 (Single-Column Grid)
在大型节日、周年庆或季节清仓时，设立独立的二级营销落地页（例如 /promotions），推荐采用单列罗列模式 (Single-Column Grid)。每张专题海报纵向平铺舒展展示，避免多列挤压导致文字过小，视觉冲击力极强。
1. 桌面端效果 (Desktop View)
单列大卡片居中排列，超大字号活动标题、利益点与行动按钮直观呈现，支持点击直达各专题或触发全屏 Lightbox：
2. 平板端效果 (Pad / iPad View)
在 iPad 等平板设备上整洁平铺，大字号排版保障触控点击舒适度：
3. 手机移动端全屏效果 (Mobile / iPhone View)
在手机端保持单列全宽卡片，拇指上下滑动体验自然顺畅，每一张促销卡片的核心文案与价格标签都清晰可见：
4. 多语言 (i18n) 动态海报能力
B2B 餐饮食材电商往往服务多元化背景的采购商。本模块支持在海报素材层设定所属语言：
- 中文语言环境 (zh_CN)：前台页面切换为简体中文时，系统优先呈现带有中文文案、本地货币与定制口号的专属素材：
- 英文语言环境 (en_US)：前台语言切换为 English 时，系统秒级自动替换为全英文视觉设计与国际化营销用语：
- 通用多语言兜底 (Universal Fallback)：对于未指定特定语言的素材，将在所有语言环境下作为通用海报正常展示。
5. 展示位置 (Promotion Position) 的核心属性与业务价值
很多初学者容易将“海报”与“页面”直接绑定，导致页面一改、图片全丢，或者不同页面重复上传同一张海报。本模块引入了独立的 「展示位置 (Promotion Position)」 实体：
- 业务与装修解耦：
- 电商运营只需在后台给海报打上“商品列表顶部通栏”标签；
- 页面设计人员只需在
/shop页面放入 Snippet 并绑定该位置； - 以后每次活动上线/下架海报，完全不需要动前台页面代码或重新编辑页面！
- 严格的多商城数据隔离：每个展示位置都强制归属于特定的
网站 (Website)，彻底杜绝 A 商城的促销内容误展示到 B 商城。 - 安全防呆约束：已被海报素材关联、或已被页面 Snippet 引用的展示位置，系统底层直接禁止删除或擅自修改所属网站，确保线上页面不会因误操作而崩溃。
6. 本模块操作指南目录
请根据您的工作角色查阅对应的详细 SOP：
- 👉 促销活动与展示位置配置 SOP
后台创建营销活动、排期上线、精准受众（客群标签/仓库）以及展示位置的核心属性与防呆配置。 - 👉 海报素材管理与多语言适配 SOP
高清双端素材上传、多语言 (zh_CN / en_US) 专属海报绑定、跳转动作与批量向导。 - 👉 商城页面装修与 Snippet 配置 SOP
如何使用网站构建器分别搭建「商品列表顶部轮播 Banner」与「独立大促专区罗列页面」，以及三端自适应调优。 - 👉 业务规范、降级策略与常见问题排查 (Policy & FAQ)
设计素材尺寸规范、未登录访客降级规则、优先级叠加计算逻辑及前台不显示海报排查清单。