生鲜电商网站模板：Bootstrap 4 多页商品筛选与购物车（8页） – Ogani

Ogani 是一套面向生鲜超市、有机食品店和农产品商城的响应式多页电商模板。v1.0.0 资源包含 9 个 HTML 文件，其中 8 个用于实际站点页面，另一个 main.html 是许可提示页；源码页面记录了 Bootstrap 4.4.1、jQuery、CSS 与 Sass 的组合，覆盖分类导航、商品列表、详情、购物车、结账、博客和联系界面。它属于静态前端起点，商品筛选、订单、支付、搜索和表单提交都需要自行接入业务服务；来源文章标注 CC BY 3.0，修改、商用或再分发时应保留署名和许可证信息。

8 个站点页面如何覆盖生鲜商城流程

Ogani 把从商品发现到结账提示的主要页面拆开，适合先完成生鲜商城的视觉原型，再把静态卡片替换成真实商品数据。改造时要特别注意文件名和链接路径，因为购物车页面的文件名本身带有拼写差异，桌面导航、移动菜单和商品入口必须同步维护。

如果把 shoping-cart.html 改成更常见的 shopping-cart.html，必须同步替换桌面导航、移动菜单、商品入口和结账相关链接，否则会留下无法访问的旧路径。这个细节对静态多页模板尤其重要，因为页面之间没有路由框架来自动修正文件名。

商品分类、价格滑块和轮播分别做了什么

首页特色商品区使用 MixItUp，根据 All、Oranges、Fresh Meat、Vegetables 和 Fastfood 等按钮切换前端卡片；它只是在当前页面显示或隐藏已有内容，不会请求服务器。首页品类、最新商品、商品列表页折扣商品以及详情页缩略图使用 Owl Carousel，品类轮播会根据屏幕宽度在 1 至 4 项之间调整。

商品列表页的价格范围由 jQuery UI Slider 生成，源码设置的演示区间为 10 至 540。拖动滑块只会更新最低价和最高价输入框，并没有把价格范围应用到商品网格；下拉选项由 Nice Select 美化，分页数字也只是 # 占位链接。因此正式使用时仍需把筛选、排序和分页连接到商品数据接口。

商品详情和购物车交互有哪些边界

商品详情页点击缩略图时，js/main.js 会读取 data-imgbigurl 并替换主图，数量控件也可以通过加减按钮修改输入值。购物车页复用了数量控件，但代码不会重新计算每行小计、购物车总额或运费，也不会把选择保存到本地存储或服务器。

收藏、加入购物车、删除、Update Cart 和优惠码界面没有对应的业务请求。结账表单提交到 #，PLACE ORDER 不会创建订单或调用支付渠道。正式上线时，应由后端统一处理商品 ID、价格可信来源、库存锁定、优惠规则、订单状态和支付回调，不能依赖页面中写死的演示金额。

搜索、留言和邮件订阅为什么只是演示界面

页头商品搜索、博客搜索、联系表单和页脚订阅表单都把 action 设置为 #，现有脚本没有发送请求或保存输入。联系页的地图、地点、电话、邮箱、营业时间和其他资料也属于演示内容，发布前需要替换成真实业务信息。

保留这些入口时，应分别接入商品搜索、文章搜索、邮件订阅和联系表单服务，并提供输入校验、加载状态、成功与失败反馈、反垃圾措施及隐私同意。移动端导航由 SlickNav 与自定义汉堡菜单共同处理，改动页面路径或菜单层级后，要同时检查桌面菜单和移动菜单。

从哪些文件开始完成生鲜品牌改造

1. 先在 8 个站点页面中统一替换 Logo、导航、电话、邮箱、语言、分类和页脚信息，清理不同页面中的旧品牌残留。
2. 从 sass/_variable.scss 与 sass/style.scss 调整绿色主色、字体和组件间距，再编译生成 css/style.css；不使用 Sass 时，也可以直接调整现有 CSS。
3. 替换 img 目录中的蔬果、肉类、商品详情、博客、横幅和支付方式图片，并填写准确 ALT。
4. 把商品、博客、分页、收藏和社交入口中的 # 占位地址改成真实页面或交互。
5. 接入商品、库存、购物车、优惠、订单和支付后端，并使用服务端价格重新计算订单。
6. 上线前复核筛选、轮播、价格滑块、商品图切换、数量按钮、移动菜单、表单和地图加载。

Ogani 提供的是生鲜电商前端页面和交互样式，不是可以直接收款运营的完整商城。来源文章将其授权标注为 CC BY 3.0，分享或改编时应提供适当署名、许可证链接并说明修改；源码中的作者版权信息不能在未取得相应许可时删除，第三方图片、字体、图标和前端库也应分别核对许可范围。本文依据 v1.0.0 文件说明现有能力，没有把筛选查询、订单支付、邮件投递、生产部署或跨浏览器兼容测试写成已经完成的功能。