Ogani 是一套面向生鲜超市、有机食品店和农产品商城的响应式电商网站模板。v1.0.0 压缩包包含 9 个 HTML 文件，其中 8 个用于实际站点页面，另一个 main.html 是许可提示页；页面基于 Bootstrap 4.4.1、jQuery、CSS 与 Sass 构建，覆盖商品列表、商品详情、购物车、结账、博客和联系界面。模板采用 CC BY 3.0 许可，可以修改、商用和再分发，但必须保留适当署名。
源码不含 package.json，不要求运行 npm 或前端打包命令，直接打开 index.html 即可查看。编译后的主样式位于 css/style.css，Sass 源文件按首页、商品、购物车、结账、博客和响应式模块拆分在 sass 目录；主要交互集中在 js/main.js。
8 个站点页面如何覆盖生鲜商城流程
| 页面文件 | 现有用途 | 接入真实商城时的重点 |
|---|---|---|
index.html |
分类导航、首屏搜索、品类轮播、特色商品筛选、促销和博客入口 | 真实分类、商品数据、库存、搜索与活动链接 |
shop-grid.html |
商品网格、价格范围、折扣商品、分页和侧栏筛选界面 | 筛选查询、排序、分页数据和商品链接 |
shop-details.html |
商品图集、价格、数量、描述标签与相关商品 | 商品规格、库存、评价、加入购物车接口 |
shoping-cart.html |
购物车商品、数量按钮、优惠码、小计与结算入口 | 状态保存、金额重算、删除商品和优惠码校验 |
checkout.html |
账单信息、订单摘要、付款选项和下单按钮 | 订单创建、支付、地址校验与失败处理 |
blog.html |
文章列表、分类、搜索、侧栏和分页界面 | 内容系统、真实搜索、分类与分页 |
blog-details.html |
文章正文、作者信息、分享和上一篇/下一篇入口 | 文章数据、作者资料和有效跳转 |
contact.html |
联系信息、地图和留言表单 | 真实地址、收件接口、反垃圾与隐私说明 |
需要注意源码把购物车文件命名为 shoping-cart.html，少了一个字母 p。若改名为更常见的 shopping-cart.html，必须同步修改桌面导航、移动菜单、商品入口和结账相关链接，否则会产生 404 页面。
商品分类、价格滑块和轮播分别做了什么
首页特色商品区使用 MixItUp，根据 All、Oranges、Fresh Meat、Vegetables 和 Fastfood 等按钮切换前端卡片；这只是在当前页面显示或隐藏已有商品，不会请求服务器。首页品类、最新商品，商品列表页折扣商品，以及详情页缩略图都使用 Owl Carousel，其中品类轮播会根据屏幕宽度在 1 至 4 项之间调整。
商品列表页的价格范围由 jQuery UI Slider 生成，源码设置的演示区间为 10 至 540。拖动滑块只会更新最低价和最高价输入框，没有把范围应用到商品网格。下拉选项由 Nice Select 美化，分页数字也只是 # 占位链接，因此实际筛选、排序和分页仍要连接商品数据接口。
商品详情和购物车交互有哪些边界
商品详情页点击缩略图时，main.js 会读取 data-imgbigurl 并替换主图，数量控件也可以通过加减按钮修改输入值。购物车页使用同一数量控件，但代码不会重新计算每行小计、购物车总额或运费，也不会把选择保存到本地存储或服务器。
商品收藏、加入购物车、删除、Update Cart 和优惠码界面没有对应的业务请求。结账表单提交到 #，PLACE ORDER 不会创建订单或调用支付渠道。正式上线时，应由后端统一处理商品 ID、价格可信来源、库存锁定、优惠规则、订单状态和支付回调，不能依赖页面中写死的演示金额。
搜索、留言和邮件订阅为什么只是演示界面
页头商品搜索、博客搜索、联系表单和页脚订阅表单都把 action 设置为 #，现有脚本没有发送请求或保存输入。联系页嵌入了 Google 地图，但地点、电话、邮箱、营业时间和其他联系信息均为演示内容，发布前需要替换成真实业务资料。
保留这些入口时，应分别接入商品搜索、文章搜索、邮件订阅和联系表单服务，并提供输入校验、加载状态、成功与失败反馈、反垃圾措施及隐私同意。移动端导航由 SlickNav 与自定义汉堡菜单共同处理，改动页面路径或菜单层级后，也要同时检查桌面和移动菜单。
从哪些文件开始完成生鲜品牌改造
- 先在 8 个站点页面中统一替换 Logo、导航、电话、邮箱、语言、分类和页脚信息。
- 从
sass/_variable.scss与sass/style.scss调整绿色主色、字体和组件间距，再编译生成css/style.css。 - 替换
img目录中的蔬果、肉类、商品详情、博客、横幅和支付方式图片，并填写准确 ALT。 - 把商品、博客、分页、收藏和社交入口中的
#占位地址改成真实页面或交互。 - 接入商品、库存、购物车、优惠、订单和支付后端，并使用服务端价格重新计算订单。
- 上线前复核筛选、轮播、价格滑块、商品图切换、数量按钮、移动菜单、表单和地图加载。
Ogani 提供的是生鲜电商前端页面和交互样式，不是可直接收款运营的完整商城。其 CC BY 3.0 许可允许个人与商业项目修改使用，也允许分享改编版本，但必须提供适当署名、许可证链接并说明是否修改；源码中的作者版权信息不能在未取得相应许可时删除。本文依据 v1.0.0 实际文件说明现有能力，没有声称已经完成筛选查询、订单支付、邮件投递、生产部署或跨浏览器兼容测试。
暂无评论内容