Ogani 把生鲜商城常见的分类导航、促销、商品网格和详情页放进一套前端模板里。v1.0.0 使用 Bootstrap 4.4.1、jQuery、CSS 与 Sass，包含 8 个站点页面；包内另有一个 main.html，是许可提示页，不计入业务页面。它更适合商品分类较多的生鲜店或农产品商城原型，实际库存、购物车和支付仍需后端接管。
从分类找到商品，再进入详情页
首页 index.html 同时放了分类导航、搜索、品类轮播、特色商品、促销和博客入口。商品列表 shop-grid.html 另有侧栏、折扣商品、价格范围与分页；shop-details.html 则展开图集、价格、数量、描述标签和相关商品。
这套页面已经给商品内容留出独立空间。生鲜商品可以在详情中补充规格、库存、介绍和评价，而不必把信息挤进首页卡片。分类、商品图片与促销要对应真实货品；演示商品、金额和活动不能直接作为商城数据使用。
筛选、滑块和图片切换，完成的事情并不一样
首页与商品列表都摆出了筛选入口，但代码实现的范围不同。判断需要补什么，最好从控件实际改变了哪些内容入手：
| 入口 | 当前已实现 | 接入商城时仍需补齐 |
|---|---|---|
| 首页特色商品分类 | MixItUp 按 All、Oranges、Fresh Meat、Vegetables、Fastfood 切换已加载卡片 | 真实分类与商品数据；这不是向服务器查询商品 |
| 列表价格滑块 | jQuery UI 把选中范围写入最低价、最高价输入框，演示范围为 10–540 | 按价格过滤商品、更新结果与分页 |
| 列表下拉与分页 | Nice Select 负责下拉样式，分页链接仍为占位 | 排序条件、查询与对应页数据 |
| 商品详情缩略图 | 读取 data-imgbigurl，替换当前主图 | 让缩略图、大图与真实商品对应 |
| 商品与购物车数量 | 加减按钮改变输入值 | 保存选择，并重算行小计、总额和运费 |
Owl Carousel 用于品类、最新商品、折扣商品和详情缩略图等区域，品类轮播会按宽度调整为一至四项。它解决的是展示空间与切换方式，和库存查询、搜索结果没有直接关系。这些交互主要位于 js/main.js。
购物车和结账，需要同一份真实订单数据
收藏、加入购物车、删除、Update Cart 与优惠码界面没有对应业务请求。数量改变也不会保存到本地或服务器。结账表单提交到 #，PLACE ORDER 不会创建订单或调用支付渠道，页面上的演示总价不能作为真实收款金额。
正式商城应让后端统一处理商品 ID、价格、库存、优惠规则、订单状态与支付回调。商品详情、购物车和结账页要使用对应的商品与订单数据，订单金额按服务端价格重算；只给下单按钮加一个跳转地址，还不能补齐交易流程。
还有一个容易漏掉的文件名：购物车叫 shoping-cart.html，少了一个字母 p。如果改为 shopping-cart.html，桌面导航、移动菜单、商品入口及结账相关链接都要同步改，否则会出现 404。保留原名也可以，关键是所有入口一致。
博客、搜索与联系信息要分别接到真实内容
blog.html与blog-details.html：已经有列表、侧栏、正文、作者、分享及上一篇／下一篇版式。替换文章数据后，还要补分类、分页与有效跳转。- 商品搜索与博客搜索：表单都提交到
#，脚本没有请求或保存输入。需要分别接商品查询和文章查询，不能只留下可输入的搜索框。 contact.html：Google 地图、电话、邮箱和营业时间均是演示资料，应替换为实际业务信息。联系与页脚订阅表单同样没有收件处理。
需要保留表单时，接入对应搜索、邮件订阅或收件服务，并设置必要的输入校验、加载状态、真实结果反馈、反垃圾和隐私同意。移动导航由 SlickNav 与自定义汉堡菜单共同处理，调整分类、页面路径或菜单层级时应兼顾桌面与移动入口。
绿色主题和各页样式从 Sass 目录调整
编译后的样式位于 css/style.css，源文件在 sass 按首页、商品、购物车、结账、博客与响应式拆分。主色等变量从 sass/_variable.scss 调整，sass/style.scss 汇集模块，再编译生成 CSS；不使用 Sass 时可直接编辑现有 CSS。包内没有 package.json，查看静态页面无需先运行 npm 或打包命令。
改造时一起更新 8 个站点页的 Logo、导航、电话、邮箱、语言、分类与页脚；img 里的蔬果、肉类、商品图集、横幅、博客和支付方式图片也要对应替换并补充 ALT。商品、博客、分页、收藏与社交入口中的 # 则应改成实际地址或功能。替换后重点检查图集、筛选、滑块、数量按钮、轮播、移动菜单、表单和地图，不能仅凭已有响应式样式认定全部设备都能正常使用。
本篇说明的是 v1.0.0 文件包。随包页脚标注 CC BY 3.0，并要求保留作者版权信息；使用或分享改编内容应提供适当署名、许可证链接及修改说明。不同时间获取的版本应以各自随附许可为准，不能把本包说明扩展成其他版本的授权承诺。
暂无评论内容