育將電腦工作室 - 線上書籍

GAS+購物車開發
=========

### YT影片：

1. 購物清單值處理 - 1：[<span style="color:#e67e22;">https://youtu.be/UfewfNmmf1U</span>](https://youtu.be/UfewfNmmf1U)
2. 購物清單值處理 - 2：[<span style="color:#e67e22;">https://youtu.be/lm\_doTxa67w</span>](https://youtu.be/lm_doTxa67w)
 
###

### 在 cart1.html 搜尋「document.getElementById('submitOrder')」

### 開關按鈕與Loading

### html

```php

<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

```javascript
// 關閉送出
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>

```javascript

// 表單值處理
              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))

```

### 調用後台儲存

<span style="color:#e67e22;"><span style="font-size: 1rem;">調用後台函數 基本語法</span></span>

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

<span style="color:#e67e22;"><span style="font-size: 1.25rem;">template\_form.html</span></span>

```javascript

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

\[insert\_op\] 直接改成 .insert\_sheet\_order\_cart(<span style="color:#e67e22;">formData</span>);// <span style="color:#e67e22;">formData -> orderData </span>

```javascript

// 時間戳記
    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'\]\]」是空值時，才由程式建立 日期時間

```javascript

// 時間戳記
    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'] = "文字";
    }
```

### 儲後回傳

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

```javascript

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

函數

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

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown