tieptk/agent_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
tieptk
2026-03-10 15:17:19 +07:00
parent 1f599a859b
commit 7bf3a80574
2 changed files with 265 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
README.md
View File

@@ -1,79 +1,283 @@
<h1>Hướng dẫn</h1> # Hướng dẫn tự động: Quy trình từ Figma → Template Liquid
<p>Link thiết kế: <a href="https://www.figma.com/file/5Km584w3tlnwxOltV5KAjh/281123_HURA8?node-id=328%3A1204&mode=dev" target="_blank"> <strong>Giao diện Admin</strong> </a></p> > 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.
<p>Repo: <a href="https://repo.hurasoft.com/tieptk/admin_hura_8" target="_blank">https://repo.hurasoft.com/tieptk/admin_hura_8</a></p> ---
<p>Theo dõi tiến độ: <a href="https://docs.google.com/spreadsheets/d/1Po3ANsG00pm_Y3dnrwuV81cidTCCqepYmR3yPDlIq6c/edit#gid=0" target="_blank">https://docs.google.com/spreadsheets/d/1Po3ANsG00pm_Y3dnrwuV81cidTCCqepYmR3yPDlIq6c/edit#gid=0</a></p> ## Tổng quan quy trình
<h2>Cài đặt hệ thống</h2> ```
Figma Design → Export HTML/TailwindCSS → Ghép vào Template Liquid → Gắn dữ liệu PHP
<p>Test và làm việc chính tại web: <a href="http://local.hura8_admin/"> http://local.hura8_admin/</a> </p> ```
<ul> ---
<li>Tải phần mềm XAMPP tại <a href="https://www.apachefriends.org/download.html" target="_blank">https://www.apachefriends.org/download.html</a> để chạy PHP</li>
<li>Chỉnh file hosts trong máy tính C:\Windows\System32\drivers\etc\hosts:
<pre><code>
127.0.0.1 local.hura8_admin
</code></pre>
</li>
<li>
Cài đặt ../xampp/apache/conf/extra/httpd-vhosts.conf của apache trong XAMPP
<pre><code>
&lt;VirtualHost *:80&gt;
DocumentRoot "/thuc-muc-check-out/admin_hura_8"
ServerName local.hura8_admin
&lt;Directory "/thuc-muc-check-out/admin_hura_8/"&gt;
Require all granted
&lt;/Directory&gt;
&lt;/VirtualHost&gt;
</code></pre>
</li>
<li>
Cài đặt ../xampp/apache/conf/httpd.conf của apache trong XAMPP
<pre><code>
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
# AllowOverride FileInfo AuthConfig Limit
AllowOverride All
</code></pre>
</li>
</ul>
## Bước 1: Export Figma sang HTML
**Trigger:** File `instructions/export_html.md` chứa các link Figma cần export.
<h2>Cấu trúc thư mục</h2> **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ế
<ul> **Các trang đã export:**
<li>/template: các file template html chia theo module/view</li> | File output | Figma node |
<li>/data: cung cấp dữ liệu cho template và hiển thị dữ liệu trên template qua code Liquid <a href="https://shopify.github.io/liquid/" target="_blank">https://shopify.github.io/liquid/</a></li> |---|---|
<li>/assets: lưu các file ảnh/css/js dùng cho giao diện</li> | `export_to_html/index.html` | Homepage |
<li>/package: thư viện code PHP hỗ trợ</li> | `export_to_html/category.html` | Trang danh mục sản phẩm |
<li>/inc: các code PHP hỗ trợ</li> | `export_to_html/product-detail.html` | Trang chi tiết sản phẩm |
<li>index.php: file gốc để truy cập nội dung</li> | `export_to_html/home-article.html` | Trang danh sách bài viết |
<li>ajax.php: file gốc để gọi ajax</li> | `export_to_html/cart.html` | Trang giỏ hàng |
</ul> | `export_to_html/article-detail.html` | Trang chi tiết bài viết |
<h2>Cài đặt Composer (dùng tải package của PHP)</h2> ---
<p>Xem hướng dẫn: <a href="https://getcomposer.org/doc/00-intro.md#installation-windows" target="_blank">https://getcomposer.org/doc/00-intro.md#installation-windows</a> </p> ## Bước 2: Thiết lập cấu trúc Theme
<p>Sau khi cài đặt xong. Mở cmd của Windows và thao tác lệnh sau để cài các thư viện code PHP cần cho dự án này.</p> **File gốc:** `template/theme.html`
<pre><code> **Hành động tự động:**
> cd /thuc-muc-check-out/admin_hura_8/package 1. Lấy `<head>` và các thẻ CSS từ `export_to_html/index.html`
> composer i 2. Cấu trúc `theme.html` theo dạng:
</code></pre> ```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 }}`
---
<h2> Sử dụng <u>Tailwind</u> để style giao diện.</h2> ## Bước 3: Ghép Header + Dữ liệu Menu
<ul> **File data:** `data/menu.php`
<li>[Dùng chính] <a href="https://daisyui.com/components/" target="_blank">https://daisyui.com/components/</a></li> **File template:** `template/other/header.html`
<li><a href="https://tailwindui.com/" target="_blank"> https://tailwindui.com/ </a></li>
<li><a href="https://tailblocks.cc/" target="_blank"> https://tailblocks.cc/ </a></li> **Hành động tự động:**
<li><a href="https://www.hyperui.dev/" target="_blank"> https://www.hyperui.dev/ </a></li> 1. Đọc cấu trúc menu từ `data/menu.php`
<li><a href="https://flowbite.com/docs/plugins/charts/" target="_blank"> Biểu đồ </a></li> 2. Thay nội dung danh mục tĩnh bằng vòng lặp Liquid:
</ul> ```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
```

283
instructions/huong_dan_tu_dong.md
View File

@@ -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
```