# Hướng dẫn tự động: Quy trình từ Figma → Template Liquid
> File này mô tả toàn bộ các bước tôi thực hiện tự động để chuyển đổi thiết kế Figma thành template Liquid.
---
## Tổng quan quy trình
```
Figma Design → Export HTML/TailwindCSS → Ghép vào Template Liquid → Gắn dữ liệu PHP
```
---
## Bước 1: Export Figma sang HTML
**Trigger:** File `instructions/export_html.md` chứa các link Figma cần export.
**Hành động tự động:**
1. Truy cập từng link Figma trong `export_html.md`
2. Implement design thành HTML + TailwindCSS (dùng `@tailwindcss/browser@4` CDN)
3. Lưu file HTML vào thư mục `export_to_html/`
4. Lưu ảnh vào thư mục `export_to_html/image/`, đặt tên file ảnh tương ứng với từng phần
5. kiểm tra lại file vừa xuất, so sánh với thiết kế để cho ra bản hoàn hảo
6. chạy lần nữa kiểm tra code từ giao diện với thiết kế
**Các trang đã export:**
| File output | Figma node |
|---|---|
| `export_to_html/index.html` | Homepage |
| `export_to_html/category.html` | Trang danh mục sản phẩm |
| `export_to_html/product-detail.html` | Trang chi tiết sản phẩm |
| `export_to_html/home-article.html` | Trang danh sách bài viết |
| `export_to_html/cart.html` | Trang giỏ hàng |
| `export_to_html/article-detail.html` | Trang chi tiết bài viết |
---
## Bước 2: Thiết lập cấu trúc Theme
**File gốc:** `template/theme.html`
**Hành động tự động:**
1. Lấy `` và các thẻ CSS từ `export_to_html/index.html`
2. Cấu trúc `theme.html` theo dạng:
```html
{% include "other/header" %}
{{ page_content }}
{% include "other/footer" %}
{% include javascript/index %}
```
3. Tách header ra `template/other/header.html`
4. Tách footer ra `template/other/footer.html`
5. Tách JS global ra `template/javascript/global.html`
6. Include `javascript/global` trong `template/javascript/index.html`
**Quy tắc xử lý đường dẫn:**
- `src="image/xxx.png"` → `{{ 'xxx.png' | asset_url }}`
- `href="/xxx"` → giữ nguyên hoặc dùng biến Liquid tương ứng
- Ảnh lỗi: thay bằng `{{ 'no-image.png' | asset_url }}`
---
## Bước 3: Ghép Header + Dữ liệu Menu
**File data:** `data/menu.php`
**File template:** `template/other/header.html`
**Hành động tự động:**
1. Đọc cấu trúc menu từ `data/menu.php`
2. Thay nội dung danh mục tĩnh bằng vòng lặp Liquid:
```liquid
{% for item in menu %}
{{ item.name }}
{% endfor %}
```
3. Category icon chỉ hiển thị khi `is_featured = 1`:
```liquid
{% if item.is_featured == 1 %}
{% endif %}
```
4. JS liên quan đến header (mobile menu, dropdown...) để trong `template/javascript/global.html`
---
## Bước 4: Ghép Homepage
**Trigger:** File `instructions/ghep_homepage.md`
**File nguồn:** `export_to_html/index.html`
**File đích:** `template/home/home.html`
**JS trang chủ:** `template/javascript/homepage.html`
**Checklist tự động:**
- [x] Copy nội dung `` từ `index.html` vào `home.html`
- [x] **Banner:** Lấy dữ liệu từ `data/banner/banner.php`, implement Swiper slider:
```liquid
{% for banner in banners %}
{% endfor %}
```
- [x] **Category icon:** Dữ liệu từ `data/menu.php`, filter `is_featured = 1`
- [x] **Sản phẩm đã xem:** Biến `product_history` từ `data/home.php`
- [x] **Bộ sưu tập:** Biến `product_collection` từ `data/home.php`
- Max 8 sản phẩm
- Ẩn section nếu `product_collection` rỗng
- [x] **Sản phẩm theo danh mục:** Biến `product_category` từ `data/home.php`
- Loop qua từng danh mục
- Max 5 sản phẩm/danh mục
- Lấy tên & URL từ `categories[0]` của sản phẩm đầu tiên
- Ẩn nếu rỗng
---
## Bước 5: Ghép Trang Danh Mục Sản Phẩm
**Trigger:** File `instructions/ghep_category.md`
**File nguồn:** `export_to_html/category.html`
**File đích:** `template/product/category.html`
**File data:** `data/product/category.php`
**Hành động tự động:**
1. Copy HTML từ `category.html` vào `template/product/category.html`
2. Thay danh sách sản phẩm tĩnh bằng Liquid loop:
```liquid
{% for product in products %}