Giai đoạn 4: Thiết kế giao diện và tương tác tại Trang Thanh toán
by
Lex
03/06/2021
Stage Content, WCS Courses Content
0
Đã chọn xong sản phẩm, đã biết được số tiền cần phải trả, cùng giúp người dùng tiến hành thanh toán nào. Ở giai đoạn này, bạn sẽ thiết kế giao diện và tương tác cho 3 hoạt động: Kiểm tra đơn hàng, Thanh toán và Xác nhận. Sẵn sàng chưa, thực hiện thôi!
Yêu cầu
1. Trang Kiểm tra đơn hàng
- Vị trí (1) hiển thị các bước thực hiện thanh toán đơn hàng, người dùng không thể bấm vào bước 2, 3 nếu chưa hoàn thành bước 1;
- Khi người dùng nhấn vào button (2), các lựa chọn sẽ xổ xuống phía dưới;
- Người dùng sẽ đi đến trang “Sản phẩm” khi nhấn vào button (3) và đi đến bước tiếp theo khi nhấn vào button (4).
2. Trang Thanh toán
- Người dùng có thể sao chép mã số đơn hàng khi nhấn vào vị trí số (5);
- Thời gian ở vị trí (6) sẽ giảm dần khi người dùng bắt đầu bước thanh toán;
- Người dùng chỉ có thể chọn 1 hình thức thanh toán và khi nhấn chọn sẽ hiển thị như vị trí số (7);
- Người dùng sẽ chuyển sang bước tiếp theo khi nhấn vào button (8).
3. Trang Xác nhận
Khi người dùng nhấn vào button (9) sẽ đi đến trang “Sản phẩm”.
Gợi ý cho bạn
- Thay đổi nội dung trên trang theo điều kiện với Conditional Rendering
- Tạo Countdown Timer với Javascript
Related Posts
Leave a Reply Cancel reply
Categories
- Bài viết (1)
- Blog (24)
- Code Review (3)
- Course Introduction (2)
- CSS (4)
- CSS Grid (4)
- Javascript (2)
- Lesson (11)
- Lưu dữ liệu trên trình duyệt (1)
- Network Requests (1)
- OneDirect Projects (1)
- Product Review (3)
- Stage Content (16)
- WCS Courses Content (17)