关于 bagisto-api-shop
用于基于 Bagisto Shop API 构建面向客户的店铺前端技能。它先确认平台、技术栈和 REST 或 GraphQL 传输方式,再引导开发者查阅各功能的实现参考。
主要功能
- 01目录、购物车、结账和账户流程指南
- 02REST 与 GraphQL 实现指南
- 03按功能划分的 API 参考
- 04身份验证与购物车生命周期指南
适用场景
- 01构建商品目录与搜索体验
- 02实现购物车、结账和订单确认
- 03添加客户登录、个人资料与订单历史
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ bagisto/ agent-skills --skill bagisto-api-shop安装后在 Claude Code 中输入/bagisto-api-shop确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
reference/connecting-to-the-api.mdgraphql.mdreference/features/compare.mdcontact-us.mdcoupons.mdnewsletter.mdreviews.mdstorefront-context.mdwishlist.mdreference/flows/account.mdadd-to-cart.mdauthentication.mdcart.mdcheckout.mdcustomer-orders.mdorder-confirmation.mdproduct-details.mdproduct-listing.md详细介绍
在 Bagisto Shop API 上构建店面
在 Bagisto Shop API(/api/shop/* REST + POST /api/graphql)上实现任意面向客户的店面功能——商品目录、购物车、结账、账户、愿望清单、商品对比。此技能是一个路由指南:它会说明流程,并引导你查看各项功能的参考页面;参考页面包含架构、UI/UX、端点和检查清单。
⚠️ 首先加载这些内容(编写任何代码之前)
reference/connecting-to-the-api.md— 身份验证(店面密钥 + 购物车/客户令牌)、{data,meta}/标头分页、错误代码,以及编码前验证流程。reference/graphql.md— 如果客户端选择了 GraphQL:结果字段/id规则、camelCase 输入、游标分页。
api-docs 是确切请求/响应格式的权威来源——https://api-docs.bagisto.com 及其 /llms.txt 索引。参考页面会列出端点和流程;编写调用前,请打开链接的文档页面,确认确切的请求体/响应。切勿凭记忆编造请求载荷。
第 1 步——询问客户(关键,开始构建前)
- 平台——Web、移动端(原生/跨平台)还是桌面端?
- 框架/技术栈——React/Next、Vue/Nuxt、Flutter、React Native、Swift/Kotlin,还是纯 JS?
- 传输方式——REST 还是 GraphQL?(简单界面使用 REST;界面需要一次获取多个相关字段时使用 GraphQL。两者都获得全面支持。)
- 首个功能/流程——商品目录、购物车+结账、账户,还是其他?
确认后,根据答案定制所有内容。不要假定技术栈。
第 2 步——打开对应功能的参考页面
流程(多步骤旅程/页面)
| 页面 | 构建内容 |
|---|---|
reference/flows/product-listing.md | 分类、商品列表、搜索、筛选 |
reference/flows/product-details.md | 商品页面(按类型发现选项、评价、相关商品) |
reference/flows/add-to-cart.md | 按商品类型添加到购物车 |
reference/flows/cart.md | 迷你购物车 + 购物车页面(读取/更新/移除/合并/总计) |
reference/flows/checkout.md | 地址 → 配送 → 付款 → 下单 |
reference/flows/order-confirmation.md | 下单后的感谢页面 |
reference/flows/authentication.md | 注册、登录、注销、验证、忘记/更改密码 |
reference/flows/account.md | 个人资料 + 地址簿 |
reference/flows/customer-orders.md | 订单历史记录、详情、取消、重新下单、发票、可下载商品 |
功能(单项能力)
| 页面 | 构建内容 |
|---|---|
reference/features/coupons.md | 应用/移除优惠券 |
reference/features/wishlist.md | 愿望清单添加/切换/查看/移至购物车 |
reference/features/compare.md | 商品对比列表 |
reference/features/reviews.md | 商品评价 + 客户自己的评价 |
reference/features/newsletter.md | 订阅新闻简报 |
reference/features/contact-us.md | 联系表单 |
reference/features/storefront-context.md | 国家/州、渠道、货币、区域设置、CMS 页面、主题 |
每个页面都包含概述 → 流程架构 → UI/UX → API 分步说明(含确切端点)→ 错误 → 检查清单。请遵循这些内容;确切的数据格式以 api-docs 为准。
汇总的关键规则(容易踩坑的要点)
- 编码前先验证。 暂停 → 打开端点的文档页面(或查询 MCP)→ 确认方法和字段 → 实现 → 检查类型。不要猜测端点名称或请求体。
- 不同接口使用不同的身份验证方式。 每次店铺调用都要发送
X-STOREFRONT-KEY;购物车、账户和结账调用还要发送Authorization: Bearer <cartToken | customerToken>。访客必须先创建购物车令牌(POST /api/shop/cart-tokens)。 - 修改购物车或结账的调用会返回完整的更新后购物车——根据响应同步更新 UI,不要在本地修改。
- 登录时合并访客购物车与客户购物车(
merge-carts),否则访客的商品会丢失。 - 下单后清理——清除购物车状态并丢弃访客购物车令牌,否则购物车弹窗会显示过期商品。
- GraphQL:操作型变更应选择文档中规定的结果字段(
success/message/orderId/总计),不要使用通用的id;输入字段采用 camelCase;每行只写一个字段。参见reference/graphql.md。 - 不要硬编码动态数据(配送方式、支付方式、价格、选项)——从 API 获取。
评论
支持 Markdown