APIで商品登録とその商品をカートに入れる動作を実現できますか？

[魚ピチピチ]

お世話になります。

ShopifyにはAPIが多数あるかと思いますが、こちらのAPIで商品登録できますでしょうか？

というのも、Javascriptで生成した「商品をカートに入れるボタン」を押すと、Shopifyのカートに商品が入るようにしたいのです。

この生成される商品ですが、商品の色やデザインが数百種類、更にサイズ展開が数百種類ありますため、Shopifyに商品を新たに登録することは不可能です。

現状ではカートに入れるボタンを押した場合の動作は下記が理想です。

1.カートに入れるボタンを押すと、サイズとカラーや詳細情報が入った商品がShopifyに新規登録される（商品登録系のAPI）
2.その商品をカートに自動で入れる処理（カート系のAPI)

申し訳ありません、本当は手元に自由にいじれるShopifyがあったらよかったのですが、Shopifyの所有者がパートナー企業でして、試しいじりできる状態にありません。

上記、お忙しいところ大変申し訳ありませんがご確認のほどお願い申し上げます。

[Qcoltd]

私自身、そこまでShopifyのAPIに詳しくないのですが、

ご質問者様の質問内容に興味があり、調査してみました。

1.カートに入れるボタンを押すと、サイズとカラーや詳細情報が入った商品がShopifyに新規登録される（商品登録系のAPI）

2.その商品をカートに自動で入れる処理（カート系のAPI)

私が試した限りでは1は可能です。
しかし、JavaScriptだけで実現するのはお勧め致しません。

商品登録はAdmin APIに属し、APIコールには、トークンが必要になります。

Admin APIはストアの顧客情報や商品情報を閲覧・操作するためのAPIです。

トークンは、Admin APIをコールするためのパスワードのようなものですので、

このトークンをJavaScriptで扱えるようにすると、

必然、サイト訪問者であれば、誰でもトークンを知りえてしまいます。

(簡単には見つけられないとは思いますが、知ろうと思えば知ることができてしまいます。)

もちろん、このトークンで操作できる範囲(スコープと言います)を指定することはできますが、

少なくとも、商品登録は誰でもできるようになってしまいますので、

JavaScriptだけで実現しようとするとセキュリティ的に問題かと思います。

ですので、

サイト上での操作内容(ご質問のケースでは、商品の色やデザインになりますね)を、まずご質問者様側のサーバに送り、サーバ側のアプリケーション(PHPやJavaやNode.jsなど)からAPIコールをすることで、トークンを隠すことができます。

しかし、2については、Shopify外部からカート投入をすることができるか確証が持てませんでした。
ですので、埋め込み購入ボタンをJavaScriptで操作する方法を代わりにご提案します。

(埋め込み購入ボタンがどこまでJavaScriptで操作できる確認していないため、不足があるかもしれません。)

下記のような流れになるかと思います。

ユーザーがサイト上で商品の色やデザインを選択し、「登録」ボタンのようなものをクリック

↓

ブラウザ上から質問者様側のサーバにAPIコールされる(これはリクエストAと呼ぶことにします。)

↓

サーバからShopifyのAdmin APIをコールする

↓

Admin APIは商品登録完了のレスポンスとして商品IDを返却してくれますので、ブラウザからのリクエストAのレスポンスとして、商品IDを返す

↓

ブラウザは、商品IDを受け取ったら、埋め込み購入ボタンをJavaScriptで操作し、ユーザーにチェックアウトフローに進むよう案内する

具体的にどうやって商品を作るかというと、下記のサイトに実例が示されていますので、こちらをご覧いただくのが良いかと思います。

私の手元でも試しましたが、問題なく商品登録できました。

https://zenn.dev/unreact/articles/api-examples-products

埋め込み購入ボタンについてはShopify公式のドキュメントがあります。

https://help.shopify.com/ja/manual/online-sales-channels/buy-button

なお、Shopify外部からカート投入をする件ですが、

こちらの英語版のShopify Communityに投稿された質問を追っていきますと、

https://community.shopify.com/c/shopify-apis-and-sdks/add-to-cart-outside-shopify/m-p/1138052

最終的に、

https://shopify.dev/api/ajax

このページに辿り着くのですが、Shopify外部からのコールが可能か怪しい内容でした。

なお、最後になりますが、

Shopify Partnerに登録すれば、開発用のShopifyストアであれば自由に(無料で)構築することができます。

Shopify Partnerに登録すること自体、無料で簡単にできますので、お時間許すようであれば、登録されるとより調査しやすいかもしれません。

https://www.shopify.com/jp/partners

(キュー田辺)

[魚ピチピチ]

キュー田辺様、ありがとうございます！

詳しい解説、リンク先の引用もありがとうございます。

わかりやすくて大変助かります。

私自身最後にShopifyに関わったのが数年前のためあまり覚えていないのですが、確かShopifyは下記のような仕様だった気がします。

・PHPが使えない(拡張子.php禁止）

・FTP接続の概念がなく管理画面かターミナルからのプッシュのみで更新

・記述言語はliquidという独自のテンプレート言語

上記仕様を考えると、別のサーバーでPHPを使ってカートボタン生成プログラムを作り、Shopifyにそのページをiframeで呼び出して表示させる方式が最善そうですね…。

改めてありがとうございました。

[Qcoltd]

質問内容を誤解しておりました。

何らかの理由で、Shopifyの外部にサイトを持ち、そこで商品を選択させる、というお話だと勘違いしておりましたが、ご質問者様は一度も、外部サイトを持つ、とは書かれていませんでしたね。

失礼しました。

そうすると、私の回答は、誤解を前提にしたものになるので、

前述の手順は下記のようになるかと思います。

1. ユーザーがサイト上で商品の色やデザインを選択し、「登録」ボタンのようなものをクリック

↓

2. ブラウザ上から質問者様側のサーバにAPIコールされる(これはリクエストAと呼ぶことにします。)

↓

3. サーバからShopifyのAdmin APIをコールする

↓

4. Admin APIは商品登録完了のレスポンスとして商品IDを返却してくれますので、ブラウザからのリクエストAのレスポンスとして、商品IDを返す

↓

5. ブラウザは、商品IDを受け取ったら、カート投入APIをコールする。

[変更点]

5の手順は、Shopify AJAX APIのCart APIを使用すれば大丈夫ですので、

iframeで読み込むなどの手間をかけなくても、直接カート投入可能です。

https://shopify.dev/api/ajax/reference/cart

2の手順についてですが、質問者様のご認識通り、Shopify上にサーバサイドの処理を置くことはできません。やり方は2通り考えられますが、どちらのやり方も最終的に、サーバを準備いただくことになります。

方法1: 質問者様側でAPIサーバを構築する (APIサーバでやることは、リクエストを受けたら、Shopify Admin APIをコールし、商品登録を行い、成功したら商品IDをレスポンスする。調べが浅くて恐縮ですが、カート投入するには商品IDではなく、varinat ID(商品バリエーションのID)が必要だったかもしれません。)

方法2: Shopifyのカスタムアプリを開発する

Shopifyのアプリは、Shopifyにホストされるわけではなく、自前でサーバを用意する必要があるため、方法1も方法2も実質は同じになります。しかし、カスタムアプリの方が、Shopifyとの管理機能の連携はスムーズかと思います。

(しかし、Shopifyアプリは、Node.jsで構築するチュートリアルは充実していますが、他の言語はそうでもないようなので、Node.jsに慣れていらっしゃらない、かつ、今回の利用ケースであれば、方法1が現実的かもしれません。)

(キュー田辺)

[魚ピチピチ]

いえいえ、仰る通り、外部サーバーを持っております。

現状自社サーバーにあるシステムの1ページをパートナー企業のShopifyに流用したいのです。

外部サーバーからAPIが利用できないならShopifyに直接搭載するか、それも難しいなら諦めるしかないな…と考えておりましたので、むしろ最初のご案内が外部サーバー想定の回答で大変助かりました。

こちらこそ、誤解を与える言い回しになってしまい申し訳ありません…。

後述の回答も大変勉強になりました。

ありがとうございました。