（上記画像クリックでサイトへ遷移します。ぜひご覧ください。）
【機能】
1 カート機能
商品をカートに追加すると、セッションに保存され、カートアイコンに〇アイコンが付与されます。
また、数量を変更すると画面遷移なしで値段と合計金額が更新されます。
2 決済機能
お支払いへ進むをクリックすると、カードの支払い画面へ遷移する。
オンライン決済のプラットフォームである「stripe」を使用して実装しました。
下記のデータを入力していただくと、購入をお試しいただけます。
【支払い情報】
メールアドレス：test@gmail.com
カード情報：4242 4242 4242 4242
MM (月) / YY (年) ：01/30
セキュリティコード:123
カード保有者の名前：TEST
【制作期間】
3日間
【制作過程】
社内の3人チームで開発しました。
全員開発未経験だっため、意見を出し合いながら制作しました。
デザイン、画面構成、画面遷移、テーブル設計等すべて自分たちで考えました。
【担当ページ・機能】
チーム開発のため、それぞれ分担して開発しました。
わたしは下記のページ、機能を担当しました。
- オンラインショップのトップページ
- 商品詳細ページ
- カートページ
- カート機能
【工夫点】
1 サイトを訪れた人に興味をもってもらえるように、トップページのローディングアニメーションなど、ファーストインパクトを大事にしました。
2 商品であるドーナツが目立つように、色づかい等、その他のデザインはシンプルに設計しました。
【使用技術】
1 フロントエンド
- HTML / CSS
- Jquery（JavaScript）
- slick（jqueryのプラグイン）
2 バックエンド
- PHP
3 環境
- Windows
- VS Code（エディタ）
- ZAMP（ローカル環境）
- Xサーバー（本番環境）
【課題点】
1 在庫管理
現在は購入数に制限がないため、この商品は1日何個まで、と在庫管理テーブルと紐づけて管理できるようにしたいです。
2 購入キャンセル
より実際に運営されているECサイトの機能に近づけるため、購入後30分以内にキャンセル可能など、キャンセル機能を実装したいです。