NowLoading...
Hackz Jewelの設計

Hackz Jewelの設計

TypeScript

TypeScript

Hackz Jewel

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

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

データソース

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

Image from Gyazo Image from Gyazo

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

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

Image from Gyazo

サイト作成

GatsbyJSを用いました。

ECサイトの基本ページは

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

です。

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

Image from Gyazo

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

デプロイ

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

まとめ

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

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

ふっけ

ふっけ

@fukke0906