【Shopify】StorefrontAPIでmetafieldを取得する方法！

こんにちは、grandstreamです。

今回は、ShopifyのStorefront APIを用いて、metafieldを取得する方法について簡単に解説したいと思います。

なお本記事は以下の公式ドキュメントを参考に作成しています。

https://shopify.dev/tutorials/retrieve-metafields-with-storefront-api

デフォルトではmetafieldを取得できない

どうやら、Storefront API は、初期状態ではmetafieldの情報を取ってこれない仕様になっているようです。

これを取ってこれるようにするには、（ざっくりいうと）GraphQL Admin APIに対して、許可申請のリクエストを送らないといけないみたいです。

以下では、そのリクエストのやり方を説明します。

Storefront APIでmetafieldを取得する手順

一つずつ見ていきます。

１．ADMIN API権限を許可

これが結構忘れがちなんですよね。

Shopify管理画面の「アプリ管理」からプライベートアプリに入ると、「ADMIN API権限」の欄があると思います。

ここで、「商品管理」など、metafieldを設定している箇所を「読み取り及び書き込み」にしましょう。

これで準備はできました。

２．GraphQLアプリからmutationを作成しAdmin APIに送信

次に、GraphQLでAPI通信ができるアプリを使って、「Storefront APIでmetafieldの情報を取ってこれるようにしたいです」というリクエストをAdmin APIに対して行います。

以下に具体的なコードを載せておきます。

なお、今回参考にした公式ドキュメント内にも同じ記述があります。

mutation

ここはそのままコピペでOK。

variables

ここの”namespace”と”key”の部分は、Shopify構築時にmetafieldアプリなどで設定したものを入力してください。

ちなみに僕は「Advanced Custom Fields」というアプリを使っていたので、そのアプリを開いて”namespace”と”key”を確認しました。（下画像）

そして”ownerType”ですが、ここは、そのmetafieldが属している値を入力してください。

そのメタフィールドが商品に設定したものなら、”PRODUCT”と入力します。

なお、”ownerType”にどんな種類があるかは下記URLをご参考ください。

MetafieldOwnerType

JSON response

うまく通信ができれば、このようなレスポンスが返ってくると思います。

ちなみに同じ送信をもう一度やるとエラーが出ちゃうと思いますが、1回送信すればもうOKです。

普通にStorefront APIで該当のmetafieldが取得できるはずです。

あとは、ちょっとめんどくさいですが、metafieldの”namespace”と”key”を変えながら、必要なだけリクエストを繰り返してください。

QraphQLアプリについて

今回のAPIの通信、動作確認を行うにあたって使用したQraphQLアプリのスクリーンショットを載せておきます。

なお、「Shopify Admin API GraphiQL explorer」とか、「Insomnia」でもできると思います。

なお、adminAPIに通信する際には、「HTTP ヘッダーに」下記内容が必要になりますのでお忘れなく。

まとめ

Shopifyのドキュメントは英語のものが多いので、英語が苦手な方にはしんどいと思いますが、今回の記事が少しでもお役に立てれば幸いです。

ではまた！

関連記事

【Shopify】メニューリストを作成・取得する方法！【API】

【Shopify】新規登録画面から購入画面へリダイレクトする方法！【コピペ】

【WordPress】SNSシェアボタンを設置する方法！シンプル解説【コピペ】

【JavaScript】ゲーム制作をしてみた⑥背景スクロール【スーパーマ◯オ】

【JavaScript】ゲーム制作をしてみた③ジャンプ【スーパーマ◯オ】

vue-awesome-swiperでサムネイル付きスライダーを作成する【Vue.js】