Hackz Jewel

ハックツECサイトが復活しました! 今回はGatsbyとShopifyを用いたECサイトの作成における全体の設計と実装について書きます。

環境設定方法についてはこちらのレシピへ

データソース

商品データはShopifyを用いて管理しました。

データはGraphQLを用いて取得しました。

GraphQLを用いたデータ取得方法を以下に示します。

サイト作成

GatsbyJSを用いました。

ECサイトの基本ページは

• 商品一覧ページ
• 商品詳細ページ
• カートページ

です。

今回は TOPページに商品一覧と人気タグを実装、カートはページではなくサイドバーから利用できるようにしました。

カートのデータ管理はshopify-buyというライブラリを用いて行いました。

デプロイ

Gatsby Cloudを用いました。 PRの自動レビュー機能やビルド機能があります。

まとめ

GatsbyとShopifyを用いることでいわゆる「ヘッドレスコマース」の作成ができました。

SSGと部分的なCSRの組み合わせによる「超高速サイト」！！