商品のVendor（販売元）をWordpressへ連携して表示する方法

[nishi-ec]

実現したいこと

Shopifyの各商品のvendor情報をWordpressに連携して表示したいです。

イメージとしてはこちら（https://katasekk.co.jp/goodcast/category/?na=2）のようにvendor（販売元）をWordpressのページ上にテキストで表示し、リンク先はShopifyのVender（検索フィルターで該当のVendorに絞り込んだ検索結果）に遷移させたいです。

Shopify上でVendorを追加・削除するとWordpressにも自動反映され、在庫なしの時は非表示となるように連携できるとベストです。

試したこと

Shopifyアプリの「BuyButton」でコレクションのボタンを作成し、vendorで絞り込みできるかトライしましたが、Wordpressに埋め込んだJavascriptをカスタマイズしてvendorを制御する方法にたどり着けませんでした。

また、Wordpressの無料プラグインでは、vendor情報を連携可能なものが見当たりませんでした。

もしお気づきの点があればアドバイスいただけると幸いです。

よろしくお願いいたします。

[Qcoltd]

アプリなどで簡単に実現する方法があるのかもしれないのですが、

私は下記の方法しか思いつきませんでした。

また、詳細まで記載するのが難しいのでコンセプトのみの説明になることご容赦ください。

[方向性]

ShopifyのAdmin APIを利用します。

[やり方]

1. Shopifyストアに「カスタムアプリ」を用意します。https://help.shopify.com/ja/manual/apps/app-types/custom-apps
2. 「カスタムアプリ」の「Admin APIアクセススコープ」で「read_products」を許可します。
3. 「カスタムアプリ」の「API資格情報」から「Admin APIのアクセストークン」を取得します。一度しか表示できないのでお気をつけください。また外部に流出してはならない情報ですので取り扱いにもお気をつけください。
4. 上記で取得したアクセストークンをRequest Headerの「X-Shopify-Access-Token」に設定し、Admin APIをコールします。APIコールの簡単な概要を下記にまとめます。アクセストークンの流出を避けるため、APIコールは必ずサーバーサイド(WordPressであればPHP)で行ってください。

[Admin API]

参考: https://shopify.dev/docs/api/admin

下記のURLに、QueryをPOSTします。

https://{yourstore_name}.myshopify.com/admin/api/yyyy-mm/graphql.json

{yourstore_name}は後質問者様のストアのURLに合わせてご変更ください。

yyyy-mmは、APIのバージョンです。

https://shopify.dev/docs/api/usage/versioning

2023-01で良いかと思います。

POSTするQuery

{
  shop {
    productVendors (first:10){
      edges {
        node
      }
    }
  }
}

first: 10が取得数です。

設定できる最大値は250ですので、 

vendorの数が251以上ある場合は、やり方が複雑になります。

APIがコールが成功すると下記のようなJSONデータを取得できます。

{
    "data": {
        "shop": {
            "productVendors": {
                "edges": [
                    {
                        "node": "vendor01"
                    },
                    {
                        "node": "vendor02"
                    },
                    {
                        "node": "vendor03"
                    },
                    {
                        "node": "vendor04"
                    }
                ]
            }
        }
    },
    "extensions": {
        "cost": {
            "requestedQueryCost": 2,
            "actualQueryCost": 2,
            "throttleStatus": {
                "maximumAvailable": 10000.0,
                "currentlyAvailable": 9998,
                "restoreRate": 500.0
            }
        }
    }
}

このJSONの値を使ってPHPで整形すれば、

ご希望のVendorのリストが作れるはずです。

コンセプトの説明だけ恐縮ですが、

参考になれば幸いです。

(キュー田辺)

[nishi-ec]

ご回答ありがとうございます。

ご教示いただいた内容をよく確認して実施してみます。