Shopifyでテーマを開発する際、Ajax APIを活用することでページ遷移なしにさまざまな操作を行えるようになります。たとえば、カートへの商品追加や商品検索、商品おすすめ機能をモーダルやドロップダウンで動的に表示するなど、ユーザーがストアを快適に利用できる仕組みを構築できます。ページリロードの手間を省くことで、顧客体験を向上させ、離脱率の低減や購買意欲の向上に寄与することが期待されます。
Shopify Ajax APIについて
Shopify Ajax APIは、Shopify テーマの開発用に軽量の REST API エンドポイント スイートを提供します。Ajax API は、Shopify でホストされているテーマでのみ使用できます。Shopify カスタム ストアフロントでは Ajax API を使用できません。
従来のサーバーサイド描画だけでは実現が難しかったインタラクティブな機能を追加する際に大いに役立ちます。複雑なフレームワークを使わなくても、Shopifyが提供するAPIエンドポイントを利用してJSON形式のデータをやり取りし、柔軟にUIを更新できるのが大きな特徴です。
ロケール対応URL
ストアでは、海外で販売する場合や複数の言語で販売する場合に、動的URLを生成できます。Ajax APIを使用する場合は、訪問者が選択した言語と国で一貫したエクスペリエンスを提供できるように、動的でロケールに対応したURLを使用することが重要です。 例えばフランス語で商品情報を取得する場合は、以下のようなURLでリクエストを送信します。
https://example.myshopify.com/fr/products/sample.js
グローバル値は、window.Shopify.routes.rootJavaScript でロケール対応の URL を構築するときにベースとして使用できます。グローバル値は常に文字で終わる/ため、単純な文字列連結を使用して完全なURLを安全に構築できます。
Ajax APIの主な活用例
Ajax APIで提供される機能は現在５つあります。
-
カート操作
ユーザーのカートに商品を追加・更新・削除したり、カートの内容を参照したり、配送料を計算したりすることができます。
オンラインサイトでは商品ページで「カートに追加」ボタンをクリックした際に、裏で追加処理が行われており、カート画面で更新すると更新処理がAjax APIで行われています。 -
商品情報の取得
任意の商品情報を取得します。商品ページに必要な商品名、価格、在庫状況、画像などを非同期で取得し、表示することができます。
サブスクなど販売プランが設定されている商品はその情報を使った表示ができるため、商品ページの表示を動的に変更することが可能です。 -
商品おすすめ機能
レコメンド用のAPIを呼び出し、関連商品や表示できます。ユーザーの閲覧ページに合わせたおすすめ商品を非同期で表示することで、クロスセル・アップセルの促進が期待できます。また、補完商品を提案することができ、例えば自転車を購入する際にヘルメットやライトを一緒に購入するように促すことができます。 -
商品検索（Predictive Search）
検索キーワードの入力に合わせて予測候補を動的に提示する機能を実装できます。ユーザーの入力途中から商品を提案し、スムーズな買い物体験をサポートします。 -
セクションレンダリング
テーマ内のセクションをAjaxでリクエストし、必要な部分のみを再レンダリングできます。カート操作や検索結果の一部だけを書き換えるなど、効率的にページを更新できます。
Ajax APIを使うメリット
Ajax APIは、Shopifyテーマのパフォーマンスとユーザビリティを向上させるうえで大きな利点があります。
-
シームレスな操作
ユーザーがページ遷移を意識せずに買い物を進められるため、ストレスフリーな体験を提供できます。 -
高い拡張性
追加したい機能や表示ロジックに合わせて、必要なデータだけを取得し、画面を部分的に更新できるため、サイト規模に応じた柔軟な拡張が可能です。 -
モジュール化のしやすさ
テーマの各機能をコンポーネントごとに分割し、それぞれがAjaxリクエストを行う形式にすると、メンテナンス性や再利用性が向上します。 -
A/Bテストとの相性
非同期通信を使って特定箇所だけを変更・切り替えできるため、A/Bテストを行いやすく、施策の評価や改善を素早く進められます。
要件と制限
- 認証なしで利用できるAPIなのでブラウザで直接呼び出すことができます。アクセストークンやクライアントIDは必要ありません。
- Ajax APIには厳格なレート制限はありません。ただし、Shopifyの標準的なAPI不正使用防止対策の対象となります。
- すべてのAPI応答は JSON 形式のデータを返します。
- 製品のJSON応答は最大 100 バリアントに制限されます。
- Ajax APIを使用して顧客データや注文データを読み取ったり、ストアデータを更新したりすることはできません。より広範な処理が必要な場合は、GraphQL Admin APIを検討してください。
Ajax APIを使ったカスタマイズの必要性について
基本的にShopifyのテーマは、商品追加ボタン、カート操作や商品情報の取得などの基本機能を備えていますのでこのAPIを意識する場面はほとんどないでしょう。
しかし、テーマによっては、カスタム追加ボタンや特定の商品をおすすめする機能がない場合があります。または一からテーマを開発するケースもあるかもしれません。そのような場合にはAjax APIを使って、自分でカスタマイズを行いましょう。
まとめ
ShopifyのAjax APIは、カートの操作からおすすめ商品の表示、そして高速な商品検索とセクションレンダリングまで、幅広い場面で役立つ機能を備えています。既存のテーマ以上にカスタマイズが必要な際（カスタム追加ボタンなど）にはぜひAjax APIを活用してみてください。ユーザーのストア体験を向上させることができるでしょう。