{"id":50709217,"url":"https://github.com/coowinit/wpc-product-pages-preview","last_synced_at":"2026-06-09T14:01:46.362Z","repository":{"id":359481292,"uuid":"1246266211","full_name":"coowinit/wpc-product-pages-preview","owner":"coowinit","description":"WPC产品列表页与产品详情页HTML静态预览模板，包含分类筛选、分页、产品图Hover切换、Swiper详情图库、色卡切换和响应式布局，适用于WooCommerce商城或B2B询盘商城前端效果参考。","archived":false,"fork":false,"pushed_at":"2026-05-22T03:32:17.000Z","size":576,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-22T12:27:07.245Z","etag":null,"topics":["b2b-website","css","html","javascript","product-detail","product-list","product-page","responsive-design","swiper","woocommerce","wordpress","wpc"],"latest_commit_sha":null,"homepage":"https://coowinit.github.io/wpc-product-pages-preview/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coowinit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-22T03:08:46.000Z","updated_at":"2026-05-22T03:32:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/coowinit/wpc-product-pages-preview","commit_stats":null,"previous_names":["coowinit/wpc-product-pages-preview"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/coowinit/wpc-product-pages-preview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwpc-product-pages-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwpc-product-pages-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwpc-product-pages-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwpc-product-pages-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coowinit","download_url":"https://codeload.github.com/coowinit/wpc-product-pages-preview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwpc-product-pages-preview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34110012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["b2b-website","css","html","javascript","product-detail","product-list","product-page","responsive-design","swiper","woocommerce","wordpress","wpc"],"created_at":"2026-06-09T14:01:44.968Z","updated_at":"2026-06-09T14:01:46.356Z","avatar_url":"https://github.com/coowinit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WPC 产品列表页与产品详情页静态模板\n\n本项目是一套面向 WPC 木塑产品展示的前端静态页面模板，主要包含两个页面：**产品分类列表页** 和 **产品详情页**。\n\n这套页面可以作为后期搭建 WooCommerce 商城、B2B 询盘商城、产品展示型网站、样品订购页面时的前端参考模板。当前版本重点验证页面结构、视觉布局、交互逻辑和响应式效果，后期可以根据真实产品数据、商城系统字段和品牌视觉继续扩展。\n\n---\n\n## 效果截图\n\n请将页面截图放到以下目录：\n\n```text\ndocs/screenshots/\n```\n\n这样 README.md 可以自动显示图片：\n\n```text\ndocs/screenshots/product-list-page-preview.png\ndocs/screenshots/product-detail-page-preview.png\n```\n\n### 产品分类列表页预览\n\n![产品分类列表页预览](docs/screenshots/product-list-page-preview.png)\n\n### 产品详情页预览\n\n![产品详情页预览](docs/screenshots/product-detail-page-preview.png)\n\n---\n\n## 页面结构\n\n```text\nwpc-product-pages-github-preview/\n├── index.html\n├── README.md\n├── docs/\n│   └── screenshots/\n│       ├── .gitkeep\n│       ├── product-list-page-preview.png\n│       └── product-detail-page-preview.png\n├── product-list/\n│   ├── index.html\n│   ├── README.md\n│   ├── css/\n│   │   └── style.css\n│   ├── js/\n│   │   └── script.js\n│   └── assets/\n│       └── svg/\n└── product-detail/\n    ├── index.html\n    ├── README.md\n    ├── css/\n    │   └── style.css\n    ├── js/\n    │   └── script.js\n    └── images/\n```\n\n---\n\n## 入口页面说明\n\n根目录中的 `index.html` 是一个简单的预览入口页，用于集中展示并跳转到两个核心页面：\n\n- `product-list/index.html`：产品分类列表页\n- `product-detail/index.html`：产品详情页\n\n这个入口页的作用是方便后期预览和演示，不参与实际商城系统逻辑。后期接入 WooCommerce 或 B2B 询盘系统时，可以只提取 `product-list/` 和 `product-detail/` 中的页面结构、样式与交互逻辑。\n\n---\n\n## 产品分类列表页\n\n页面路径：\n\n```text\nproduct-list/index.html\n```\n\n### 页面定位\n\n产品分类列表页主要用于展示多个产品卡片，适合用于：\n\n- Decking 样品列表\n- Wall Cladding 产品列表\n- Fencing 产品列表\n- Accessories 配件列表\n- B2B 产品展示列表\n- WooCommerce 产品分类归档页参考\n\n### 核心功能\n\n- 页面最大宽度为 `1200px`\n- 桌面端一行三列产品卡片\n- 平板端自动变为两列\n- 手机端自动变为单列\n- 产品分类按钮筛选\n- 产品分页功能\n- 产品图片 hover 后切换为场景图\n- 产品标题最多显示两行，超出自动隐藏\n- 支持不同长度标题，保持卡片排版整齐\n- 数量选择与加入购物车按钮结构完整\n- CSS 与 JS 独立拆分，方便后期维护\n\n### 适合使用的场景\n\n这个页面适合作为产品归档页或分类页的前端原型。对于 WooCommerce 网站，可以将产品卡片结构改造成循环模板；对于普通 B2B 询盘网站，可以将 `Add to Cart` 替换为 `View Details`、`Get Quote` 或 `Send Inquiry`。\n\n---\n\n## 产品详情页\n\n页面路径：\n\n```text\nproduct-detail/index.html\n```\n\n### 页面定位\n\n产品详情页主要用于展示单个产品的详细信息，适合用于样品套装、地板产品、墙板产品、围栏产品、配件产品等详情展示。\n\n### 核心功能\n\n- 页面最大宽度为 `1200px`\n- 桌面端产品图库与产品信息区域保持接近 `1:1` 的视觉比例\n- 左侧为产品缩略图，右侧为主图区域\n- 缩略图整体高度与主图外框高度保持一致\n- 缩略图超出时隐藏，并通过上下箭头逐个切换\n- 点击缩略图时，主图同步切换\n- 色卡切换时，对应切换一张产品主图\n- 色卡不需要绑定多张场景图，逻辑更简单，适合商城系统落地\n- 放大镜按钮绝对定位在主图右下角\n- 支持数量加减\n- 同时包含 `Add to Cart` 和 `Request Quote` 两种按钮\n- 手机端自动改为上下结构，方便浏览\n- CSS 与 JS 独立拆分，便于后期集成\n\n### 适合使用的场景\n\n这个页面既可以用于 WooCommerce 这类支付型商城，也可以用于普通 B2B 询盘商城。\n\n在 WooCommerce 场景中，可以保留 `Add to Cart`，并将数量选择器、价格、产品标题、评分、色卡选项接入真实产品数据。\n\n在 B2B 询盘场景中，可以隐藏价格或购物车按钮，只保留 `Request Quote`，并将其绑定到询盘表单、邮件表单、WhatsApp、在线客服或 CRM 线索系统。\n\n---\n\n## 图片与素材说明\n\n当前项目中的图片主要为 SVG 示例图，方便在没有真实产品图片的情况下测试布局和交互效果。\n\n后期替换为真实产品图时，建议按照以下逻辑整理：\n\n### 产品列表页图片\n\n```text\nproduct-list/assets/svg/\n```\n\n建议每个产品至少准备两张图：\n\n- 产品主图：默认显示\n- 场景图：鼠标 hover 时显示\n\n这样可以形成更接近真实商城的产品卡片交互体验。\n\n### 产品详情页图片\n\n```text\nproduct-detail/images/\n```\n\n建议包含以下类型图片：\n\n- 产品主图\n- 色卡图\n- 产品细节图\n- 场景图\n- 应用案例图\n\n当前详情页色卡逻辑为：**一个色卡对应一张产品图**。这种方式结构更简单，更适合后期对接 WooCommerce 变体图或普通产品图库。\n\n---\n\n## 后期扩展方向\n\n### 1. 接入真实产品数据\n\n后期可以将静态 HTML 中的产品标题、价格、评分、分类、图片、色卡等内容替换为真实数据。\n\n在 WooCommerce 中，可以对应到：\n\n- 产品标题\n- 产品价格\n- 产品短描述\n- 产品分类\n- 产品标签\n- 产品特色图\n- 产品图库\n- 变体属性\n- 库存状态\n\n在 B2B 系统中，可以对应到：\n\n- 产品名称\n- 产品型号\n- 产品颜色\n- 产品应用场景\n- 产品规格参数\n- 下载资料\n- 询盘按钮\n\n### 2. 扩展筛选功能\n\n当前产品列表页已经包含基础分类按钮，后期可以继续扩展为更完整的筛选系统，例如：\n\n- 按颜色筛选\n- 按系列筛选\n- 按应用场景筛选\n- 按材质筛选\n- 按价格区间筛选\n- 按库存状态筛选\n- 多选筛选与组合筛选\n\n### 3. 优化分页与加载方式\n\n当前分页为前端静态分页，适合页面原型验证。后期可以根据系统类型扩展为：\n\n- WooCommerce 默认分页\n- Ajax 无刷新分页\n- Load More 加载更多\n- 无限滚动加载\n- 分类切换后自动刷新产品列表\n\n### 4. 强化产品详情页图库\n\n当前详情页图库已经包含主图、缩略图、上下箭头和色卡切换。后期可以继续扩展：\n\n- 图片放大预览弹窗\n- 图片局部放大镜\n- 视频缩略图\n- 360° 产品展示\n- 场景图分组\n- 颜色切换后同步更新标题、价格、SKU 和描述\n\n### 5. 适配 WooCommerce 模板\n\n后期如果接入 WooCommerce，可以将当前结构拆分到主题模板中：\n\n- 产品列表卡片结构：用于产品归档页循环模板\n- 产品详情图库：用于单产品页图片区域\n- 色卡区域：用于变体属性或自定义字段\n- 数量与购物车：对接 WooCommerce 原生表单\n- Request Quote：对接询盘插件或自定义表单\n\n### 6. 适配 B2B 询盘商城\n\n如果用于非支付型 B2B 网站，可以弱化购物车逻辑，强化询盘和转化：\n\n- 将 `Add to Cart` 改为 `Add to Inquiry List`\n- 将 `Request Quote` 绑定到询盘表单\n- 增加产品规格表\n- 增加下载资料区域\n- 增加应用案例区域\n- 增加相关产品推荐\n- 增加 WhatsApp、邮箱、电话等快速联系入口\n\n### 7. 增加 SEO 与内容模块\n\n后期可以根据真实商城页面继续增加 SEO 相关内容：\n\n- 分类页顶部介绍文案\n- 产品详情页长描述\n- FAQ 常见问题\n- 应用场景说明\n- 材料优势说明\n- 安装说明\n- 维护保养说明\n- 相关博客入口\n\n---\n\n## 当前版本的价值\n\n这个项目的核心价值不是最终商城系统，而是提供一套清晰的页面结构和交互原型。\n\n它可以帮助后期开发时快速确认以下内容：\n\n- 产品列表页应该如何排版\n- 产品卡片应该包含哪些信息\n- 产品图片 hover 效果是否适合当前品牌\n- 产品标题多行时如何保持整齐\n- 产品详情页图库如何展示\n- 色卡切换逻辑如何简化\n- WooCommerce 和 B2B 询盘系统如何共用同一套前端思路\n- 桌面端与手机端体验是否统一\n\n后期只需要在这个基础上替换真实图片、真实产品数据，并根据具体系统进行模板化改造，就可以逐步形成完整的商城前端页面。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fwpc-product-pages-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoowinit%2Fwpc-product-pages-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fwpc-product-pages-preview/lists"}