抓取購物車的商品資料(名稱、單價、數量、小計)並用smtpJS.com送出訂單
header.php部份程式碼：
<!-- Modal -->
<div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cart</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="jQuery('#cart').modal('hide')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="show-cart table">
</table>
<div>Total price: $<span class="total-cart"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="jQuery('#cart').modal('hide')">Close</button>
<button type="button" class="btn btn-primary" onclick="submitOrder();">Order now</button>
</div>
</div>
</div>
</div>
<script>
function submitOrder() {
<?php
global $current_user; wp_get_current_user();
if ( is_user_logged_in() ) { //如果WordPress使用者有登入的話
echo "let currentUserName = ".'"'.$current_user->display_name.'";'."rn";
echo "let userEMail = ".'"'.$current_user->user_email.'";'."rn";
}
?>
console.log("Submit order....");
}
</script>
<?php bootscore_ie_alert(); ?>
在order now的按鈕元素上加上onclick=”submitOrder();”，按下此按鈕後，呼叫submitOrder函式：
<script>
function submitOrder() {
let currentUserName="", userEMail="";
<?php
global $current_user; wp_get_current_user();
if ( is_user_logged_in() ) { //如果WordPress使用者有登入的話
echo "currentUserName = ".'"'.$current_user->display_name.'";'."\r\n";
echo "userEMail = ".'"'.$current_user->user_email.'";'."\r\n";
}
?>
if ( currentUserName !== "") {
console.log("Submit order....");
} else {
alert("送出訂單前，請先登入!!");
}
}
</script>
觀察輸出的原始碼：
<script>
function submitOrder() {
let currentUserName = "u1085100";
let userEMail = "fgchen@gmail.com";
console.log("Submit order....");
}
</script>
上面顯示已經從WordPress抓取客戶名稱與email，如此一來，我們就可以使用JavaScript處理後續的動作。
接著，我們要抓取我們使用的購物車裏的商品資料產生訂單：
我們先用F12裏的Console來操作購物車物件。
let cartObject = shoppingCart.listCart();
function submitOrder() {
let currentUserName = "", userEMail="";
<?php
global $current_user; wp_get_current_user();
if ( is_user_logged_in() ) { //如果WordPress使用者有登入的話
echo "currentUserName = ".'"'.$current_user->display_name.'";'."rn";
echo "userEMail = ".'"'.$current_user->user_email.'";'."rn";
}
?>
let cartObject = shoppingCart.listCart(); //取得購物車項目物件
let orderTotal = 0;
console.log("Submit order....");
console.log("客戶名稱：" + currentUserName);
console.log("客戶郵件：" + userEMail);
console.log("本次訂單明細");
console.log("t商品名稱tttt單價t數量t小計");
console.log("----------------------------------------------------------");
for (let i = 0; i < cartObject.length; i++){
console.log("t" + cartObject[i]["name"] +
"ttt" + cartObject[i]["price"] +
"tt" + cartObject[i]["count"] +
"tt" + cartObject[i]["total"]
);
orderTotal += parseFloat( cartObject[i]["total"] );
}
console.log("-----------------------------------------------------------");
console.log("訂單總金額：" + orderTotal + "元");
jQuery('#cart').modal('hide'); //關閉對話方塊
jQuery('.clear-cart').click(); //清空購物車
}
</script>
訂單輸出至Console的結果範例：
Submit order.... 客戶名稱：wells 客戶郵件：ronald@hk.edu.tw 本次訂單明細 商品名稱 單價 數量 小計 --------------------------------------------------------- 黑糖珍珠奶茶 60 1 60.00 抹茶珍珠奶茶 70 6 420.00 仙草凍奶茶 65 5 325.00 ---------------------------------------------------------- 訂單總金額：805元最後，將訂單透過smtpJS.com以郵件方式送出訂單
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script>
function submitOrder() {
let currentUserName = "", userEMail="";
<?php
global $current_user; wp_get_current_user();
if ( is_user_logged_in() ) { //如果WordPress使用者有登入的話
echo "currentUserName = ".'"'.$current_user->display_name.'";'."\r\n";
echo "userEMail = ".'"'.$current_user->user_email.'";'."\r\n";
}
?>
let cartObject = shoppingCart.listCart(); //取得購物車項目物件
let orderTotal = 0;
console.log("Submit order....");
console.log("客戶名稱：" + currentUserName);
console.log("客戶郵件：" + userEMail);
console.log("本次訂單明細");
console.log("\t商品名稱\t\t\t\t單價\t數量\t小計");
console.log("----------------------------------------------------------");
let orderBody = "<table id=\"customers\" style=\"width:600px;\">\r\n" +
"<tr><td colspan=\"4\"><h1 style=\"text-align:center;\">新訂單明細</h1></td></tr>\r\n"+
"<tr><th>商品名稱</th><th>單價</th><th>數量</th><th>小計</th></tr>\r\n";
for (let i = 0; i < cartObject.length; i++){
console.log("\t" + cartObject[i]["name"] +
"\t\t\t" + cartObject[i]["price"] +
"\t\t" + cartObject[i]["count"] +
"\t\t" + cartObject[i]["total"]
);
orderBody += "<tr><td style=\"text-align:center;\">" + cartObject[i]["name"] + "</td>\r\n" +
"<td style=\"text-align:center;\">" + cartObject[i]["price"] + "</td>\r\n" +
"<td style=\"text-align:center;\">" + cartObject[i]["count"] + "</td>\r\n" +
"<td style=\"text-align:center;\">" + cartObject[i]["total"] + "</td></tr>\r\n" ;
orderTotal += parseFloat( cartObject[i]["total"] );
}
orderBody += "<tr><td colspan=\"4\" style=\"text-align:center;\"><h2>訂單總金額：" + orderTotal + "元</h2></td></tr></table>\r\n";
console.log("-----------------------------------------------------------");
console.log("訂單總金額：" + orderTotal + "元");
console.log("底下是orderBody變數的輸出：");
console.log(orderBody);
Email.send({
Host : "wda1902.stu.fgchen.com",
Username : "wda1902",
Password : "232131",
To : 'fgchen@gmail.com',
From : "wda1902@wda1902.stu.fgchen.com",
Subject : "新訂單",
Body : orderBody
}).then(
// message => alert(message)
);
jQuery('#cart').modal('hide'); //關閉對話方塊
jQuery('.clear-cart').click(); //清空購物車
}
</script>
One more thing, 對話方塊要關閉，購物車要清空：
jQuery('#cart').modal('hide');
jQuery('.clear-cart').click();