hydrogen-cookbooks

Hydrogen クックブック

Shopify Hydrogen ストアフロントで特定の機能を構築するための、具体的な手順を示すガイドです。各クックブックは、コード、ファイルの変更、実装上の注意点を含む、独立したレシピです。

ライブドキュメント

これらは、このスキルのフォルダー内から実行してください。ヘルパーは隣接する shopify-hydrogen スキルに含まれているため、パック全体がインストールされていれば ../shopify-hydrogen/scripts/ が存在します。

このスキルだけをインストールした場合、そのフォルダーは存在せず、以下のコマンドは MODULE_NOT_FOUND で失敗します。ヘルパーを一度追加してください：

npx skills add Weaverse/shopify-hydrogen-skills --skill shopify-hydrogen

このスキル内の references/ ファイルは、インストールせずに利用できるオフラインの代替手段として引き続き使用できます。

Shopify の最新の Hydrogen クックブックレシピを取得するには：

node ../shopify-hydrogen/scripts/search_shopify_docs.mjs "hydrogen cookbook <topic>"

Weaverse 固有のパターンを取得するには：

node ../shopify-hydrogen/scripts/search_weaverse_docs.mjs "<topic>"

以下のリファレンスは厳選されたガイドです。ライブドキュメントにはない Weaverse 固有のパターンが含まれている場合があります。

利用可能なクックブック

クックブック	説明
bundles.md	バッジと、カート内のバンドルされたバリアントの明細項目を使って、商品バンドルを表示する
combined-listings.md	組み合わせリスティングを処理する — ユーティリティ、フィルター、メディアのグループ化、価格帯の表示
customer-account-api.md	ローカル開発用のトンネルを使って Customer Account API を設定する
hydrogen-react-router.md	インポート置換ガイド：Remix v2 → React Router v7
model-viewer.md	ModelViewer コンポーネントと AR による 3D モデル（.glb/.usdz）のサポート
performance-best-practices.md	キャッシュ戦略、ストリーミング、遅延データ、サードパーティスクリプト、クエリの最適化
variant-media-grouping.md	バリアントのオプション（例：Color）ごとに商品メディアをグループ化する
weaverse-hydrogen-integration.md	Weaverse の完全な統合：コンポーネントの登録、テーマスキーマ、データ取得

使い方

各クックブックでは、以下について説明します：

• 機能 — その機能の内容
• 前提条件 — 事前に確認すべき事項
• 実装手順 — ファイルの変更、コードスニペット、差分
• トラブルシューティング — よくある問題と解決方法

レシピ内のファイル名は Hydrogen のスケルトンテンプレートを参照しています。ファイルパスは、プロジェクトの構成に合わせて調整してください。