---
# System prepended metadata

title: "\U0001F3C5 Day 32 - 購物車 API + 訂單 API"
tags: [JS 直播班 - 2025 秋季班]

---

# 🏅 Day 32 - 購物車 API + 訂單 API

問題一
---
請同學修改 Day 31 的內容，串接「加入購物車、取得購物車列表」的 API（如圖），完成任務需求
> 可以使用此 [CodePen 模板](https://codepen.io/hexschool/pen/eYKByqq?editors=1010)

![](https://i.imgur.com/P7n6C04.png)


![](https://i.imgur.com/pl5j3gE.png)



任務要求條列如下：
> 1. 請同學在商品列表新增「加入購物車」按鈕，點擊按鈕可以新增一筆購物車項目（預設數量為 1）
> 2. 新增的購物車項目可以及時的渲染於上方列表，如下圖：

![](https://i.imgur.com/HT8eHzR.png)


問題二
---
延續上一題的內容，串接「送出購買訂單」API（如圖），練習實作「送出訂單」的功能
> 使用此 [CodePen 模板](https://codepen.io/hexschool/pen/gOKLvKB) 

![](https://i.imgur.com/2jS2AOM.png)

送出的訂單可以到 [API 文件](https://hexschool.github.io/hexschoolliveswagger/) 點選【Try it out】 檢查是否有成功送出（需點擊右方的鑰匙 icon，輸入你的 UID 解鎖才能使用）。

![](https://i.imgur.com/D3Wg5Ty.png)


> 進階：可以試著使用 Validate.js 練習做表單驗證，驗證成功才送出訂單，如下圖：
> 
> ![](https://i.imgur.com/Z9iKB7P.png)



<!-- 解答：  

請記得填入自己的 API 名稱

問題一：
https://codepen.io/hexschool/pen/eYKBVJY?editors=1010

問題二：
https://codepen.io/hexschool/pen/dyKOdQm?editors=1010
-->