はじめに
こんにちは！株式会社ブロードエッジ・ウェアリンク CTOの高丸です。
今回は、Qiita Advent Calendar 2024の14日目の記事です。
今回は、ShopifyのLiquidからHydrogenへの移行に関し、カートの移行をどのように行ったかを書いていきます。
カートページの段階移行
11日目の記事でも紹介しましたが、ShopifyもHydrogenへは段階的な移行が推奨している中、重要なのがカートページになります。
カートページの移行において、我々が直面した主要な課題は以下のようなものでした。
- オンラインストアとHydrogen（Cart API経由）で扱うカートが違う
- **切り替え時もカートの中身が保持されるよう同期する必要がある
**
Shopifyの公式ドキュメントには「Shared Carts」というタイトルでこの課題への対応が紹介されています。
公式の説明では、cartというCookieに同じcart_idを入れることで解決できるとされていますが、実際にはそう単純ではありません。
オンラインストアで商品をカートに追加する場合と、HydrogenがCart API経由で商品を追加する場合では、cart_idが異なります。さらに、Cart APIを使ってオンラインストアが使用しているカートにアクセスすることもできないという制約があります。
つまり、この課題を解決するためには、HydrogenもオンラインストアもCart APIを使ってカート処理をしなければならないということでした。
実装方法
具体的な実装方法について説明していきます。
Storefront APIのCart APIでは、cartCreate mutationをコールすることで、cart_idが発行されます。
Hydrogenはこのcart_idをcookieに保存し、これをオンラインストア側でも利用する形になります。ただし、オンラインストア側がStorefront API経由のカートを使用していない場合は、オンラインストア側でStorefront APIを呼び出す必要があります。
弊社の場合、商品詳細ページが先にリリースされており、Hydrogen側でStorefront API経由で商品を追加していましたが、カートページはオンラインストアのものを使用していました。
当初は、既存オンラインストアのカートページのLiquidをカスタマイズして独自のカートページにすることでStorefront APIを使用する方法も検討しました。しかし、使用していたShopifyアプリへの依存があったため、この方法は断念せざるを得ませんでした。
そこで、我々は方針を転換し、オンラインストア側にStorefront APIを使って、オンラインストアのカートに同期するスクリプトを追加する方法を選択しました。
しかし、この同期方式には課題もありました。
Hydrogen側のカートの商品が購入後に自動で削除されないという事象が発生してしまいます。
この問題に対しては、購入後のサンキューページでスクリプトを使用し、Storefront API経由で強制的に削除する方法で対応しました。
以下の図は、この実装におけるデータの流れを示しています：
Storefront APIを使ったカート同期のイメージ
さいごに
今回は、ShopifyのLiquidからHydrogenへの移行における、カートの段階的移行について解説させていただきました。
実際の開発現場では、理想的な実装方法と現実的な制約の間でバランスを取る必要があります。今回のケースでも、Shopifyアプリへの依存という現実的な制約により、当初想定していた実装方法から方針を転換することになりました。このような判断を下す際には、技術的な完璧さだけでなく、開発効率やビジネスへの影響も考慮する必要があると実感しています。
我々のような実装事例が、同じ課題に直面する方々の参考になれば幸いです。
Discussion