tieptk/agent_test

Fork 0

Files

tieptk 7bf3a80574 update

2026-03-10 15:17:19 +07:00

9.6 KiB

Raw Permalink Blame History

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:

Truy cập từng link Figma trong export_html.md
Implement design thành HTML + TailwindCSS (dùng @tailwindcss/browser@4 CDN)
Lưu file HTML vào thư mục export_to_html/
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
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
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:

Lấy <head> và các thẻ CSS từ export_to_html/index.html

Cấu trúc theme.html theo dạng:

<!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>

Tách header ra template/other/header.html
Tách footer ra template/other/footer.html
Tách JS global ra template/javascript/global.html
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:

Đọc cấu trúc menu từ data/menu.php

Thay nội dung danh mục tĩnh bằng vòng lặp Liquid:

{% for item in menu %}
  <a href="{{ item.url }}">{{ item.name }}</a>
{% endfor %}

Category icon chỉ hiển thị khi is_featured = 1:

{% if item.is_featured == 1 %}
  <img src="{{ item.icon | asset_url }}" onerror="this.src='{{ 'no-image.png' | asset_url }}'" />
{% endif %}

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:

Copy nội dung <main> từ index.html vào home.html

Banner: Lấy dữ liệu từ data/banner/banner.php, implement Swiper slider:

{% for banner in banners %}
  <div class="swiper-slide">
    <img src="{{ banner.image | asset_url }}" alt="{{ banner.title }}" />
  </div>
{% endfor %}

Category icon: Dữ liệu từ data/menu.php, filter is_featured = 1
Sản phẩm đã xem: Biến product_history từ data/home.php
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
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:

Copy HTML từ category.html vào template/product/category.html

Thay danh sách sản phẩm tĩnh bằng Liquid loop:

{% 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 %}

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:

Copy HTML vào template/product/detail.html
Swiper Thumbs Gallery: Implement cho ảnh sản phẩm + Fancybox khi click
Tab thông số/mô tả: Chuyển tab hiển thị nội dung
Nút xem thêm/thu gọn cho mô tả sản phẩm
Thêm vào giỏ hàng: Thông báo mua hàng thành công
Nút mua hàng: Chuyển hướng tới /cart
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:

Copy HTML vào template/cart/home.html
Tăng/giảm số lượng: JS cập nhật số lượng
Tính giá: Tự động cập nhật tổng tiền khi thay đổi số lượng
Xóa sản phẩm: Xóa khỏi danh sách giỏ hàng
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

9.6 KiB Raw Permalink Blame History

Hướng dẫn tự động: Quy trình từ Figma → Template Liquid

Tổng quan quy trình

Bước 1: Export Figma sang HTML

Bước 2: Thiết lập cấu trúc Theme

Bước 3: Ghép Header + Dữ liệu Menu

Bước 4: Ghép Homepage

Bước 5: Ghép Trang Danh Mục Sản Phẩm

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

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

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

8a. Trang danh sách bài viết

8b. Trang chi tiết bài viết

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

Quy tắc chung khi ghép Liquid

Thứ tự thực hiện

9.6 KiB

Raw Permalink Blame History