50 lines
2.1 KiB
Markdown
50 lines
2.1 KiB
Markdown
# eBay Listing — Google Sheet Loader
|
|
|
|
Web app tĩnh (HTML/CSS/JS thuần, không cần build) để:
|
|
|
|
1. Nhập link Google Sheet và bấm **Load**.
|
|
2. Đọc tab chứa danh sách sản phẩm (các cột: `Model`, `Condition`, `Title`, `Giá AUD`, `Giá USD`, `Package Contain (Racks)`).
|
|
3. Hiển thị danh sách có **scroll** và **search**.
|
|
4. Mỗi dòng có 2 nút **AU** / **US** — bấm để gọi API sang hệ thống của bạn.
|
|
5. Tất cả thao tác load và gọi API đều có hiệu ứng **disable + loading (spinner)**.
|
|
|
|
## Cấu trúc
|
|
|
|
| File | Vai trò |
|
|
|--------------|---------------------------------------------------------------|
|
|
| `index.html` | Bố cục giao diện |
|
|
| `styles.css` | Style, spinner, trạng thái disable/loading |
|
|
| `config.js` | **Cấu hình của bạn**: API_BASE, endpoint AU/US, header, map cột |
|
|
| `app.js` | Logic: parse link → tải CSV → parse → render → search → call API |
|
|
|
|
## Cách chạy
|
|
|
|
Vì app gọi `fetch`, nên chạy qua HTTP (không mở trực tiếp `file://`):
|
|
|
|
```bash
|
|
cd /home/andrew/listing_ebay
|
|
python3 -m http.server 8000
|
|
```
|
|
|
|
Mở http://localhost:8000
|
|
|
|
## Chuẩn bị Google Sheet
|
|
|
|
Sheet phải được **share công khai** (Anyone with the link → Viewer) để đọc được qua
|
|
endpoint CSV `gviz`. Dán link đầy đủ (có `/spreadsheets/d/...`) hoặc Spreadsheet ID.
|
|
|
|
- Nếu danh sách nằm ở tab khác tab đầu tiên: nhập **Tên tab** vào ô nhỏ, hoặc dán
|
|
link có sẵn `#gid=...`.
|
|
- App tự dò dòng tiêu đề trong 15 dòng đầu (sheet có thể có thông tin phía trên).
|
|
|
|
## Tuỳ chỉnh
|
|
|
|
Mở `config.js`:
|
|
|
|
- `API_BASE` + `ENDPOINTS.AU/US`: trỏ tới backend của bạn. Request là
|
|
`POST` với body JSON (xem `buildPayload` trong `app.js`).
|
|
- `HEADERS`: thêm token nếu cần.
|
|
- `COLUMN_MAP`: nếu tên cột trong sheet khác, thêm alias tại đây.
|
|
|
|
> Lưu ý: nếu backend khác domain, hãy bật **CORS** ở phía server đó.
|