The cart API manages the shopping cart tied to your account. All cart endpoints require the `Authorization` header.
Two groups of endpoints:
Cart overview:
```
GET /api/cart/ View cart (total price, item list)
```
Cart items:
```
POST /api/cart/items/ Add a product
PATCH /api/cart/items/{id}/ Update quantity of one item
DELETE /api/cart/items/{id}/ Remove one item
DELETE /api/cart/items/ Clear all items
```
GET /api/cart/ response shape:
```javascript
{
items: [
{
id: 42, // cart item id (not product id)
product: { id: 7, name: "Oak Chair", price: "149.99", ... },
quantity: 1,
products_price: "149.99"
}
],
total_price: "149.99",
total_quantity: 1
}
```
Each item has its own `id` — you need this to update or delete it. To add a product you need its `slug`, not its `id`.
Complete cart workflow with fetch:
```javascript
const BASE_URL = 'https://apilearn.tukas.dev';
async function getToken() {
const { token } = await fetch(`${BASE_URL}/api/auth/token/`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: 'YOUR_USERNAME', password: 'YOUR_PASSWORD' }),
}).then(r => r.json());
return token;
}
async function main() {
const token = await getToken();
const headers = {
'Authorization': `Token ${token}`,
'Content-Type': 'application/json',
};
// View the cart
const cart = await fetch(`${BASE_URL}/api/cart/`, { headers }).then(r => r.json());
console.log('Items in cart:', cart.items.length);
// Get a product slug
const product = await fetch(`${BASE_URL}/api/products/1/`).then(r => r.json());
const slug = product.slug;
// Add to cart
const item = await fetch(`${BASE_URL}/api/cart/items/`, {
method: 'POST',
headers,
body: JSON.stringify({ product_slug: slug, quantity: 2 }),
}).then(r => r.json());
console.log('Cart item id:', item.id);
// Update quantity
const updated = await fetch(`${BASE_URL}/api/cart/items/${item.id}/`, {
method: 'PATCH',
headers,
body: JSON.stringify({ quantity: 5 }),
}).then(r => r.json());
console.log('New quantity:', updated.quantity);
// Delete one item
await fetch(`${BASE_URL}/api/cart/items/${item.id}/`, {
method: 'DELETE', headers,
});
// Clear all items
await fetch(`${BASE_URL}/api/cart/items/`, { method: 'DELETE', headers });
const empty = await fetch(`${BASE_URL}/api/cart/`, { headers }).then(r => r.json());
console.log('Items after clear:', empty.items.length); // 0
}
main();
```
**Endpoints (all require Authorization)**
```
GET /api/cart/ View cart
POST /api/cart/items/ Add item
body: { product_slug: string, quantity: number }
returns: 201 + cart item object
PATCH /api/cart/items/{id}/ Update quantity
body: { quantity: number }
returns: 200 + updated item
DELETE /api/cart/items/{id}/ Remove one item → 204
DELETE /api/cart/items/ Clear all items → 204
```
**Cart response shape**
```javascript
{ items: [...], total_price: "149.99", total_quantity: 1 }
```
**Cart item object**
```javascript
{ id: 42, product: {...}, quantity: 2, products_price: "299.98" }
```
**Key distinction**
```
product.slug — used when adding to cart (POST body)
item.id — used when updating/deleting (URL param)
```
**DELETE returns 204 — no body**
```javascript
// Don't call .json() on a 204 response
await fetch(url, { method: 'DELETE', headers });
// Just check response.ok if needed
```