GatsbyJS と Shopify を連携し、商品情報を表示する
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
今回は、前々回の記事「Eコマース用のプラットフォーム Shopify を触ってみる」に続いて、React 用静的サイトジェネレーターの GatsbyJS と Shopify を連携し、商品情報を表示させるところまで試した手順とその感想についてまとめたいと思います。
前々回の記事で開設したサイトをベースに紹介していきますので、そちらも参照していただけるとありがたいです。
Shopify 側の設定
GatsbyJS と Shopify を連携するには、まず Shopify 側でプライベートアプリの開発を有効にする必要があります。
サイドバー > アプリ管理 > 下部の プライベートアプリを管理する から、プライベートアプリの開発を有効にします。
その後、 プライベートアプリを作成する から、GatsbyJS 連携用のプライベートアプリを作成します。
GatsbyJS などのSSGとの連携には Shopify Storefront API にアクセスするため、このアプリがストアフロントAPIを使用してストアフロントデータにアクセスできるようにする のチェックボックスをオンにし、 商品タグを読む 顧客タグを読む の設定もオンにします。
作成するとAPIキーが発行され、外部からAPIにアクセスできるようになりました。
GatsbyJS 側の設定
GatsbyJS と Shopify を連携するには、 gatsby-source-shopify プラグインと shopify-buy パッケージを導入します。
$ yarn add -D gatsby-source-shopify shopify-buygatsby-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
}
}
}
}
}
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 にご相談ください。
オンラインでのフルリモート開発とチーム参加にも対応しています。
フロントエンドの相談をする！
