1. 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;}
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)
<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>Phần 2: Phần giỏ chứa các sản phẩm. (Chèn vào phía dưới thẻ <body> )
<div class='bag'> <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://namkna.blogspot.com/p/lien-he.html '>Liên Hệ</a></li> <li><a class='mycart' href='#'>Tắt Giỏ Hàng</a></li> </ul> </div>3. Phần code của sản phẩm (cái này cho vào bài viết)
<li class="simpleCart_shelfItem"><h2 class="item_name"> 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>4. Phần Script chèn vào phía trên thẻ </head>
<script src='http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.1.6.1.min.js ' type='text/javascript'/> <script src='https://dl.dropbox.com/u/100307920/Blog/Shared/cart-v1.0.js ' type='text/javascript'/> <script> simpleCart({ checkout: { type: "PayPal", email: "tavannam01@gmail.com" }, currency: "VND" }); </script>
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 đây hoặ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 .
No comments:
Post a Comment