はじめに
こんにちは！株式会社ブロードエッジ・ウェアリンク CTOの高丸です。
今回は、Qiita Advent Calendar 2024の20日目の記事です。
今回は、Shopifyにおいて重大発表の1つであったcheckout.liquidの廃止に伴い、Checkout Extensibilityを適用した点に関して書いていきます。
Checkout Extensibilityとは
Checkout Extensibilityは、Shopifyのチェックアウトフローをカスタマイズするための新しい仕組みです。
これは、従来のLiquidテンプレートベースのアプローチから、より構造化されたアプローチへの移行を意味します。このフレームワークでは、React/TypeScriptを用いてUIコンポーネントを開発し、それらをチェックアウトフローの特定のポイントに統合することができます。
適用すると、checkout.liquid というカスタマイズしたテーマテンプレートの使用ができなくなるという点がポイントでした。
これが任意のオプションであればよかったのですが、セキュリティ面の考慮からか、checkout.liquidの使用が2024年8月13日に廃止されることが決定していたため、緊急で導入する必要がありました。
それは、まさに我々はリプレイスプロジェクトに追われている最中でした……。
4日目の記事でも触れましたが、フロントエンドをHydrogenに移行する際に直面していた課題の1つが、Shopifyアプリへの依存でした。その中でもチェックアウトに関連する機能を持つアプリがいくつかありました。
どうやって導入したか
まず、Checkout Extensibilityを適用後、チェックアウト画面で使えるShopifyアプリを確認しました。
配送日時指定.amp
配送日時指定.ampについては、幸いすでにCheckout Extensibilityへの対応が完了していたため、比較的スムーズに移行を進めることができました。
従来カート画面で行っていた配送日時の指定機能をチェックアウト画面に移すことが可能になりました。
実際他の大手ECサイトでも、決済時に配送指定をすることが多く、
Shopifyのチェックアウト画面で配送日時を設定することは、ユーザーとしてはそれほど違和感を感じないことかと思います。
つまりこれで、カート画面でのShopifyアプリ依存が1個減ったことになります。
ここで、我々は他にも Checkout Extensibilityを適用して、チェックアウト画面に移すことでカートのShopifyアプリの依存をなくせるのではないか！ と気づきました。
Omni Hub
Omni Hubは、リアルのPOSと連携するためのアプリ（弊社ではスマレジと連携）ですが、付属する機能としてポイント機能がありました。
弊社ではカート画面でポイントの利用ができるようになっていました。
Omni Hubの開発会社であるFeedforce社からの専門的なアドバイスがあったのですが、
「（あくまで付属的な機能なので）より高機能な会員プログラムであるVIPへの移行を推奨する」とのことだったので、このタイミングで移行を決定しました。
この判断の背景には、VIPはCheckout Extensibilityに完全対応しており、配送日時指定.amp同様、チェックアウト画面でポイントの利用ができるようになるという点でした。
これも、大手ECサイトでは決済画面でポイント利用ができることがほとんどなので、ポイント利用フォームの位置の変更によってユーザーが困惑することは少ないと判断できました。
これでまた、カート画面でのShopifyアプリ依存が1個減ったことになります。
All in Gift
All in Giftは、弊社はもともとカート画面で、のし・ギフトの設定ができるように使用していました。
Hydrogenには対応していないものでしたが、カート画面でのし・ギフトを設定する実装はそこまで難しいものではなかったので、簡素なUIとStotefront APIを使って自前実装し、機能実現するようにしました。
つまりは、（アプリの移行や独自実装は含みますが） 我々の依存していたShopifyアプリが、完全にカートページからなくなることとなりました！
さいごに
手間だと感じていたCheckout Extensibilityの適用ですが、結果として予想以上の価値を見出すことができました。
もちろん、別途データ分析などはカスタムピクセルを使う必要があったりと、面倒な移行はありましたが、Checkout Extensibilityの適用の恩恵で、カートページをHydrogenに完全に移行できる見込みとなりました。
Shopifyはこのような変更は今後も続くと思うので、注意深くアップデートを追っていきたいと思います。プラットフォームの進化に合わせて、システムを継続的に改善していくことが、よりよいECサイト運営につながると確信しています。
Discussion