Reaction商品体系完全指南：Products、Catalogs、Tags与变体一次讲透

Reaction商品体系完全指南Products、Catalogs、Tags与变体一次讲透【免费下载链接】reactionProject has been discontinued ////// Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, GraphQL. Deployed via Docker and Kubernetes.项目地址: https://gitcode.com/gh_mirrors/re/reactionReactionMailchimp Open Commerce是一个基于 Node.js 和 GraphQL 构建的 API 优先API-first无头headless电商平台。本篇完全指南把它的商品体系四大核心——Products 商品草稿、Catalogs 已发布目录、Tags 分类标签、以及 Variants 尺码颜色变体——一次讲透并附完整实战流程新手 10 分钟即可上手。 30秒看懂商品体系的三层概念很多新手被 Reaction 劝退是因为分不清「商品」和「目录商品」。其实只需记住一张表概念英文是什么谁在看商品草稿Product编辑中的底稿含变体与选项店铺管理员目录商品CatalogProduct发布后的成品顾客可见顾客分类标签Tag给商品归类、驱动前台导航两者都用变体ProductVariant同一商品的颜色、尺码等选项两者都用核心设计草稿与发布分离。你编辑的商品Product只是底稿只有执行发布操作后系统才会生成CatalogProduct顾客才能在前台看到它。这就像微信公众号的草稿箱与已群发的关系。 数据模型源码simpleSchemas.js 中定义了Product集合的完整字段。 Products商品本身长什么样一个Product的关键字段product.graphqltitle/description商品标题与完整描述slugURL 安全、人类可读的商品地址注意slug 只保证在同一店铺内唯一isVisible/isDeleted是否对顾客可见 / 是否已删除软删除supportedFulfillmentTypes该商品支持哪些履约方式如 shipping 快递、pickup 自提tagIds商品身上打的标签 ID 列表是商品与 Tags 体系相连的纽带media商品媒体图片可自动合并其变体图片currentProductHash/publishedProductHash两个哈希值用来判断草稿是否比上次发布的版本有改动——这是增量发布的基础️ 常用商品操作GraphQL Mutations操作说明createProduct新建商品默认会自动创建第一个变体可设为关闭updateProduct更新商品字段archiveProducts批量归档商品软删除可恢复cloneProducts克隆商品适合快速上新相似款updateProductsVisibility批量开关商品可见性addTagsToProducts/removeTagsFromProducts给商品批量打 / 摘标签实现分别在 createProduct.js 与 addTagsToProducts.js 中查询侧则提供products按价格区间、标签、更新时间过滤和filterProducts两个入口product.graphql。 Variants尺码颜色变体一讲就懂变体是 Reaction 商品体系里最精巧的设计。它不是一层而是三层树形结构Product商品 └─ Variant 变体如颜色 - 红色 └─ Option 子选项如尺码 - LattributeLabel变体类别比如Color或Sizeproduct.graphqloptionTitle短标题用于前台下拉框如L、Redtitle完整描述标题。比如选项L挂在变体Red下、商品名叫 Fancy T-Shirt则完整标题为Fancy T-Shirt - Red - Large直接用于购物车、订单和小票sku/barcode每个变体独立编码方便库存管理weight/length/width/height物理尺寸运费计算依赖它们minOrderQuantity最低购买数量isVisible隐藏的变体不会发布到目录前台自然看不到查询变体时getVariants.js 通过ancestors字段定位层级只取顶层变体时按[商品ID]精确匹配取全部变体时按包含关系递归查找并通过shouldIncludeHidden、shouldIncludeArchived两个开关控制是否返回隐藏 / 已归档变体。 Catalogs顾客看到的发布版发布之后商品在目录里变成了四个类型schema.graphql类型作用CatalogProduct目录商品含primaryImage主图、parcel包裹信息等前台字段CatalogProductVariant目录变体结构与草稿变体一致CatalogItem目录项接口未来可承载非商品内容如内容卡片CatalogItemProduct目录项与商品的具体关联记录⚠️高频误区CatalogProduct._id和Product._id不是同一个 ID要互相映射需用productId字段。数据模型见 simpleSchemas.js。两个必须掌握的查询catalogItems拉取目录商品列表支持按tagIds过滤、searchQuery搜索、按minPrice排序schema.graphql——前台商品列表页就靠它catalogItemProduct通过商品 ID 或slug获取单个商品详情用于详情页路由发布流程管理员调用publishProductsToCatalog传入商品 ID 数组publishProductsToCatalog mutation系统校验权限publishProducts.js要求商品父级及其变体、选项全部可见否则整批发布失败生成 / 更新CatalogProduct与CatalogProductVariant快照需要局部更新时可改用partialProductPublish做增量发布mutations/index.js️ Tags分类导航与商品筛选Tag是 Reaction 的分类 导航统一方案tag.graphqlname/slug显示名与 URL 地址slug留空时系统自动由name生成addTag.graphqlisTopLevel是否顶级标签。标签支持层级子标签通过subTagIds挂到父标签下isVisible控制标签的详情页是否对公众开放heroMediaUrl标签详情页头图通过setTagHeroMediamutation 设置featuredProductIds精选商品列表控制标签页顶部商品顺序标签如何驱动前台两条路径都极其常用按标签查商品productsByTagId查询productsByTagId.js会优先按featuredProductIds顺序返回精选商品其余商品按创建时间补齐目录级过滤catalogItems传入tagIds参数前台商品列表即变成某分类下的商品管理侧则提供addTag/updateTag/removeTag三个 mutation配合给商品打标签的addTagsToProducts即可完成建分类 → 挂商品 → 配头图 → 前台展示的完整闭环。 实战走一遍从草稿到顾客可见createProduct建商品自动生成首个变体createProductVariant加颜色变体再在其下加尺码选项addTag建标签如女装addTagsToProducts给商品打标签publishProductsToCatalog发布——顾客此刻才第一次看到它用catalogItems(tagIds: [女装])在前台按分类浏览 新手避坑清单❌把 CatalogProduct 当 Product 用→ 两者 ID 体系独立跨表请用productId映射❌发布失败找不到原因→ 检查变体 / 选项是否isVisible: false隐藏内容不参与发布❌多店铺下 slug 冲突→ slug 仅店铺内唯一跨店查询务必带shopId❌改了商品前台没变化→ 改的是草稿必须重新发布对比两个hash字段可快速判断是否有未发布的改动写在最后Reaction 商品体系的设计哲学可以浓缩为一句话底稿归底稿发布归发布标签管导航。理解了Product → Variant → Option的树形结构与CatalogProduct的快照机制你就能读懂 api-plugin-products、api-plugin-catalogs 与 api-plugin-tags 三大插件的每一行核心逻辑也为后续接入定价、库存、订单体系打好地基。【免费下载链接】reactionProject has been discontinued ////// Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, GraphQL. Deployed via Docker and Kubernetes.项目地址: https://gitcode.com/gh_mirrors/re/reaction创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考