【Shopify Storefront API】別のWebサイトに商品を表示する

▼毎日をちょっと楽しく過ごす

ShopifyのECサイトとは別のWebサイトでShopifyの商品を表示してみようと思いました。

この記事のタイトル下に入っている「▼毎日をちょっと楽しく過ごす」というのが弊社ECの商品を引っ張ってきて、表示をしております。

これを実現するにはStorefront APIというのを使います。

Web以外にもアプリやゲームにも利用できるようで、色々な「体験」を用意ができそうですね。

Strorefront APIはGraphQLを使ってデータを取得します。ちなみにREST APIはありません。

ShopifyでAPIを使う準備をする

初めに、ShopifyでAPIを使う準備をします。管理画面にログインをして「アプリ」をクリックします。

管理画面 > アプリ > アプリと販売チャネルの設定

Shopifyの管理画面は常に進化しています

Shopifyは常に進化していますので、ここで説明している手順が異なる場合があります。掲載場所の変更、UIの変更があっても、向かう場所は同じなので、近しい項目を探してみてください。

「アプリを開発」もしくは「ストア用のカスタムアプリを管理する」をクリックします。

次に「アプリを作成」をクリックします。

アプリ名を入力し、「アプリを作成」をクリックします。

アプリが作成できたところで、スコープの設定をします。

今回はストアフロントAPIを利用したいので、「ストアフロントAPIスコープを設定する」をクリックします。

利用したいものにチェックを入れていきます。

商品一覧を取得したいので、商品リストにチェックを入れます。

次に、アクセストークンを取得します。

「API資格情報」のタブをクリックし、「アプリをインストール」をクリックします。

そうすると、トークンが表示されます。このトークンは後ほど使います。

トークンの下にある「APIキー」と「シークレットキー」も後ほど使います。

WebサイトでShopifyの商品一覧を表示してみる

設定が完了したところで、WebサイトでShopifyで出品している商品一覧を表示してみたいと思います。

JavaScriptを使って実装してみます。

Storefront APIリクエストは以下の通りです。

https://{ショップ名}.myshopify.com/api/unstable/graphql.json

これにクエリを投げていきます。

<script>
    //クエリを作る
    const query = `{
      products(first: 4) {
        edges {
            node {
                title
                description
                handle
                images(first: 1) {
                    edges {
                        node {
                            altText transformedSrc(maxWidth: 400, maxHeight: 400)
                            }
                        }
                    }
                }
            }
        }
    }`;

    //リクエストする
    function apiCall(query) {
        return fetch('https://[ストアのアカウント].myshopify.com/api/2021-10/graphql.json', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/graphql',
                'X-Shopify-Storefront-Access-Token': "アクセストークン" 
            },
            "body": query
        }).then(response => response.json());
    }

    //フロントに表示する
    const productList = document.getElementById('product');
    let html = '';
    apiCall(query).then(response => {
        response.data.products.edges.forEach(product => {
            html += `<img alt="${product.node.images.edges[0].node.altText}" src="${product.node.images.edges[0].node.transformedSrc}">`;
            html += `<h4>${product.node.title}</h4>`;
        });
       productList.innerHTML = html;
    });
</script>

最初にGraphQLのクエリを書いて、取得したい内容を設定します。

商品一覧を取得したいので、「products」というクエリを使っています。これらは公式で確認できます。

Shopify dev : https://shopify.dev/api/storefront/2022-01/queries/products

次は、APIへコールの関数にまとめています。

Storefront API の[ストアのアカウント名]はフロントで使うストアの名前ではなく、「アカウント名です」。

アカウントについて:https://help.shopify.com/ja/manual/your-account/manage-account

最後に、APIを叩いて取得したデータを、フロントに表示する処理を行なっています。

これで完了です。

予想より簡単に他のWebサイトに掲載することができました。

参考サイト

https://www.christhefreelancer.com/shopify-storefront-api/

この記事はあなたの役に立ちましたか?