update
This commit is contained in:
@@ -1,283 +0,0 @@
|
||||
# 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
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user