Amado 是一套面向家具、家居与生活选品的多页电商网站模板，采用 Bootstrap 4。首页用左侧导航搭配不等高的图片，直接陈列椅子、花器和小家具；包内还提供列表、详情、购物车和结账页，适合用来搭建商品展示与购物流程的前端骨架。商品数据和订单服务仍需另行接入。
从图片陈列进入商品页
首页没有大幅横向宣传栏，而是直接呈现九个商品图片块，图片上方叠放起价与名称。不同图片高度通过 Isotope 的瀑布流布局排列，白色、浅灰与木色照片构成主体，黄色用于短线、按钮和导航标记。适合准备了统一室内摄影或家居产品图、希望访客先看物件风格的店铺。
左侧导航把五个页面入口、折扣与新品按钮放在一起。桌面端它属于页面布局的一部分，并非始终固定在屏幕上的悬浮侧栏；手机端则换成顶部品牌栏，点击菜单后从左侧展开导航。商品图片也会随断点改变列数，较窄的手机屏幕上按单列浏览。
首页九个图片块都进入同一个商品列表页。它们不是九个已绑定商品资料的详情入口，替换为自己的选品后，还需要决定每张图应进入分类、集合还是具体商品。
五页之间怎样衔接
包内有五个正式 HTML 页面，侧栏和页脚都保留了相应导航：
| 页面文件 | 现有内容 | 需要接上的关系 |
|---|---|---|
index.html | 九个图片陈列块 | 图片与分类或商品目标 |
shop.html | 六张商品卡及筛选区域 | 真实商品数据、筛选与分页 |
product-details.html | 四张商品图、简介与数量 | 每件商品的详情及库存 |
cart.html | 三条示例商品与金额摘要 | 购物车状态、数量和金额计算 |
checkout.html | 地址、备注与付款选项 | 订单校验、提交与支付服务 |
列表中的六张卡片都链接到同一个 White Modern Chair 详情页。 卡片标题、价格和上方 Showing 1–8 of 25 文字也只是示例，不代表已经接入二十五件商品。若继续沿用静态页面，可以先补齐每件商品的图片、说明与目标地址；商品较多时，则需要让列表、详情和购物车读取同一份数据。
详情页已有缩略图切换和点击图片放大，数量上下按钮也会改变输入值。评分、库存文字和 Write A Review 入口没有对应的评价或库存服务，不能把页面上的状态当成实际业务结果。
控件变化与业务数据
- 筛选与排序：列表左侧有分类、品牌、颜色和价格区间，顶部还放了排序与每页数量控件。品牌可以勾选，下拉框可以选择，价格滑块会更新区间文字；现有脚本没有据此筛选、重排商品或加载下一页，需要接上实际数据查询。
- 数量与购物车：数量按钮只改变输入框，右侧金额仍是静态文字，页头 Cart 数量也不会变化。详情页的 Add to cart 表单没有处理后端；列表加购图标原本只跳到示例购物车，不会加入当前商品。接入时，需要让商品数量、行小计与订单总额使用同一份购物车数据。
- 结账字段：姓名、邮箱、地址和备注等字段尚未组成可提交的订单流程。创建账户、另设收货地址没有后续处理，付款选项使用复选框，可以同时勾选；实际结账需要重新处理这些条件。
如果希望参考前端加购、数量与金额联动的实现，可以对照 BloomShop 的购物车。它使用 Next.js 和 React，需要相应的开发与构建环境，与 Amado 的五页静态 HTML 修改方式不同。
搜索与邮件订阅同样没有检索、收件或保存服务。各页的“订阅享 25% 折扣”、新品、折扣和收藏入口都属于演示内容，使用前应换成真实活动与服务，暂不实现的入口可以停用。
修改样式与接入服务
先替换图片与覆盖样式
首页图片位于 img/bg-img/，列表和详情图片位于 img/product-img/。首页保留了不同图片比例，换图时应一起查看桌面多列和手机单列的排列；详情页则需要同步四张大图、缩略图背景及放大图片的链接，避免只换可见图片后仍打开旧素材。
主要样式在 css/core-style.css，根目录 style.css 留作自定义覆盖，可用于先改按钮、字体和间距。字体与 Font Awesome 图标文件放在本地 fonts/，不依赖在线字体服务；更换中文品牌文案时，需要自行补充合适的中文字形与回退字体，再检查菜单、长商品名和地址字段。
维护 SCSS 与页面流程
包内提供 scss/style.scss 及颜色、字体、断点和混入文件。黄色主色在 _theme_color.scss 中设为 #fbb710，修改这类源变量后需要重新编译样式；现成的 CSS 已可用于静态页面查看，包内没有配置好的包管理构建命令，不必为了替换图片就重新搭建工具链。
运行脚本使用本地 Bootstrap 4.1.0、jQuery 2.2.4 及相关插件，部署时保留 HTML、css/、js/、fonts/ 和 img/ 的相对关系。依赖版本较旧，升级时应分别验证布局、图片弹窗、数量控件和下拉框，不能只替换库文件就认定兼容。
原购物车的 Checkout 按钮指回 cart.html，本站演示副本已改为进入结账页；实际下单按钮、加购、搜索与订阅保持不提交状态。原包中的部分未使用图标背景资源缺失，演示也已清理相应引用，原始资源包保持不变。建站时仍需接入自己的购物车和订单服务，逐项处理校验、金额、库存及成功或失败反馈。
暂无评论内容