線上書籍

Home

GAS+購物車開發

YT影片：
  1. 購物清單值處理 - 1：https://youtu.be/UfewfNmmf1U
  2. 購物清單值處理 - 2：https://youtu.be/lm_doTxa67w
  在 cart1.html 搜尋「document.getElementById('submitOrder')」

 

開關按鈕與Loading html <!-- Loading HTML 請放在 html 的最後方--> <div id="loading" style="display: none;"> <div class="position-fixed w-100 h-100 d-flex justify-content-center align-items-center" style="background: rgba(0,0,0,0.5); top: 0; left: 0; z-index: 9999;"> <div class="spinner-border text-primary me-2" role="status"> <span class="visually-hidden">載入中...</span> </div> <div class="text-white">資料處理中...</div> </div> </div> js // 關閉送出 document.getElementById('submitOrder').disabled = true; // 顯示 loading document.getElementById('loading').style.display = 'flex'; // 開啟送出 document.getElementById('submitOrder').disabled = false; // 隱藏 loading document.getElementById('loading').style.display = 'none';   表單值處理

cart轉換：https://monica.im/share/chat?shareId=1i5dp1v3bFjoOvIm

// 表單值處理 orderData.sn = ''; orderData.date = ''; orderData.no = ''; orderData.userId = '';//屆時會從Line Bot傳過來 orderData.total = document.getElementById('totalAmount').textContent; orderData.receive = ''; orderData.status = '訂單成立'; orderData.cart = JSON.stringify(Object.values(cart)); // 使用 Object.values() 直接取得物件中所有的值並轉成陣列 // console.log(Object.values(cart)) 調用後台儲存

調用後台函數 基本語法

try { // 調用後台函數 google.script.run .withSuccessHandler(onSuccess) // 成功處理函數 .withFailureHandler(onFailure) // 失敗處理函數 .調用函數(value) // 調用函數 } catch (error) { // 錯誤處理 console.log('發生錯誤: ' + error); return '處理過程發生錯誤'; }

template_form.html

google.script.run.withSuccessHandler(onSuccess)[insert_op](formData);

[insert_op] 直接改成 .insert_sheet_order_cart(formData);// formData -> orderData 

// 時間戳記 if (stru[i]['form_fun'] === "時間戳記") {//判斷功能是否為 時間戳記 formData[stru[i]['form_name']] = Utilities.formatDate(new Date(), "GMT+08:00", "yyyy/MM/dd HH:mm:ss");//2020/06/13/ 23:06 stru[i]['form_type'] = "文字"; }

改為多判斷 「formData[stru[i]['form_name']]」是空值時，才由程式建立 日期時間

// 時間戳記 if (stru[i]['form_fun'] === "時間戳記" && !formData[stru[i]['form_name']]) {//判斷功能是否為 時間戳記 formData[stru[i]['form_name']] = Utilities.formatDate(new Date(), "GMT+08:00", "yyyy/MM/dd HH:mm:ss");//2020/06/13/ 23:06 stru[i]['form_type'] = "文字"; }

 

儲後回傳

再將回傳，渲染一個訂單完成畫面

respond = { result: true, message: "Success", row: formData }

函數

/*=============================== 資料寫入成功，回傳 ===============================*/ function onSuccess(html) { var div = document.getElementById('show'); div.innerHTML = html; } /*=============================== 資料寫入失敗，回傳 ===============================*/ function onFailure(html) { var div = document.getElementById('show'); div.innerHTML = html; }