Trang giỏ hàng được thiết kế để cho phép người mua xem tất cả các sản phẩm họ đã thêm vào giỏ hàng. Nó chứa một danh sách chi tiết các sản phẩm và giá của chúng, và là điểm dừng cuối cùng trước khi khách hàng đặt hàng và thanh toán
Hãy nghĩ về trang giỏ hàng như thời điểm này. Ngay trước khi bạn trả phòng. Nếu bạn có một danh sách mua sắm, bây giờ là lúc để kiểm tra nó để đảm bảo rằng bạn có tất cả các mặt hàng bạn muốn mua. Bạn không có thẻ tín dụng. Nhưng bạn biết rằng nếu mọi thứ diễn ra theo đúng kế hoạch, điểm dừng tiếp theo của bạn sẽ là quầy thanh toán
Tạo trải nghiệm người dùng tốt hơn- Cho phép người dùng chỉnh sửa số lượng mặt hàng trực tiếp trong giỏ hàng
- Nếu giỏ hàng trống, hãy cung cấp đề xuất sản phẩm
- Cho phép người dùng tháo sản phẩm dễ dàng
- Cung cấp cái nhìn rõ ràng về tổng giá của giỏ hàng
- Duy trì hệ thống phân cấp thị giác thích hợp
- Cho phép người dùng dọn sạch giỏ hàng bằng một cú nhấp chuột
Bước 1. Tạo thẻ
HTML
CSS
body{
margin: 0;
padding: 0;
background: linear-gradient[to bottom right, #E3F0FF, #FAFCFF];
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}.Cart-Container{
width: 70%;
height: 85%;
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0px 25px 40px #1687d933;
}
Xem trước
Bước 2. Thêm tiêu đề thẻ
HTML
Shopping Cart
Remove all
CSS
.Header{
margin: auto;
width: 90%;
height: 15%;
display: flex;
justify-content: space-between;
align-items: center;
}
.Heading{
font-size: 20px;
font-family: ‘Open Sans’;
font-weight: 700;
color: #2F3841;
}
.Action{
font-size: 14px;
font-family: ‘Open Sans’;
font-weight: 600;
color: #E44C4C;
cursor: pointer;
border-bottom: 1px solid #E44C4C;
}
Xem trước
Bước 3. Thêm chi tiết sản phẩm
HTML
Apple Juice
250ml
CSS
.Cart-Items{
margin: auto;
width: 90%;
height: 30%;
display: flex;
justify-content: space-between;
align-items: center;
}
.image-box{
width: 15%;
text-align: center;
}
.about{
height: 100%;
}
.title{
padding-top: 5px;
line-height: 10px;
font-size: 32px;
font-family: ‘Open Sans’;
font-weight: 800;
color: #202020;
}
.subtitle{
line-height: 10px;
font-size: 18px;
font-family: ‘Open Sans’;
font-weight: 600;
color: #909090;
}
Xem trước
Bước 4. Tạo bộ đếm
HTML
+
2
-
CSS
.counter{
width: 15%;
display: flex;
justify-content: space-between;
align-items: center;
}
.btn{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #d9d9d9;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: ‘Open Sans’;
font-weight: 900;
color: #202020;
cursor: pointer;
}
.count{
font-size: 20px;
font-family: ‘Open Sans’;
font-weight: 900;
color: #202020;
}
Xem trước
Bước 5. Thêm phần giá
HTML
________số 8_______CSS
.prices{
height: 100%;
text-align: right;
}
.amount{
padding-top: 20px;
font-size: 26px;
font-family: ‘Open Sans’;
font-weight: 800;
color: #202020;
}
.save{
padding-top: 5px;
font-size: 14px;
font-family: ‘Open Sans’;
font-weight: 600;
color: #1687d9;
cursor: pointer;
}
.remove{
padding-top: 5px;
font-size: 14px;
font-family: ‘Open Sans’;
font-weight: 600;
color: #E44C4C;
cursor: pointer;
}
Xem trước
Bước 6. Sao chép mặt hàng giỏ hàng
Làm theo các bước từ 3 đến 5 và thêm chi tiết mới
Bước 7. Tạo phần thanh toán
HTML
body{0
margin: 0;
padding: 0;
background: linear-gradient[to bottom right, #E3F0FF, #FAFCFF];
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}.Cart-Container{
width: 70%;
height: 85%;
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0px 25px 40px #1687d933;
}
CSS
body{1
margin: 0;
padding: 0;
background: linear-gradient[to bottom right, #E3F0FF, #FAFCFF];
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}.Cart-Container{
width: 70%;
height: 85%;
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0px 25px 40px #1687d933;
}
Xem trước
Gói [lại
Liên kết GitHub cho cùng
Khi chọn thiết kế giỏ hàng, ít nhất hãy nhớ rằng mọi người cần kiểm soát, tự do và thông tin. Đây là nơi người dùng duyệt qua sản phẩm của bạn và thực sự quyết định mua gì. Nó phụ thuộc vào bạn. Một giải pháp đơn giản