GatsbyJS と Shopify を連携し、商品情報を表示する

ishigaki

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、前々回の記事「Eコマース用のプラットフォーム Shopify を触ってみる」に続いて、React 用静的サイトジェネレーターの GatsbyJSShopify を連携し、商品情報を表示させるところまで試した手順とその感想についてまとめたいと思います。

前々回の記事で開設したサイトをベースに紹介していきますので、そちらも参照していただけるとありがたいです。

Shopify 側の設定

GatsbyJS と Shopify を連携するには、まず Shopify 側でプライベートアプリの開発を有効にする必要があります。

サイドバー > アプリ管理 > 下部の プライベートアプリを管理する から、プライベートアプリの開発を有効にします。

プライベートアプリはデフォルトでは無効になっているため、設定で有効にする必要あり

その後、 プライベートアプリを作成する から、GatsbyJS 連携用のプライベートアプリを作成します。

GatsbyJS などのSSGとの連携には Shopify Storefront API にアクセスするため、このアプリがストアフロントAPIを使用してストアフロントデータにアクセスできるようにする のチェックボックスをオンにし、 商品タグを読む 顧客タグを読む の設定もオンにします。

プライベートアプリ作成画面のストアフロントAPI設定項目

作成するとAPIキーが発行され、外部からAPIにアクセスできるようになりました。

GatsbyJS 側の設定

GatsbyJS と Shopify を連携するには、 gatsby-source-shopify プラグインと shopify-buy パッケージを導入します。

$ yarn add -D gatsby-source-shopify shopify-buy

gatsby-source-shopify は GraphQL で Shopify のデータを取得できるようにするプラグインで、 shopify-buy はショップから商品やコレクションを取得したり、カートに商品を追加したり、チェックアウトしたりする機能を組み込むための Shopify が提供しているパッケージです。

プラグイン導入後、 gatsby-config.js に以下の設定を追加します。

plugins: [
  {
    resolve: `gatsby-source-shopify`,
    options: {
      shopName: `アカウント名 (example.myshopify.com であれば example)]`,
      accessToken: `発行されたAPIキー`,
    },
  },
]

これで GraphQL でデータを呼べるようになりました。

試しに gatsby develop でローカル環境を立ち上げ、 http://localhost:8000/___graphql で GraphiQL にアクセスしてクエリを叩いてみます。

以下が取得できるクエリの主要な抜粋です。

query MyQuery {
  allShopifyProduct {
    edges {
      node {
        availableForSale // 商品を購入できるか
        createdAt // 商品の作成日時
        publishedAt // 商品の公開日時
        updatedAt // 商品の更新日時
        title
        description
        descriptionHtml
        handle // Shopify 側の商品ページの slug (example.myshopify.com/products/t-shirts であれば `t-shirts`)
        images {
          originalSrc
        }
        priceRange {
          maxVariantPrice {
            amount // 商品の最高価格
          }
          minVariantPrice {
            amount // 商品の最低価格
          }
        }
        options { // バリエーションの一覧
          name
          values
        }
        variants { // バリエーションごとの情報
          availableForSale
          title
          price
        }
      }
    }
  }
}
GraphiQL で上記のクエリを叩いた結果

GatsbyJS のページ上に商品情報を出す

GraphQL で取得できた後は、以前書いた記事のようなやり方と同じようにページ上で呼び出して取得したデータを表示させることができます。

...

const Page = ({ data }) => {
  return (
    <div>
      {data.allShopifyProduct.edges.map(({ node }) => (
        <li key={node.shopifyId}>
          <h3>
            <Link
            to={`https://example.myshopify.com/products/${node.handle}`}
            >
            {node.title}
            </Link>
            {' - '}
            {node.priceRange.minVariantPrice.amount}
          </h3>

          <img src={node.images[0].originalSrc} alt="" />
          <p>{node.description}</p>
        </li>
      ))}
    </div>
  );
};

export const pageQuery = graphql`
    allShopifyProduct(sort: { fields: [title] }) {
      edges {
        node {
          title
          images {
            originalSrc
          }
          shopifyId
          description
          availableForSale
          priceRange {
            maxVariantPrice {
              amount
            }
            minVariantPrice {
              amount
            }
          }
          handle
        }
      }
    }
  }
`;
ダミーの商品情報をページ上に表示させた画面

これで GatsbyJS のページ上に基本的な商品情報を表示することができました。

まとめ

今回は商品情報の表示までに留まりましたが、今後カート周りの追加や購入画面への遷移の実装なども試してみたいと思います。

また、ヘッドレスコマースとしての側面だけでなく、Shopify自体の機能についても掘り下げて学んでいき、知見を溜めていこうと考えています。

Shopify の導入について気になっている方の参考になれば幸いです。

Gaji-Labo は SSR / SSG / SPA 開発実績があります

SSR / SSG / SPA の開発実績があるフロントエンド開発の専門家が御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。「フロントエンドの人手が足りず信頼できるエンジニアを探している」「フロントエンド構築をどうしたらいいか分からない」「手を付けてみたけどいまいち上手くいかない」などのお困りごとがあればまずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのフルリモート開発とチーム参加にも対応しています。

フロントエンドの相談をする!


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。