运动鞋电商网站模板 | BloomShop – Next.js 商品详情与购物车

BloomShop 是一套面向运动鞋、小型鞋履品牌的多页电商网站模板，以商品网格、独立详情、购物车和联系页串起选购过程。它采用 Next.js 与 React，适合有前端开发能力、准备继续接入商城服务的人；现有交互能演示加购和金额变化，订单、支付与账户仍需另行开发。

商品陈列与选购路径

首页把空间留给鞋子：白底、深色文字和橙黄色按钮，商品图按正方形裁切，卡片下方只放名称、价格和加购入口。网格从窄屏的一列，扩展到 sm 断点的两列、lg 断点的三列。比起堆促销横幅，这种陈列更适合款式不多、希望靠产品照片区分商品的小店；换图时也要留意鞋头、鞋跟是否被方形画面裁掉。

每张卡片的商品名称和 Quick View 都进入详情页，Quick View 并非弹窗。详情中有大图、简介、数量增减、加购和 Buy Now，后者会先加购，再转到购物车。下方的 Related Products 排除当前商品，展示数据列表中靠前的四款，并没有按品类或偏好计算推荐。

包内是四类页面，10 款商品共用一套详情布局。 实际内容地址为首页、联系页、购物车和 /product/1 至 /product/10，不能把十个详情地址理解成十种不同设计。联系页另有四条常见问题卡片，可用于安排配送和退换货说明；其中的营业时间、地址、配送承诺与客服文案都是待替换的示例。

购物车做到哪一步

购物车会合并同一商品，支持改数量、删除条目，并据此计算小计和总计。数量下限为 1；原包用浏览器 localStorage 保存购物车，不会把它同步到账户、其他设备或订单系统。

订单摘要按示例规则计算：商品小计大于 50 美元时运费为 0，否则为 9.99 美元，税额按小计的 8% 计算。英文包邮说明写的是“超过 50 美元”，与 subtotal > 50 一致。需要留意的是补差提示按 50 - subtotal 计算：如果以后加入低价商品，补到恰好 50 美元仍会收取运费。定制时应统一门槛、补差提示、币种和税费，最终成交金额由后端核算。

其他入口的范围需要分清：

• 搜索框只保存输入文字，没有联动商品列表，也没有筛选或分页实现。
• 收藏爱心只切换当前组件的状态；详情页的评分与评价数量是固定文字，Share 按钮未实现分享动作。
• Sign In、Sign Up 原本回到首页，结账指向包内不存在的页面；页脚中的商店、公司和政策链接也有缺页或首页占位。
• 联系表单用定时器模拟提交成功，订阅表单只在控制台输出邮箱，没有邮件发送、订阅保存或客服服务。

本页在线演示为搜索、账户、结账和表单入口加入了操作后的演示提示，并停用了模拟投递流程；这些调整位于演示副本，下载包中的原文件保持原样。

换商品与静态部署

先整理商品与品牌内容

10 款商品共用 data/products.json 中的 ID、名称、价格、图片和简介。更换这份数据会同时影响首页与详情展示；新增商品时要保持 ID 唯一，并同步生成相应详情地址。当前没有尺码、颜色选项、库存或 SKU 结构，鞋店常用的规格选择需要补充数据与交互。

• 修改店名、顶部导航和页脚：从 components/layout/Header.tsx 与 Footer.tsx 入手，同时清理登录和政策占位入口。
• 调整主色、圆角和整体视觉：查看 app/globals.css 的颜色与样式变量；商品卡片结构位于 components/home/ProductCard.tsx。
• 改详情布局和数量操作：查看 app/product/[productId]/page.tsx；购物车规则分布在 context/CartContext.tsx 与 components/cart/OrderSummary.tsx。

商品照片实际引用远程图片地址，包内并未包含这十张商品图的本地副本。自行换图后，还要按地址调整 next.config.ts 的图片配置。字体使用 next/font/google 的 Inter，构建时需要取得字体文件，不能据此宣称原包可完全离线使用。

静态演示需要适配

本地锁文件对应 Next.js 16.0.9、React 19.2.2 和 Tailwind CSS 4.1.18。先在项目目录安装依赖，再运行 npm run dev 进行开发预览。原配置的 npm run build 和 npm run start 用于构建与启动 Next.js 应用，不能把源码当作纯 HTML 直接双击打开。

普通静态托管需要额外适配。本站演示副本采用以下处理顺序，原包配置本身没有预设静态导出：

1. 在 next.config.ts 中启用 output: 'export'。演示副本另设 images: { unoptimized: true }，让商品图片直接从远程地址加载，不依赖 Next.js 图片优化服务。
2. 将 app/product/[productId]/page.tsx 中的交互保留在客户端子组件，由服务端路由页导出 generateStaticParams，按商品 ID 生成十个详情地址。
3. 放到子目录时，同步设置 basePath 和资源前缀，再运行 npm run build，部署生成的 out/ 内容。
4. 检查首页进入详情、详情直接访问及刷新、购物车数量和远程商品图。新增商品后应重新生成对应的静态详情页。

本次演示副本已按这条路径完成构建；它解决的是页面输出与访问路径，账户、库存和结账服务仍需另行开发。

演示副本还为购物车存储增加了模板专用键名和读取完成判断，避免与同一演示站的其他模板混用数据，也避免首次挂载时覆盖保存内容。若准备继续开发真实商城，下一步应明确商品规格、库存、账户和结账服务的接口，再把这套前台页面接上业务数据。