|
|
|
|
@@ -0,0 +1,283 @@
|
|
|
|
|
# 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
|
|
|
|
|
```
|
