Tích hợp SimpleCart vào Blogger và gửi order qua email

Mã nguồn:

http://simplecartjs.org

Bài viết này nhằm hướng dẫn các "script kiddie" cách tích hợp mã js SimpleCart (dùng để tạo giỏ hàng cho trang web có tính chất shopping) và cách sửa code để có thể gửi được các order qua email của webmaster.

Bước 1

Đăng ký 1 tài khoản trên 000webhost để có host lưu các file cần thiết (simplecart.js, sendcart.php, thankyou.html). Lưu ý đường link đến file sẽ có dạng:
https://[username].000webhostapp.com/[filename].[extension]

Bước 2

Trên blogger tạo 1 page với tên chính xác là guidonhang và nhập nội dung như sau:

<style>
input {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #dfdfdf;
}
input:required:invalid {
    background-image: url(https://mrhoanglee.000webhostapp.com/images/invalid.png);
    background-position: right top;
    background-repeat: no-repeat;
}
input:required:valid {
    background-image: url(https://mrhoanglee.000webhostapp.com/images/valid.png);
    background-position: right top;
    background-repeat: no-repeat;
}
</style>
<p style="margin-top:30px;"></p>
<section>
<form name="myform" id="myForm" method="POST" action="https://mrhoanglee.000webhostapp.com/sendcart.php">
<fieldset>
Nhập tên của bạn:<br />
<input type="text" name="firstname" id="firstname" placeholder="" title="Nhập tên của bạn" required/><br />
Địa chỉ giao hàng:<br />
<input type="text" name="address" id="address" placeholder="" title="Nhập địa chỉ giao hàng" required/><br />
Số điện thoại liên hệ:<br />
<input type="tel" name="phone" id="phone" placeholder="" title="Nhập số điện thoại liên hệ" required/><br />
Email: <small><i>(không bắt buộc)</i></small><br />
<input type="email" name="email" id="email" placeholder="" title="Nhập email của bạn"><br />
Ghi chú: <small><i>(không bắt buộc)</i></small><br />
<input type="text" name="commentss" id="commentss" placeholder="" title="Nhập ghi chú khác"><br />
</fieldset>
<div class="simpleCart_items"></div><br />
<a href="" type="submit" id="submit" name="submit" value="GỬI ĐƠN HÀNG" class="simpleCart_checkout">GỬI ĐƠN HÀNG</a>
</form>
</section> 

Bước 3

Tạo file sendcart.php và nhập nội dung:

<?php
$to = 'lehuyhoangvn@gmail.com'; /* your shop's email */
$subject = 'New Order from Mailaighe'; /* your desired subject to be displayed on the sent email */
$content = $_POST; /* receiving SimpleCart order array */
$body = ''; /* declaring the email body */

$firstname = 'firstname'; /* extra field variable */
$email = 'email'; /* extra field variable */
$phone = 'phone'; /* extra field variable */
$commentss = 'commentss'; /* extra field variable */
$address = 'address';

$body .= '=================================='."\n";
$body .= "Name: ".$content[$firstname]."\n"; /* using extra field variable */
$body .= "Email: ".$content[$email]."\n"; /* using extra field variable */
$body .= "Phone: ".$content[$phone]."\n"; /* using extra field variable */
$body .= "Address: ".$content[$address]."\n";
$body .= "\n";
$body .= 'Has placed the following order:'."\n";
$body .= '=================================='."\n";
/* starting the loop to get all orders from the stored array */
for($i=1; $i < $content['itemCount'] + 1; $i++) {
$name = 'item_name_'.$i; /* product name variable */
$quantity = 'item_quantity_'.$i; /* product quantity variable */
$price = 'item_price_'.$i; /* product price variable */
$total = $content[$quantity]*$content[$price]; /* product total price variable (price*quantity) */
$grandTotal += $total; /* accumulating the total of all items */
$body .= 'Order #'.$i.': '.$content[$name]."\n".'Qty x '.$content[$quantity]."\n".'Unit Price: $'.number_format($content[$price], 2, '.', '')."\n".'Subtotal: $'.number_format($total, 2, '.', '')."\n"; /* creating a semantic format for each ordered product */
$body .= '=================================='."\n";
}
/* ending the loop to get all orders from the stored array */

$body .= 'Order Total: $'.number_format($grandTotal, 2, '.', '')."\n"; /* total amount of the order */
$body .= '=================================='."\n";
$body .= "\n";
$body .= "Comments: ".$content[$commentss]."\n"; /* using extra field variable */
$headers = 'From: ' . $email."\r\n" .
'Reply-To: ' . $to."\r\n" .
'X-Mailer: PHP/' . phpversion() .
'MIME-Version: 1.0\r\n'.
'Content-Type: text/html; charset=ISO-8859-1\r\n'; /* essential if you're using HTML tags on your mail */

mail($to, $subject, $body, $headers); /* building the mail() function */
Header('Location: thankyou.html'); /* declaring the page to redirect if the mail is sent successfully */
?> 

Bước 4

Tạo file thankyou.html với nội dung tùy thích (để làm trang cảm ơn sau khi đã gửi order). Sau đó upload cả 3 file simplecart.js, sendcart.php và thankyou.html lên host.

Bước 5

Vào trang quản lý blogger >> Themes >> Edit HTML

Copy đoạn mã bên dưới và paste vào trước thẻ < b:skin >< ![CDATA[

<!--Include the SimpleCart(js) script-->
    <script charset='utf-8' src='simplecart.js' type='text/javascript'/>
<!--simplecart configuration-->
<script type='text/javascript'>
simpleCart({
     cartColumns: [{
         attr: "name",
         label: false
     }, {
         attr: "price",
         label: false,
         view: 'currency'
     }, {
         view: "decrement",
         label: false,
         text: "-"
     }, {
         attr: "quantity",
         label: false
     }, {
         view: "increment",
         label: false,
         text: "+"
     }, {
         attr: "total",
         label: false,
         view: 'currency'
     }, {
         view: "remove",
         text: "Remove",
         label: false
     }],
     checkout: {
         type: "SendForm" , 
         url: "https://mrhoanglee.000webhostapp.com/sendcart.php",
         method: "POST",
     }
});
simpleCart.bind( 'beforeCheckout' , function( data ){
data.firstname = document.getElementById("firstname").value;
data.address = document.getElementById("address").value;
data.email = document.getElementById("email").value;
data.phone = document.getElementById("phone").value;
data.commentss = document.getElementById("commentss").value;
});
</script>

Bước 6

Thiết lập CSS cho simplecart bằng cách paste đoạn mã sau vào trước thẻ ]]>< /b:skin >

/* Your Cart */
.cartHeaders,.totalRow{display:none;}
.simpleCart_items{
overflow-y:auto;
overflow-x:hidden;
height:324px;
width:243px;
margin-bottom:20px;
}
.itemContainer{
clear:both;
width:229px;
padding:11px 0;
font-size:11px;
}
.itemImage{
float:left;
width:60px;
}
.itemName{
float:left;
width:85px;
}
.itemPrice{
float:left;
width:85px;
color:#418932;
}
.itemQuantity{
float:left;
width:33px;
margin-top:-12px;
vertical-align:middle;
}
.itemQuantity input{
width:20px;
border:1px solid #ccc;
padding:3px 2px;
}
.itemTotal{
float:left;
color:#c23f26;
margin-top:-6px
}

Bước 7

Tạo widget để hiển thị giỏ hàng. Vào Layout - Add A Gadget - Chọn widget HTML/Javascript sau đó add nội dung như bên dưới (và nhớ lưu lại nhé!):

<!--Add a Div with the class "simpleCart_items" to show your shopping cart area.-->
<div class="simpleCart_items">
</div>
TOTAL: <div class="simpleCart_total"></div>
<span class="simpleCart_quantity"></span> items
<br/>
<br/>
<!--Here's the Links to Checkout and Empty Cart-->
<center>
<a href="#" class="simpleCart_empty">Empty cart  </a>  |
<a href="#" class="simpleCart_checkout">Checkout</a></center>

Trên đây chỉ là các hướng dẫn cơ bản, các bước cần thiết để có thể tạo giỏ hàng và gửi order qua email. Các đoạn code bên trên hoàn toàn có thể tùy chỉnh theo ý của người sử dụng (trừ file simplecart.js được up lên host là cố định).

Bài viết được tổng hợp từ Google & 2 ngày vọc code :) Enjoy playing with scripts !!