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.
Chia sẻ:
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.
Đ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ẻ ]]>
#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.
- 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ẻ
Giỏ Hàng Của Bạn
Số Lượng: sản phẩm Tổng Cộng:
3. Phần code của sản phẩm
Phần này khi viết bài bạn check vào phần HTML và chèn code bên dưới vào.Tên Sản Phẩm
4. Phần Script của code Add to card
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 phía trên thẻLưu ý:2- Nếu trong template của bạn đã có file jquery.min.js thì bỏ file jquery ở bước 4 để tránh xung đột code.
1- Để sử dụng lâu dài các bạn hãy tải các file javarscrip về (xem cách tải Tại đây) sau đó Uplaod lên host riêng (host Google code Tại đâyhoặc Dropbox Tại đây) để sử dụng lâu dài nha.
3- File cart-v1.0.js khi up lên googlecode thì không hoạt động (mình cũng không rõ nguyên nhân) do vậy các bạn sử dụng Dropbox TẠI ĐÂY
4- Nếu hiển thị ra blog không như ý bạn thì điều chỉnh lại CSS ở bước 1. Để hiểu rõ hơn về CSS bạn xem bài viết CSS căn bản.
Nguồn: Võ Quốc An
Bài đăng
0 nhận xét:
Đăng nhận xét