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

1. 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
2. Nếu giỏ hàng trống, hãy cung cấp đề xuất sản phẩm
3. Cho phép người dùng tháo sản phẩm dễ dàng
4. Cung cấp cái nhìn rõ ràng về tổng giá của giỏ hàng
5. Duy trì hệ thống phân cấp thị giác thích hợp
6. 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

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{
 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{
 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

Làm cách nào để thêm các mặt hàng vào giỏ hàng bằng JavaScript?

Làm cách nào để tạo giỏ hàng bằng HTML CSS và JavaScript?