StoreFront API を利用した購入履歴機能の実装について

日本語 ディスカッション 技術的なQ＆A

AI-generated summary

テーマ: Storefront API を用いた、ログイン後の購入履歴表示の可否と実装方法。

最新の結論: 可能。Shopify の Storefront API（フロント向け GraphQL API）で Order オブジェクトを、ログイン後に得られる customerAccessToken（顧客認証トークン）を使って取得する。

実装の要点:

  • 顧客がログイン → customerAccessToken を取得。
  • GraphQL で customer(customerAccessToken: …) { orders(…) { … } } を実行し、購入履歴を取得。

取得できる主なフィールド例:

  • id, name, statusUrl, orderNumber
  • canceledAt, processedAt
  • financialStatus, fulfillmentStatus
  • totalPriceV2 { amount }

補足: 掲載の GraphQL クエリ例（customer→orders）のコード断片が理解の中心。APIバージョン参考リンク（2022-10）も提示。

議論の状態: 反対意見や追加課題は提示されておらず、具体的な実装指針が示されている。

1

初めまして、hiddyOtakeと申します。

React(Next.js) + StoreFront API を利用し、デモストアの構築に取り組んでおります。

会員 or 非会員問わず、商品を購入できる設計にしたいのですが、

「過去にショップで商品を購入されたことのあるお客様に対しては、サイト内でのログインを実行すれば、購入履歴を表示する機能」の実装は可能でしょうか。

前提として、下記のディスカッションを一読し、Customer creation などで簡易的なログイン機能は実装できるのはわかりました。

https://community.shopify.com/post/1136692

その上で、ログイン後にユーザーの購入履歴情報を、storefront を用いて取得することは可能でしょうか。

勘所をお持ちの方がいれば、ぜひご意見を伺いたく思います。

よろしくお願い申し上げます。

2

https://shopify.dev/api/storefront/2022-10/objects/Order
こちらのAPIを使えば取得可能です。
ログインしたら取得できるcustomerAccessTokenを使って、下記のようなqueryで取得すればよいかと思います。

{
  customer(customerAccessToken: "${customerAccessToken}") {
    orders(first: 250) {
      edges {
        node {
          id
          name
          statusUrl
          orderNumber
          canceledAt
          processedAt
          financialStatus
          fulfillmentStatus 
          totalPriceV2 {
            amount
          }
        }
      }
    }
  }
}