Sprylo 是一套面向数码产品、电子设备和配件商店的五页 HTML 模板。首页先展示主推商品与品类，再把访客引向商品目录、详情和购物车；联系页承接售前咨询与批量采购。它适合需要这套商城外观的项目，商品数据与交易流程则要另接后端。页面采用原生 CSS 和 JavaScript，没有 npm 安装或打包步骤。
先决定做产品目录，还是在线商城
如果店铺只想介绍产品、让客户询价，首页、目录、详情和联系页就能组成一条浏览路径。准备在线销售时，购物车可以作为界面起点，但资源包没有结算页：cart.html 的结算按钮仍指向 #，生成订单、付款和购买确认需要另外实现。
| 页面 | 文件 | 主要内容 |
|---|---|---|
| 首页 | index.html |
搜索栏、分类导航、五卡 Bento 首屏、趋势商品、折扣横幅、品类入口、推荐商品和订阅区域 |
| 商品目录 | shop.html |
分类、价格、品牌、评分和库存筛选外观，以及排序栏、三列商品网格和分页 |
| 商品详情 | product.html |
五张缩略图、主图、价格、颜色与配置选项、数量控件、规格、评价分布和关联商品 |
| 购物车 | cart.html |
商品行、数量调整、优惠码输入、折扣明细、订单汇总和支付方式图标 |
| 联系页面 | contact.html |
联系信息、批量采购提示、咨询表单和四项简短问答 |
目录页适合并排比较商品，详情页则把图片、价格、配置、规格和评价集中在一处。两页的内容分别写在 HTML 中，修改同一商品的名称、售价和图片时需要同步处理；页面之间的跳转不会自动带入所点商品的数据。
- 静态产品目录主要换内容、整理跳转并接通询盘。只做询价时，可以移除账户、收藏与结算入口，把访客引向有效的联系方式。
- 在线商城还涉及账户、收藏、库存、优惠码、订单与支付。付款图标和折扣明细可用于排版参考，实际交易规则需要另行实现。
首页换品牌，商品页接数据
首页的 Bento 网格由五张大小与颜色不同的卡片组成。深蓝主卡承担最醒目的展示位置，紫色、橙色、绿色和近黑色卡片把其余品类分开。音箱、手表、手机、耳机与相机是演示内容；替换时，商品图片的主体大小和周围留白会影响这几张卡片能否放在一起看。
整体配色在 assets/css/styles.css 顶部调整。靛蓝色 --indigo 及其深浅变体控制主要强调色，--card-blue、--card-purple 等变量控制首屏卡片。保留多色卡片、只换主色，和把卡片统一成品牌色，会形成不同的视觉方向；可以按商品图片是否需要更多背景衬托来选择。
标题、正文和辅助标签分别使用 Plus Jakarta Sans、Outfit 与 Roboto Mono，通过 Google Fonts 加载。商品摄影使用 Unsplash 远程地址，并非本地商品图库。正式商品图片、字体托管和中文回退字体都需要按项目替换；CSS 已有移动端媒体查询与减少动态效果的处理，换入长商品名后仍要关注卡片高度、导航和购物车表格。
图片、数量与菜单：已有的交互
这些交互集中在 assets/js/main.js，修改时可以从这里查找：
- 详情页点击缩略图会替换主图，适合展示同一商品的不同角度。
- 详情页与购物车的数量按钮会修改输入值，最小数量为 1。
- 颜色与配置按钮能切换选中样式；移动端抽屉菜单能打开、关闭并响应 Esc。
配置、筛选与搜索：还需要商品数据
配置选项目前只改变样式，没有据此更新价格、图片或库存。首页分类标签也只切换选中状态；目录中的分类、品牌、价格、评分和库存控件没有实际筛选逻辑，搜索表单则阻止默认提交。做真实商城时，需要让这些操作关联同一份商品数据，购物车数量变化也要同时处理金额重算与保存。
询盘和经营承诺，一起换成真实内容
联系页询问姓名、邮箱、电话、主题、订单号和留言，适合区分售前咨询与已有订单的问题。不过点击提交后，页面只阻止请求并把按钮改成“已发送”；首页订阅也采用同样的演示方式，没有实际收件或订阅服务。接通接口后，成功提示应以服务端结果为准，并提供校验、失败反馈、反垃圾和隐私说明。
运费、配送地区、保修期限、回复时限和促销价格会影响购买判断，需要与真实经营规则一致。五个 HTML 文件各自包含导航与页脚，品牌、联系方式和保留的入口也需要逐页统一。
暂无评论内容