新版 Hydrogen 今日正式全面推出。自六月启动开发者预览以来，我们已根据使用它的开发者的反馈发布了七个版本。
新版 Hydrogen 的亮点在于它并不“大张旗鼓”：Hydrogen 现在支持任何 JavaScript 框架。你只需将库添加到应用中，即可将 Shopify 的商业功能集成到你的技术栈中，而无需更换平台。
Hydrogen 随后为你处理商业逻辑：包括购物车、变体选择、以买家货币显示的价格、尊重用户同意的分析功能、Shop Pay 以及客户登录。React Router 和 Next.js 已准备好可部署的模板，你可以将其托管在任何地方，包括仍然免费的 Oxygen。
该软件包还包含教编码代理如何使用它的技能。要在现有项目中尝试，请运行npx @shopify/hydrogen@latest setup并让代理执行“用 Shopify 设置我的商店”。
Hydrogen 为你提供的内容
每个 Shopify 店面都需要相同的商业模块，而这些模块的实现难度往往超出表面看起来的样子。当顾客两次点击“加入购物车”时，购物车必须保持正确。价格必须与买家的国家和货币匹配。分析功能必须尊重用户同意设置，同时仍能向 Shopify 发送数据，否则你的报告将停止更新。
Hydrogen 为你处理这些事务：包括购物车、产品变体、集合筛选器、预测性搜索、Markets、分析功能、Shop Pay 和客户账户。你的框架继续负责路由、数据加载和渲染，而设计完全由你掌控。
粘合代码只需几行。例如，在 React 中动态更新的购物车计数代码如下所示：
import { createCartComponents } from "@shopify/hydrogen/react"; const { CartProvider, useCart } = createCartComponents(); function CartCount() { const count = useCart((cart) => cart.data.totalQuantity); return <span>{count}</span>; }Vue 也有类似的组合式函数（composable），其他框架则直接订阅购物车数据。
专为编码代理构建
Hydrogen 内置了 20 项技能，教编码代理如何使用它，涵盖店面的各个部分。我们通过用代理构建店面，并在代理每次出错时修正相关技能来编写这些内容。让你的代理执行“用 Shopify 设置我的商店”，它将构建首页、集合页、搜索页、产品页、购物车页和账户页，添加分析功能，并对结果进行冒烟测试。
这些技能位于您的项目中，并与您安装的 Hydrogen 版本相匹配，因此您的代理会遵循您实际拥有的代码的指令。在升级 Hydrogen 版本后，您可以使用npx @shopify/hydrogen skills sync更新技能。
Hydrogen 店面也与购物代理兼容。在支持 WebMCP 的浏览器中，代理可以搜索您的产品目录并更新购物车，买家确认后，Shopify Checkout 可以通过complete_checkout提交订单。您无需为此构建任何内容。
Hydrogen 使用与 Liquid 主题相同的标准店面操作，因此兼容的应用、店面界面和代理可以共享相同的购物车契约。应用或代理通过调用与您自己的界面所使用的相同操作来添加商品到购物车：
await window.Shopify.actions.updateCart({ lines: [{ merchandiseId: "gid://shopify/ProductVariant/123", quantity: 1 }], });
如果你之前使用过 Hydrogen
Hydrogen 过去是一个基于 React Router 构建的框架。要使用其购物车或分析功能，你需要整个店面都基于它构建。现在它是一个库，因此你可以将其添加到已有的框架中，并随意选择托管位置。Oxygen 仍然免费。
现有的 Hydrogen 店面将继续像现在一样正常运行，今天您无需采取任何行动。当您准备好迁移时，迁移 技能将引导您的代理完成整个过程。您将保留页面和路由，仅更改商业代码的来源。
开始使用
有几种方式可以开始使用：
- 在您自己的项目中运行npx @shopify/hydrogen@latest setup。
- 从你的 Shopify 管理后台将 React Router 模板部署到 Oxygen。
- 如果您使用 Next.js，请克隆由 Vercel 维护、基于 Hydrogen 构建的店面 Vercel Shop。
如果有任何缺失或损坏的内容，请在 Shopify 开发者社区 中告诉我们。代码托管在 GitHub，文档位于 shopify.dev。