ECサイト

どんなものか

デジタル素材の商品検索、詳細、カート、購入、注文管理までを一周できるECサイトのデモです。決済は実サービスへ接続しないモックです。

なぜ作ったか

商品を探すところから購入後の注文管理まで、ECサイトの表側と管理側を一周できる形で作ることが発端です。公開デモで安全に最後まで操作できるよう、金銭を扱う決済部分だけは意図的にモックへ切り分けました。

見どころ

• 商品検索、詳細、カート、購入、注文管理というECサイトの一連の流れを実際に操作できます。
• カード情報をサーバーへ送らないモック決済により、公開デモでも購入完了まで安全に試せます。

できること

• カテゴリや価格から商品を絞り込めます
• 商品をカートへ入れ、注文完了まで進められます
• お店側で商品や注文を管理できます
• 売上の状況をグラフや一覧で確認できます

特に工夫したところ

• カード入力欄の値はサーバーへ送らず、fakeCheckoutがデモ成功を返す構成にして、金銭やカード情報を扱わずに購入完了まで試せるようにしました。
• カートはReact ContextとlocalStorageで保持し、商品一覧の絞り込み条件はURLへ同期するため、戻る・進むや結果の共有でも状態が分かります。
• 管理画面では商品の公開状態、価格、セール、タグを編集でき、画像素材がなくても商品ごとのSVG画像を生成して登録できます。

実際に触ってみる