【自主制作】店舗のECサイト

OVERVIEW

架空のドーナツ店のトップページとオンラインサイト(決済機能付き)を開発しました。

YEAR 2023

(上記画像クリックでサイトへ遷移します。ぜひご覧ください。)

【機能】 

1 カート機能

商品をカートに追加すると、セッションに保存され、カートアイコンに〇アイコンが付与されます。

また、数量を変更すると画面遷移なしで値段と合計金額が更新されます。 

2 決済機能

お支払いへ進むをクリックすると、カードの支払い画面へ遷移する。

オンライン決済のプラットフォームである「stripe」を使用して実装しました。

下記のデータを入力していただくと、購入をお試しいただけます。

【支払い情報】

メールアドレス:test@gmail.com

カード情報:4242 4242 4242 4242

MM (月) / YY (年) :01/30

セキュリティコード:123

 カード保有者の名前:TEST

【制作期間】

 3日間

【制作過程】

デザイン、画面構成、画面遷移、テーブル設計等すべて自分で考えました。


【工夫点】

1 サイトを訪れた人に興味をもってもらえるように、トップページのローディングアニメーションなど、ファーストインパクトを大事にしました。

2 商品であるドーナツが目立つように、色づかい等、その他のデザインはシンプルに設計しました。


【使用技術】

1 フロントエンド

  • HTML / CSS
  • Jquery(JavaScript)
  • slick(jqueryのプラグイン)

2 バックエンド

  • PHP

3 環境

  • Windows
  • VS Code(エディタ)
  • ZAMP(ローカル環境)
  • Xサーバー(本番環境)


【課題点】

1 在庫管理

現在は購入数に制限がないため、この商品は1日何個まで、と在庫管理テーブルと紐づけて管理できるようにしたいです。

2 購入キャンセル

より実際に運営されているECサイトの機能に近づけるため、購入後30分以内にキャンセル可能など、キャンセル機能を実装したいです。