【Google教學】免費製作可自動計算總金額的網頁訂購單(含運費/Email通知)，解決Google表單限制！

今天想跟大家分享一個實用的Google教學，主題是如何免費製作一個可以自動計算購買總金額的網頁版訂購單程式。

很多朋友會使用Google表單來製作訂購單，它很方便，但有一個明顯的缺點：使用者無法在填寫時即時看到所選購商品的總金額。這對於需要計算運費門檻或希望客戶清楚知道費用的店家來說，非常不方便。

為了解決這個痛點，我用Google Apps Script自己寫了一個訂購單網頁程式。這個程式不僅能即時計算總金額（包含運費），還能將訂單明細直接寫入指定的Google試算表，並透過Email通知店家有新訂單。更棒的是，這個方法是完全免費的！

這個自製訂購單有什麼優點？

1. 即時總額計算： 客戶每增減一個商品數量，購物車和總金額會立即更新。

2. 自動運費計算： 可設定免運門檻，未達門檻會自動加上運費。

3. 訂單整合至Google試算表： 客戶送出訂單後，詳細的購買人資訊與訂單內容會自動新增到你指定的Google試算表中，方便管理。

4. Email即時通知： 訂單成立後，系統會自動發送一封包含訂單完整內容的Email到你指定的信箱。

5. 離線使用/純計價： 可以產生一個離線HTML版本，方便在沒有網路或不想直接下單時，單純用來計算金額，甚至可以複製結果傳到LINE。

6. 客製化彈性： 可設定店家名稱、商品圖片/連結、分類、價格、備註、最低購買數量等。

實際展示

在影片中，我展示了「香純滴雞精」的訂購範例：

• 客戶在網頁上點選商品旁邊的 +1 或 -1 按鈕。

• 下方的購物車區塊會即時顯示選購的品項、數量、小計與總金額。

• 當總金額未達免運門檻（範例為

  $3000\text{），會顯示運費}$

  160；達到門檻後運費即消失。

• 填寫購買人姓名、電話、寄送地址等資訊。

• 按下「送出」按鈕。

• 系統會顯示訂購成功的畫面，包含訂單明細。

• 同時，指定的Google試算表會新增一筆完整的訂單紀錄。

• 店家的Email信箱也會收到一封訂單通知信。

如何取得與設定你自己的訂購單？

如果你也想試用看看這個方便的訂購單程式，步驟如下：

1. 準備資料：

   • 店家設定： 依序提供 店家名稱;圖片網址(可留空);上架日期;運費;免運金額;金額顯示小數位數。

     • 範例： 香純滴雞精;;2024/3/31;160;3000;0 (圖片網址留空，小數點顯示0位)

   • 產品設定：

     • 分類(選用)： 如果商品需要分類，請用 {分類名稱} 的格式單獨一行。

     • 產品項目： 依序提供 產品名稱@介紹網頁(可留空)@顯示幾顆星(可留空)@最少購買數量(可留空)@圖片網址(可留空);價格。

       • 簡單範例： 美式咖啡,40 (只有品名和價格)

       • 完整範例： 招牌咖啡@https://xxx.com/coffee.html@@M@https://yyy.com/img.jpg,M 40,L 50 (品名、連結、M尺寸、圖片、M價格40、L價格50。注意尺寸/價格用空白分隔)

       • 有分類範例：

         {義式咖啡}
         美式咖啡,M 40,L 50
         招牌咖啡,M 40,L 50

         Use code with caution.

   • 將上述資料整理成一個文字檔(.txt)。

2. 提交申請：

   • 前往申請表單網址 (影片中提供的連結)。

   • 填寫你的Email、店家名稱等基本資訊。

   • 上傳你準備好的店家與產品設定文字檔。

3. 取得程式碼：

   • 我收到資料並產生程式碼後，會將 Apps Script程式碼檔案 的連結(通常是Google Drive連結)透過Email寄給你。

   • 範例程式碼連結 (影片提供)：https://drive.google.com/file/d/1TdwLEM01thoR0XbHcz_StpWaPe9eYpVL/view (請注意這只是範例，你需要提交申請才能取得你專屬的程式碼)

4. 自行設定：

   • 建立一份新的Google試算表，並將其命名 (例如：香純滴雞精訂單)。

   • 進入試算表的「擴充功能」>「Apps Script」。

   • 將我提供給你的程式碼(.gs 檔案內容) 貼到 程式碼.gs 編輯區，覆蓋原有內容。

   • 修改程式碼： 找到程式碼中 var company = '...' 和 var email='...' 的地方，改成你自己的店家名稱和要接收訂單通知的Email信箱。

   • 新增一個HTML檔案：點擊左側「檔案」旁邊的 +，選擇「HTML」，檔名輸入 shop (不需要副檔名)。

   • 將我產生給你的 shop.html 檔案內容 (通常是透過「產生離線版本」按鈕取得的HTML原始碼) 完整複製貼到這個 shop.html 編輯區。

   • 儲存專案 (給專案取個名字)。

5. 部署為網路應用程式：

   • 點擊右上角的「部署」>「新增部署作業」。

   • 選擇類型：點齒輪圖示，選擇「網路應用程式」。

   • 設定：

     • 說明：(可自行輸入，例如：滴雞精訂購單 V1)

     • 執行身分：選擇「我」。

     • 誰可以存取：務必選擇「任何人」。

   • 點擊「部署」。

   • 首次部署需要授權： 點擊「授予存取權」，選擇你的Google帳戶，可能會看到警告畫面，點擊「進階」，再點「前往你的專案名稱」，最後點「允許」。

   • 部署完成後，複製提供的「網路應用程式網址」。這個網址就是你的訂購單網頁！

6. (建議) 使用Google協作平台包裝網址： 因為Apps Script產生的網址很長，建議可以建立一個Google協作平台網頁，在裡面放一個按鈕或連結，指向你剛剛複製的網路應用程式網址，方便客戶點擊。

注意事項

• 手機號碼開頭的0可能會因為試算表格式問題而消失，建議收到訂單後，在試算表中將電話欄位格式設定為「純文字」，這樣0才能保留。

• 每次修改 程式碼.gs 或 shop.html 後，都需要重新部署：「部署」>「管理部署作業」> 找到你的部署項目點編輯(鉛筆圖示) > 版本選擇「新版本」> 點「部署」。網址通常不會變，但內容會更新。