---
# System prepended metadata

title: 第八週小組任務 | 南1 | JS 直播班

---

# 第八週小組任務 | 南1 | JS 直播班
:::spoiler 目錄
[TOC]
:::

:::success
【[題目連結](https://hackmd.io/ItFOJhUQSeaU_-eEDdBzrQ?view)】
<!-- 【檢核】
- [x] 參與人數:7人
- [x] 參與名單
- [x] 任務內容
- [x] 討論截圖 -->
:::

## 參與人員
- [x] 阿榮#8277
- [x] PayRoom#8328
- [x] WA#9787
- [x] jia yu#8896
- [x] 梁窈菱
- [x] Serena
- [x] CPing
- [ ] hom
- [ ] mt126
- [ ] 貓咪#6294

## 討論問題
## 第一題 最終關卡討論

請討論 API 該如何與整合前端 [XD 設計稿](https://xd.adobe.com/view/a48b8617-4588-4817-9062-b62130dce916-f1d8/)

### 問題一：初始化，取得產品與購物車列表

* [取得產品列表(Get)：/api/livejs/v1/customer/{api_path}/products](https://hexschool.github.io/hexschoolliveswagger/#/%E7%94%A2%E5%93%81%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/get_api_livejs_v1_customer__api_path__products)
* [取得購物車列表(Get)：：/api/livejs/v1/customer/{api_path}/carts](https://hexschool.github.io/hexschoolliveswagger/#/%E8%B3%BC%E7%89%A9%E8%BB%8A%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/get_api_livejs_v1_customer__api_path__carts)

```
//取得產品列表(Get)：/api/livejs/v1/customer/{api_path}/products
{
  "status": true,
  "products": [
    {
      "category": "產品分類 (String)",
      "image": "產品圖片 (String)",
      "id": "產品ID  (String)",
      "title": "產品名稱  (String)",
      "origin_price": "產品原始價錢 (Number)",
      "price": "產品銷售價錢 (Number)"
    }
  ]
}
```
>新帳號預設購物車會有一筆資料

### 討論
可以把 url 也透過函式來產，丟入參數，讓他自動變更

### 問題二：新增購物車品項，並再次初始化購物車列表
* [加入購物車(POST)：/api/livejs/v1/customer/{api_path}/carts](https://hexschool.github.io/hexschoolliveswagger/#/%E8%B3%BC%E7%89%A9%E8%BB%8A%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/post_api_livejs_v1_customer__api_path__carts)

### 討論
可以用 [sweetalert2](https://sweetalert2.github.io/)，Mixin example，加入購物車提示


### 問題三：修改購物車狀態(刪除全部、刪除單筆)，並再次初始化購物車列表
* [清除購物車內全部產品(DELETE)：/api/livejs/v1/customer/{api_path}/carts](https://hexschool.github.io/hexschoolliveswagger/#/%E8%B3%BC%E7%89%A9%E8%BB%8A%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/delete_api_livejs_v1_customer__api_path__carts)
* [刪除購物車內特定產品(DELETE)：/api/livejs/v1/customer/{api_path}/carts/{id}](https://hexschool.github.io/hexschoolliveswagger/#/%E8%B3%BC%E7%89%A9%E8%BB%8A%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/delete_api_livejs_v1_customer__api_path__carts__id_)


### 問題四：送出購買訂單，並再次初始化購物車列表
* [送出購買訂單(POST)：/api/livejs/v1/customer/{api_path}/orders](https://hexschool.github.io/hexschoolliveswagger/#/%E8%A8%82%E5%96%AE%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/post_api_livejs_v1_customer__api_path__orders)


### 問題五：觀看後台訂單
* [取得訂單列表(GET)：/api/livejs/v1/admin/{api_path}/orders](https://hexschool.github.io/hexschoolliveswagger/#/%E8%A8%82%E5%96%AE%E7%9B%B8%E9%97%9C(%E7%AE%A1%E7%90%86%E8%80%85)/get_api_livejs_v1_admin__api_path__orders)
* [Codepen 範例](https://codepen.io/hexschool/pen/yLgaBWV?editors=1010)

|組員| 連結|
|:---|:---:|
|阿榮|[Github Pages](https://peg-l.github.io/booking-site/) / [Github Repo](https://github.com/Peg-L/booking-site)|
|Mt| |
|jiayu| |
|WA| [codepen](https://codepen.io/ldddl/pen/GRzBrmw?editors=0011) |
|CPing| |
|貓咪| |
|梁窈菱| |
|Serena| |
|hom| |
|Payroom|[CodePen](https://codepen.io/water38198/pen/WNPKebJ) |

### 其他
1. 怎麼一次取得 form 的所有欄位值
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>取得表單輸入值</title>
</head>
<body>

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" value="John Doe">

  <br>

  <label for="email">電子郵件：</label>
  <input type="email" id="email" name="email" value="john@example.com">

  <br>

  <label for="age">年齡：</label>
  <input type="number" id="age" name="age" value="25">

  <br>

  <button type="button" onclick="getFormValues()">取得表單值</button>
</form>

<script>
function getFormValues() {
  // 取得表單元素
  const form = document.getElementById("myForm");

  // 使用 FormData 對象取得表單中的所有輸入值
  const formData = new FormData(form);

  // 將 FormData 轉換為物件
  const formObject = {};
  formData.forEach((value, key) => {
    formObject[key] = value;
  });

  // 在控制台輸出結果
  console.log(formObject);
}
</script>

</body>
</html>

```


## 開會紀錄
![image](https://hackmd.io/_uploads/ry465fGr6.png)
![image](https://hackmd.io/_uploads/rk3TcfzB6.png)
