(上記画像クリックでサイトへ遷移します。ぜひご覧ください。)
【機能】
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分以内にキャンセル可能など、キャンセル機能を実装したいです。