跳到主内容

商品商店

商品商店提供一个公开的店面,用户可以在这里发现并购买你发布的商品。可以把它看作商品目录:只有标记为 "Published" 的商品才会出现在这里。

发布商品​

创建或编辑商品时,会看到一个 State 字段。把它设为 "Published",商品就会在商店中显示。其他状态的商品对顾客隐藏,但管理员仍能看到。

这样你可以控制哪些商品可以购买。草稿商品、季节性商品或审核中的商品可以保持其他状态,等准备好再公开。

访问商店​

用户通过 Casdoor 实例的 /product-store 路由访问商品商店。商店以响应式网格布局展示已发布的商品。显示内容取决于商品类型:

普通商品 显示:

  • 商品图片和名称
  • 标签(如果设置了)
  • 带币种符号的价格
  • 已售数量

充值商品 显示:

  • 商品图片和名称
  • 标签(如果设置了)
  • 最多 3 个预设充值金额,以蓝色标签显示(例如 $10、$50、$100)
  • 选项超过 3 个时显示 "+N"
  • 允许用户自行输入金额时显示 "Custom amount available"
  • 币种信息

浏览与购买​

商店中的每张商品卡片都可以点击。用户点击商品后,会进入商品详情页,查看信息并决定下一步。

在商品商店中,每个商品有两种操作:

Buy:点击 "Buy" 按钮直接进入购买流程,选择支付提供商并完成交易。

Add to cart:普通商品(非充值或订阅商品)可用,把商品加入你的购物车。购物车跨会话保留,可以先收集多个商品再一起购买。不同币种的商品不能放在同一个购物车中。

购买流程会创建一条支付记录;对于非订阅商品,还会创建一个订单来跟踪履约。可以用购物车在结账前整理多个商品,不过批量购买流程仍在开发中。

商店展示​

商店一次最多自动显示 100 个已发布的商品,按创建时间排序。商品以图片为主展示,方便用户直观地浏览。

空状态也处理得很好:没有已发布的商品时,用户会看到商店暂时为空的提示。