‏Hydrogen 2026-10 منتشر شد: کامرس Shopify روی هر فریم‌ورکی

تیم Shopify اعلام کرده که Hydrogen 2026-10 حالا به‌صورت عمومی در دسترسه. از ژوئن که پیش‌نمایش برای توسعه‌دهنده‌ها شروع شد، هفت ریلیز بر اساس بازخوردها بیرون اومده. به گفته‌ی خودشون، نکته‌ی اصلی اینه که Hydrogen حالا با هر فریم‌ورک جاوااسکریپتی کار می‌کنه. قبلاً Hydrogen یه فریم‌ورک روی React Router بود و برای استفاده از سبد خرید یا آنالیتیکسش باید کل فروشگاه رو روش می‌ساختی. الان یه کتابخونه‌ست که به همون پروژه‌ای که داری اضافه‌ش می‌کنی.

Hydrogen تیکه‌هایی رو که هر فروشگاه Shopify لازم داره و درست کردنشون سخت‌تر از ظاهرشونه برات انجام می‌ده: سبد خرید، انتخاب variant محصول، فیلتر کالکشن‌ها، جست‌وجوی پیش‌بینی‌کننده، Markets (یعنی قیمت و ارز بر اساس کشور خریدار)، آنالیتیکسی که رضایت کاربر رو رعایت می‌کنه، Shop Pay و حساب مشتری. مثلاً سبد باید حتی وقتی کاربر دو بار پشت هم «Add to cart» رو می‌زنه درست بمونه. routing و گرفتن داده و رندر همچنان دست فریم‌ورک خودته و طراحی هم کاملاً مال خودته.

برای React و Next.js استارترهای آماده هست و می‌تونی هر جایی هاستش کنی، از جمله Oxygen که هنوز رایگانه. برای Vue هم همین قابلیت‌ها به شکل composable هست. Hydrogen از همون standard storefront actions تم‌های Liquid استفاده می‌کنه، یعنی اپ‌ها، UI خودت و ایجنت‌ها همه یه قرارداد مشترک برای سبد خرید دارن. مثلاً یه اپ یا ایجنت با همون اکشنی که UI خودت صدا می‌زنه به سبد اضافه می‌کنه:

await window.Shopify.actions.updateCart({
  lines: [{ merchandiseId: "gid://shopify/ProductVariant/123", quantity: 1 }],
});

بخش جالب دیگه اینه که پکیج با ۲۰ اسکیل میاد، یعنی فایل‌هایی که به ایجنت‌های کدنویسی یاد می‌دن چطور با Hydrogen کار کنن. تیم Shopify می‌گه این اسکیل‌ها رو با ساختن فروشگاه به کمک ایجنت‌ها نوشتن و هر بار ایجنت اشتباه کرده، اسکیل رو درست کردن. اگه به ایجنت بگی «Set up my store with Shopify»، صفحه‌های اصلی، کالکشن، جست‌وجو، محصول، سبد و حساب کاربری رو می‌سازه و یه تست سریع هم می‌گیره. اسکیل‌ها با نسخه‌ی نصب‌شده‌ی Hydrogen هماهنگن و بعد از آپگرید با npx @shopify/hydrogen skills sync به‌روز می‌شن.

فروشگاه‌های Hydrogen با ایجنت‌های خرید هم کار می‌کنن. توی مرورگرهایی که از WebMCP پشتیبانی می‌کنن (یعنی استانداردی که به ایجنت اجازه می‌ده با سایت تعامل کنه)، ایجنت می‌تونه کاتالوگ رو بگرده و سبد رو آپدیت کنه و بعد از تأیید خریدار، Shopify Checkout سفارش رو ثبت می‌کنه. برای این کار لازم نیست چیزی بسازی. فروشگاه‌های Hydrogen قدیمی هم مثل قبل کار می‌کنن و برای مهاجرت یه اسکیل جدا هست که ایجنت رو قدم‌به‌قدم راهنمایی می‌کنه.

نکات کلیدی:

• Hydrogen 2026-10 بعد از هفت ریلیز پیش‌نمایش، از ۱۴ اکتبر ۲۰۲۶ عمومی شده.
• Hydrogen از فریم‌ورک مبتنی بر React Router به کتابخونه‌ای مستقل از فریم‌ورک تبدیل شده.
• استارتر آماده برای React Router و Next.js هست و هاست Oxygen همچنان رایگانه.
• ۲۰ اسکیل برای ایجنت‌های کدنویسی همراه پکیجه و با npx @shopify/hydrogen skills sync به‌روز می‌شه.
• توی مرورگرهای دارای WebMCP، ایجنت‌های خرید می‌تونن سبد رو پر کنن و سفارش رو با complete_checkout ثبت کنن.
• فروشگاه‌های Hydrogen قبلی بدون تغییر کار می‌کنن و مهاجرت اجباری نیست.