6-2 購物清單值處理

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