Hướng dẫn tạo Giỏ Hàng (Add to cart) cho blogspot

Thứ Năm, 5 tháng 12, 2013

Bài viết này tôi sẽ hướng dẫn tạo Giỏ Hàng (Add to cart) cho blogspot 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:

P1. Chèn code CSS cho Add to card

B1- Đăng nhập (login) vào Blog
B2- Vào Mẫu (Template)
B3- Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Proceed):

Code Giỏ Hàng (Add to cart) cho blogspot

B4- Chèn đoạn CSS sau phía trên thẻ ]]></b:skin> trong template: Bạn nhấn Ctrl+F để tìm thẻ

chèn đoạn CSS này vào :

#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;}

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

P2. Đ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 widget) => 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 ích 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ẻ <body> : Bạn nhấn Ctrl+F để tìm thẻ nhé.

<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://hkp-shop.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>

P3. 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.

<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">Giá Sản phẩm VNĐ</span>
<input class="item_add" type="button" value="Cho Vào Giỏ" /></li>

P4. 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ẻ </head>

<script src='https://dl.dropbox.com/u/100307920/Blog/Shared/cart-v1.0.js' type='text/javascript'/>
<script>
simpleCart({
checkout: {
type: &quot;PayPal&quot;,
email: "trannhathumg@gmail.com"
},
currency:   "VND"
});
</script>

bạn thay mail màu đỏ bằng mail của mình nhé.

Chúc các bạn thành công!

Nguồn: http://tainguyenmo.blogspot.com