Code Giỏ Hàng (Add to cart)
Cùng với việc cho ra Simple Shopping Store Template mình cũng xin share đ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 giỏ hàng gồm có 4 phần:
1. Chèn đoạn CSS sau phía trên thẻ ]]></b:skin>
#maincart a {padding:2px 10px; background:#ddd; border-radius:0 5px; box-shadow:1px 1px 2px 1px #666; }2. Đoạn code của giỏ hàng gồm 2 phần:
#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;}
Phần 1: Phần cố định trên blog. (Chèn vào sidebar)
<div id='maincart'>Phần 2: Phần giỏ chứa các sản phẩm. (Chèn vào phía dưới thẻ <body>)
<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>
<div class='bag'>3. Phần code của sản phẩm (cái này cho vào bài viết)
<h2>Giỏ Hàng Của Bạn</h2>
<div class='simpleCart_items'/>
<div style='clear:both'/>
<div class='line'/>
Số Lượng: <span class='simpleCart_quantity'/> sản phẩm<br/>
Tổng Cộng: <span class='simpleCart_grandTotal' id='simpleCart_grandTotal'/>
<ul>
<li><a class='simpleCart_empty' href='javascript:;'>Xóa Hết</a></li>
<li><a class='simpleCart_checkout' href='javascript:;'>Thanh Toán</a></li>
<li><a href='http://www.voquocan.com'>Liên Hệ</a></li>
<li><a class='mycart' href='#'>Tắt Giỏ Hàng</a></li>
</ul>
</div>
<li class="simpleCart_shelfItem"><h2 class="item_name">4. Phần Script chèn vào phía trên thẻ </head>
Tên Sản Phẩm</h2>
<img class="item_thumb" src="Link Ảnh Sản Phẩm" />
<span class="item_price">590,000 VNĐ</span>
<input class="item_add" type="button" value="Cho Vào Giỏ" /></li>
<script src='http://voquocan.googlecode.com/files/jquery.1.6.1.min.js' type='text/javascript'/>5. Lưu ý:
<script src='https://dl.dropbox.com/u/100307920/Blog/Shared/cart-v1.0.js' type='text/javascript'/>
<script>
simpleCart({
checkout: {
type: "PayPal",
email: "kts.voquocan@gmail.com"
},
currency: "VND"
});
</script>
1. 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.Nếu có vấn đề gì bạn để lại comment bên dưới mình sẽ cố gắng trả lời trong thời gian sớm nhất có thể.
2. 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)
3. 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.
1 nhận xét:
hay
Đăng nhận xét