# 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 `<head>` và các thẻ CSS từ `export_to_html/index.html`
2. Cấu trúc `theme.html` theo dạng:
   ```html
   <!DOCTYPE html>
   <html lang="vi">
   <head>
       <!-- fonts, tailwindcss CDN, daisyui CDN -->
       <link rel="stylesheet" href="{{ 'miq-homepage.css' | asset_url }}" />
   </head>
   <body>
       {% include "other/header" %}
       <main id="layout-content">
           {{ page_content }}
       </main>
       {% include "other/footer" %}
       {% include javascript/index %}
   </body>
   </html>
   ```
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 %}
     <a href="{{ item.url }}">{{ item.name }}</a>
   {% endfor %}
   ```
3. Category icon chỉ hiển thị khi `is_featured = 1`:
   ```liquid
   {% if item.is_featured == 1 %}
     <img src="{{ item.icon | asset_url }}" onerror="this.src='{{ 'no-image.png' | asset_url }}'" />
   {% 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 `<main>` 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 %}
    <div class="swiper-slide">
      <img src="{{ banner.image | asset_url }}" alt="{{ banner.title }}" />
    </div>
  {% 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 %}
     <div class="product-card">
       <img src="{{ product.image | asset_url }}" />
       <a href="{{ product.url }}">{{ product.name }}</a>
       <span>{{ product.price | money }}</span>
     </div>
   {% endfor %}
   ```
3. Gắn breadcrumb, tiêu đề danh mục, phân trang

---

## Bước 6: Ghép Trang Chi Tiết Sản Phẩm

**Trigger:** File `instructions/ghep_product_detail.md`
**File nguồn:** `export_to_html/product-detail.html`
**File đích:** `template/product/detail.html`
**File data:** `data/product/detail.php`
**JS:** `template/javascript/product-detail.html`

**Hành động tự động:**
1. Copy HTML vào `template/product/detail.html`
2. **Swiper Thumbs Gallery:** Implement cho ảnh sản phẩm + Fancybox khi click
3. **Tab thông số/mô tả:** Chuyển tab hiển thị nội dung
4. **Nút xem thêm/thu gọn** cho mô tả sản phẩm
5. **Thêm vào giỏ hàng:** Thông báo mua hàng thành công
6. **Nút mua hàng:** Chuyển hướng tới `/cart`
7. Gắn biến Liquid từ `data/product/detail.php`

---

## Bước 7: Ghép Trang Giỏ Hàng

**Trigger:** File `instructions/export_cart.md`
**File nguồn:** `export_to_html/cart.html`
**File đích:** `template/cart/home.html`
**File data:** `data/cart/home.php`
**JS:** `template/javascript/cart.html`

**Hành động tự động:**
1. Copy HTML vào `template/cart/home.html`
2. **Tăng/giảm số lượng:** JS cập nhật số lượng
3. **Tính giá:** Tự động cập nhật tổng tiền khi thay đổi số lượng
4. **Xóa sản phẩm:** Xóa khỏi danh sách giỏ hàng
5. Gắn biến Liquid từ `data/cart/home.php`

---

## Bước 8: Ghép Trang Bài Viết

**Trigger:** File `instructions/exrport_article.md`
**File data:** `data/article/home.php`, `data/article/detail.php`

### 8a. Trang danh sách bài viết
- **Nguồn:** `export_to_html/home-article.html`
- **Đích:** `template/article/home.html`

### 8b. Trang chi tiết bài viết
- **Nguồn:** `export_to_html/article-detail.html`
- **Đích:** `template/article/detail.html`

---

## Cấu trúc thư mục dự án

```
agent_test/
├── export_to_html/          # HTML export từ Figma (nguồn)
│   ├── index.html
│   ├── category.html
│   ├── product-detail.html
│   ├── home-article.html
│   ├── cart.html
│   ├── article-detail.html
│   └── image/
├── template/                # Template Liquid (đích)
│   ├── theme.html           # Layout chính
│   ├── home/home.html
│   ├── product/
│   │   ├── category.html
│   │   └── detail.html
│   ├── article/
│   │   ├── home.html
│   │   └── detail.html
│   ├── cart/home.html
│   ├── other/
│   │   ├── header.html
│   │   └── footer.html
│   └── javascript/
│       ├── index.html       # Include tất cả JS
│       ├── global.html      # JS dùng chung (header...)
│       ├── homepage.html    # JS trang chủ (Swiper banner...)
│       ├── product-detail.html
│       └── cart.html
├── data/                    # Dữ liệu mẫu PHP
│   ├── menu.php
│   ├── banner/banner.php
│   ├── home/home.php
│   ├── product/
│   │   ├── category.php
│   │   └── detail.php
│   ├── article/
│   │   ├── home.php
│   │   └── detail.php
│   └── cart/home.php
└── instructions/            # File hướng dẫn từng bước
    ├── export_html.md
    ├── ghep_homepage.md
    ├── ghep_category.md
    ├── ghep_product_detail.md
    ├── export_cart.md
    ├── exrport_article.md
    └── huong_dan_tu_dong.md  ← file này
```

---

## Quy tắc chung khi ghép Liquid

| Tình huống | Cú pháp Liquid |
|---|---|
| Hiển thị biến | `{{ variable }}` |
| Định dạng tiền | `{{ price \| formart_price }}` |
| Đường dẫn ảnh asset | `{{ 'file.png' \| asset_url }}` |
| Ảnh lỗi fallback | `onerror="this.src='{{ 'no-image.png' \| asset_url }}'"` |
| Vòng lặp | `{% for item in list %}...{% endfor %}` |
| Điều kiện | `{% if condition %}...{% endif %}` |
| Ẩn nếu rỗng | `{% if list != empty %}...{% endif %}` |
| Giới hạn số lượng | `{% for item in list limit: 8 %}` |
| Include file | `{% include "other/header" %}` |

---

## Thứ tự thực hiện

```
1. export_html.md      → Export Figma → export_to_html/
2. theme.html          → Thiết lập layout chính + header/footer
3. ghep_homepage.md    → Ghép trang chủ + dữ liệu
4. ghep_category.md    → Ghép trang danh mục
5. ghep_product_detail → Ghép trang chi tiết sản phẩm
6. export_cart.md      → Ghép trang giỏ hàng
7. exrport_article.md  → Ghép trang bài viết
```
