Giao diện giỏ hàng HTML

Hôm nay namkna sẽ chia sẻ đoạn code giỏ hàng (add to cart) cho các bạn am hiểu về thiết kế blog tự thiết kế ra template bán hàng riêng cho mình. Code hoạt động khá tốt, khắc phục được lỗi số lượng sản phẩm mà các template bán hàng khác mắc phải. Đoạn code này sử dụng file Jquery được Võ Quốc An viết.

Nội dung chính Show

1. Chèn code CSS cho Add to card
2. Đoạn code của giỏ hàng gồm 2 phần:
Shopping Cart
Các Ví Dụ Shopping Cart
Cách Tạo Shopping Cart JS
Cách Tạo Responsive Shopping Cart
Cách Tạo Shopping Cart Template
Cách Tạo Javascript Shopping Cart
Cách Tạo Vue.js Shopping Cart
Cách Tạo Jquery Shopping Cart
Cách Tạo React Shopping Cart
Cách Tạo Shopping Cart CSS3 Jquery
Thiết Kế Vuejs Shopping Cart Template
Thiết Kế Shopping Cart Javascript
Thiết Kế Shopping Cart Với VueJS
Thiết Kế Bazar React Shopping Cart
Tổng kết:

Các bạn có thể xem Demo dể thấy rõ hơn.

Demo for Post

Đoạn code giỏ hàng gồm có 4 phần:

1. Chèn code CSS cho Add to card

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog

2- Vào Mẫu (Template)

3- Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Proceed)

4- Chèn đoạn CSS sau phía trên thẻ ]]></b:skin> trong template:

#maincart a {padding:2px 10px; background:#ddd; border-radius:0 5px; box-shadow:1px 1px 2px 1px #666; }
#maincart ul {margin:10px 0 5px 0; text-align:center; }
#maincart ul li {display:inline}
.bag{position:fixed; top:0px; width:980px; display:none; background:#eee; padding:10px; box-shadow:1px 1px 2px 1px #666;}
.bag .itemrow{float:left; width:125px; padding:5px; border-radius:15px 0; box-shadow:1px 1px 2px 1px #999; margin:5px 5px 0 0}
.bag ul {float:right}
.bag ul li{display:inline;}
.bag ul li a{padding:2px 10px; background:#ddd; border-radius:5px 0; box-shadow:1px 1px 2px 1px #666; margin-left:10px}
.bag ul li a:hover {background:#666; box-shadow:1px 1px 2px 1px #333;}
.bag h2{text-align:center; border-bottom:1px solid #333; margin-bottom:5px; padding-bottom:5px}
.bag .line {border-bottom:1px solid #333; margin:5px 0; width:980px}
.bag .item-decrement, .bag .item-increment {display:none}
.bag .item-total {border-top:1px solid #333}
.item_add{border:none; background:#999; margin:0; height:20px; width:95px; line-height:20px; text-shadow: 0.5px 0.5px 1px #444; color: #333; font-family: georgia; margin-top:5px}
.item_add:hover {cursor:pointer; color:#eee; background:#333}
.item_add{border-radius:5px}
.item_price{font-size:16px; font-weight:bold;}

5- Lưu mẫu lại.

2. Đoạn code của giỏ hàng gồm 2 phần:

Phần 1: Phần cố định trên blog. (Chèn vào sidebar) bằng cách. Vào Bố cục (Layout) => Chọn Thêm tiện ích (Add a Gadget) => Chọn HTML/Javarscip => Đến đây bạn hãy dán code bên dưới và dán vào widget HTML/Javarscip của bạn nha.

<div id='maincart'>
<h2>Giỏ Hàng Của Bạn</h2>
<p>
Hiện có <span class='simpleCart_quantity'/> sản phẩm<br/>
Tổng Số Tiền: <span class='simpleCart_total'/><br/></p>
<ul>
<li><a class='simpleCart_empty' href='javascript:;'>Xóa Hết</a></li>
<li><a class='mycart' href='#'>Xem Giỏ Hàng</a></li>
</ul>
</div>

- Lưu tiện cíh lại.

Phần 2: Phần giỏ chứa các sản phẩm. Chèn vào template bằng các: Vào Mẫu (Template) => Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Proceed) => Dán đoạn code bên dưới vào sau thẻ

Bài viết hôm nay mình sẽ giới thiệu đến bạn shopping cart là gì và các ví dụ các shopping cart được xây dựng bằng HTML, CSS, Javascript cho thiết kế và phát triển web nhé!

Shopping Cart

Shopping cart(Giỏ hàng) là chức năng cho phép khách hàng có thể lưu trữ lại các sản phẩm mà mình yêu thích ở trên website. Ngoài ra nhiều giỏ hàng còn có chức xem giá trị, số lượng, thuế VAT, giả khuyến mãi của từng mặt hàng hay tổng giá của tất các các sản phẩm mà người dùng lưu lại.

Khi bạn code chức năng shopping cart cho website thì điều bắt buộc phải có là chức năng thêm, sửa, xóa sản phẩm. Đồng thời khi khách hàng quay lại website thì bạn phải hiển thị được các sản phẩm mà người dùng đã chọn trước đó. Để dễ hình dung bạn xem hình ảnh dưới đây nhé:

Nếu bạn muốn tìm hiểu cách tạo shopping cart javascript thì có thể tham khảo các đường dẫn bên dưới nha!

Tạo Shopping cart Với HTML5 Web Storage(Smashingmagazine): Creating A Shopping Cart With HTML5 Web Storage

Tạo Shopping cart Từ Đầu Tới Cuối(FreeCodeCamp): Shopping Cart from Scratch

Tạo JavaScript Shopping Cart Cho Người Mới Bắt Đầu(Web Dev Simplified): JavaScript Shopping Cart

Các Ví Dụ Shopping Cart

Trong phần này chúng ta sẽ đi vào tìm hiểu các ví dụ UI và chức năng shopping cart bằng HTML, CSS và Javascript cho website nhé!

Cách Tạo Shopping Cart JS

Ví dụ này giúp bạn có thể tạo đầy đủ chức năng shopping cart dành cho website bằng Bootstrap và Javascript. Nó hiển thị đầy đủ giá tiền cho từng sản phẩm, tổng tiền tất cả các mặt hàng, cho phép xóa hay chỉnh sửa sản phẩm...

See the Pen Shopping cart JS by Burlaka Dmytro (@Dimasion) on CodePen.

Nguồn