> For the complete documentation index, see [llms.txt](https://mason1762.gitbook.io/samxinbakery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mason1762.gitbook.io/samxinbakery/gong-neng-ge/5.8-shi-wu.md).

# 5.8 顯示購物車與結帳

## 5.8. 顯示購物車與結帳

5.8.1 畫面連結位置

有二個方式可進入顯示購物車與結帳功能： (1) 由產品詳細內容頁面點擊加入購物車圖片 (2) 點擊客戶登入區塊的購物車圖示(或文字)

5.8.2 功能說明

當會員選好產品之後可檢視購物車內容，若已選擇所有想要購買的產品則可進入結帳程序，填寫產品寄送資料後取得付款資訊即完成購買程序。

5.8.3 畫面說明

![](https://839601301-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDqHCDuHO17jEDLqmJp%2F-LGGNyJEjyYNjULr_kt4%2F-LGGORk32YQBHgAeLK4e%2F5.8-1.png?alt=media\&token=2ebaca62-1f43-4f76-8c94-27f9062fbd29)

![](https://839601301-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDqHCDuHO17jEDLqmJp%2F-LGGNyJEjyYNjULr_kt4%2F-LGGOTYNdsDtzLdDhEDc%2F5.8-2.png?alt=media\&token=796d2216-1d8c-4062-b0bc-3ea35a5d6ed1)

![](https://839601301-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDqHCDuHO17jEDLqmJp%2F-LGGNyJEjyYNjULr_kt4%2F-LGGOWDBFy4BER9YTaTw%2F5.8-3.png?alt=media\&token=f8af7ccf-3d17-4f0f-8d07-6486c48a8ade)

![](https://839601301-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDqHCDuHO17jEDLqmJp%2F-LGGNyJEjyYNjULr_kt4%2F-LGGOZF7U3-jfsrSJbGF%2F5.8-4.png?alt=media\&token=3897b635-09fc-4c48-8147-f608edd1c424)

5.8.4 欄位/項目屬性說明

* (1)購物車內容畫面
* 購物車內容的欄位說明

| 欄位名稱        | 顯示格式 | 規則說明                                      |
| ----------- | ---- | ----------------------------------------- |
| 商品名稱        | 文字顯示 | 1. 顯示購物車中的商品名稱                            |
| 規格          | 文字顯示 | 1. 顯示購物車中的商品規格                            |
| 單價          | 文字顯示 | 1. 顯示購物車中的商品單價                            |
| 數量          | 文字輸入 | <p>1. 預設值為1<br> 2. 當游標離開數量欄位時重新計算總金額。</p> |
| 小計          | 文字顯示 | <p>1. 顯示單一品項的購買金額<br> 2. 計算公式：數量x單價</p>   |
| 刪除          | 按鈕   | 1. 將商品從購物車移除，並且重新計算品項數量與總金額。              |
| 訂單項目數量與訂單金額 | 文字顯示 | 1. 購物車共有x項品，總金額xxx元。                      |

* 購物車內容的功能項目按鈕

| 功能項目名稱 | 類別/動作 | 系統回應與詳細處理邏輯                                  |
| ------ | ----- | -------------------------------------------- |
| 進行結帳   | 按鈕/點擊 | 1. 導引到購買產品明細頁面。                              |
| 繼續購物   | 按鈕/點擊 | 1. 導引到產品介紹頁面。若是由糕餅類產品顯示購物車內容則回到糕餅類産品頁面；若...。 |

* (2)購物清單確認畫面畫面
* 購物清單確認畫面的欄位說明

| 欄位名稱        | 顯示格式 | 規則說明                |
| ----------- | ---- | ------------------- |
| 商品名稱        | 文字顯示 | 1. 顯示購物車中的商品名稱      |
| 規格          | 文字顯示 | 1. 顯示購物車中的商品規格      |
| 單價          | 文字顯示 | 1. 顯示購物車中的商品單價      |
| 數量          | 文字顯示 | 1. 顯示購物車中的商品數量      |
| 小計          | 文字顯示 | 1. 顯示單一品項的購買金額      |
| 訂單項目數量與訂單金額 | 文字顯示 | 1. 購物車共有x項品，總金額xxx元 |

* 購物清單確認畫面的功能項目按鈕

| 功能項目名稱 | 類別/動作 | 系統回應與詳細處理邏輯         |
| ------ | ----- | ------------------- |
| 確定     | 按鈕/點擊 | 1. 換頁至填寫收件人與發票資訊畫面。 |
| 回購物車   | 按鈕/點擊 | 1. 換頁至購物車畫面。        |

* (3)填寫收件人與發票資訊畫面
* 填寫收件人與發票資訊畫面的欄位說明

| 欄位名稱  | 顯示格式  | 規則說明                                               |
| ----- | ----- | -------------------------------------------------- |
| 收件人姓名 | 文字輸入  | <p>1. 必填<br> 2. 最大輸入長度為20個中英文字</p>                 |
| 收件人地址 | 文字輸入  | <p>1. 必填<br> 2. 最大輸入長度為100個中英文字</p>                |
| 收件人電話 | 文字輸入  | <p>1. 必填<br> 2. 最大輸入長度為9個數字</p>                    |
| 發票類別  | 下拉式選單 | <p>1. 必填<br> 2. 選單項目包含：二聯式與三聯式<br> 3. 預設選項為二聯式</p> |
| 發票抬頭  | 文字輸入  | <p>1. 非必填<br> 2. 最大輸入長度為100個中英文字</p>               |
| 統一編號  | 文字輸入  | <p>1. 非必填<br> 2. 最大輸入長度為8個數字</p>                   |

* 填寫收件人與發票資訊畫面的功能項目按鈕

| 功能項目名稱 | 類別/動作 | 系統回應與詳細處理邏輯                                 |
| ------ | ----- | ------------------------------------------- |
| 確定     | 按鈕/點擊 | 1. 換頁至付款資訊與採購完成畫面，並寄出成功下單的通知信至會員電子郵件信箱(缺內容) |
| 回前頁    | --    | 1. 換頁至購物清單確認畫面                              |

* (4)付款資訊與採購完成畫面
* 付款資訊與採購完成畫面的欄位說明

| 欄位名稱     | 顯示格式 | 規則說明                                                  |
| -------- | ---- | ----------------------------------------------------- |
| 採購訂單完成訊息 | 文字顯示 | <p>1. 內容如下：<br> 採購訂單完成.<br>請於七日內依據下列ATM帳款資訊方式完成付款</p> |
| 總行代號     | 文字顯示 | 1. 顯示總行代號                                             |
| 銀行帳號     | 文字顯示 | 1. 顯示銀行帳號                                             |
| 付款金額     | 文字顯示 | 1. 顯示付款金額                                             |

* 付款資訊與採購完成畫面的功能項目按鈕

| 功能項目名稱 | 類別/動作 | 系統回應與詳細處理邏輯 |
| ------ | ----- | ----------- |
| 回首頁    | 按鈕/點擊 | 1. 換頁至首頁。   |