Sau khi thêm vào giỏ hàng những sản phẩm mong muốn, người dùng sẽ cần biết được mình đã lựa chọn gì và chi phí mình cần bỏ ra là bao nhiêu. Vì vậy hãy thiết kế một Pop up trình bày các nội dung trên nhé. Bắt đầu nào!

Yêu cầu

Khi người dùng nhấn vào button hoặc sẽ xuất hiện Popup như bên dưới.

  • Khi người dùng nhấn vào box ở vị trí (1), sẽ xuất hiện nhiều lựa chọn và khi nhấn vào một lựa chọn, thông tin thanh toán ở trang “Thanh toán” sẽ thay đổi;
  • Các thông tin về mặt hàng sẽ biến mất nếu người dùng nhấn button (2);
  • Người dùng nhập mã vào box ở vị trí (3) thì các thông tin tại vị trí (4) sẽ thay đổi;
  • Khi người dùng nhấn vào button (5), họ sẽ đi đến trang “Kiểm tra đơn hàng”.

Gợi ý cho bạn

  • Áp dụng Redux để tạo Giỏ hàng và lưu thông tin sản phẩm được chọn