Build PC theo cấu hình mẫu
Widget trên trang chủ dựng sẵn dàn máy theo nhu cầu từ linh kiện còn hàng; món nào hết hàng được thay bằng món tương đương.
← Tất cả dự án
Full-stack · WooCommerce · Hiệu năng
Tân Doanh
Dựng lại storefront WooCommerce bán linh kiện và máy bộ thành block theme FSE riêng, tối ưu Core Web Vitals, cấu hình PC tích hợp và đồng bộ sản phẩm thời gian thực từ production.
Bản demo đang chạy tại td.phatdev.net
- Vai trò
- Thiết kế, phát triển theme, tối ưu hiệu năng
- Nền tảng
- WordPress FSE, WooCommerce, Redis
- Phiên bản
- Theme 1.9.56
- Cập nhật
- Tự host qua phatdev.net
91 / 97
PageSpeed mobile / desktop, đo ngày 12/07/2026
98 - 100
Lighthouse mobile trên các landing máy bộ
100
Accessibility và Best Practices
Điểm nổi bật
Trang sản phẩm thiết kế lại
Gallery theo biến thể, 4 trạng thái kho kèm đặt trước, thanh mua dính đáy trên điện thoại, module Tính trả góp.
Live search và bộ lọc AJAX
Gợi ý sản phẩm ngay khi gõ; lọc theo thương hiệu, giá, khuyến mãi mà không tải lại trang.
Tab Hiệu năng AI
So sánh sức mạnh AI và render (OctaneBench, V-Ray) của card với các mẫu cùng phân khúc từ dữ liệu benchmark thật.
Hoá đơn VAT tại checkout
Nhập mã số thuế để tự điền tên và địa chỉ doanh nghiệp, gửi hoá đơn điện tử qua email.
Ảnh chụp màn hình
Bấm vào ảnh để phóng to, dùng phím mũi tên để chuyển ảnh.
Mục lục
Bối cảnh
Store tandoanh.vn chạy theme cũ nặng, PSI thấp. Dự án dựng lại thành block theme FSE (theme tandoanh, bản hiện tại 1.9.54), ưu tiên tốc độ và trải nghiệm mua PC.
Phân tích các hạng mục
Block theme FSE
Header, footer, template đều là block chỉnh trong Site Editor; i18n VI/EN render tại server. Tương thích shortcode Flatsome để nội dung cũ không vỡ.
Hiệu năng (PSI-first)
Critical CSS tách đúng, subset font khớp metrics chống CLS, WebP + lazy, gỡ script thừa.
WooCommerce
Thiết kế lại toàn bộ trang chủ và trang sản phẩm: gallery theo biến thể, 4 trạng thái kho kèm đặt trước, nút mua dính đáy trên điện thoại, module Tính trả góp, checkout tuỳ biến.
Mirror real-time
Đồng bộ sản phẩm, giá, tồn kho từ production về staging tức thì (push-on-save + reconcile fingerprint).
Cập nhật tự host
Theme tự cập nhật qua máy chủ phatdev.net, không phụ thuộc kho bên ngoài.
Tính năng nổi bật
Build PC theo cấu hình mẫu
Widget trên trang chủ dựng sẵn dàn máy theo nhu cầu (văn phòng, streaming, gaming, AI creator, workstation) từ linh kiện đang còn hàng; món nào hết hàng thì tự thay món tương đương.
Landing máy bộ từ hàng thật
Các trang PC lắp sẵn lấy linh kiện đang có trong kho. Lighthouse mobile 98 đến 100 trên các landing này.
Live search
Gõ tới đâu gợi ý sản phẩm tới đó (tên, giá, ảnh), tổng hợp kết quả tức thì.
Bộ lọc AJAX
Lọc theo thương hiệu, khoảng giá, khuyến mãi; lưới sản phẩm cập nhật không tải lại trang.
Tab Hiệu năng AI (trang sản phẩm)
Biểu đồ so sánh sức mạnh AI và render (OctaneBench, V-Ray) với các card cùng dòng, dữ liệu benchmark thật.
Xuất hoá đơn VAT công ty
Ngay tại checkout: nhập mã số thuế để tra cứu tự động tên và địa chỉ công ty, gửi hoá đơn điện tử qua email.
Sáng / tối
Theo cài đặt thiết bị, nhớ lựa chọn của khách. Accessibility và Best Practices đạt 100.
Hiệu năng đo thực tế (PSI)
Google PageSpeed, đo 12/07/2026:
- Mobile 91, LCP 3.0s, CLS 0.001
- Desktop 97, LCP 0.7s, CLS 0.002
Số lab dao động do PSI đo từ máy chủ nước ngoài và giả lập mạng chậm.
So sánh với theme thương mại phổ biến
| Tính năng | Tân Doanh | Flatsome | WoodMart |
|---|---|---|---|
| Kiến trúc | FSE block theme (WP chuẩn mới) | UX Builder | Elementor / WPBakery |
| Cấu hình PC (PC Builder) tích hợp | |||
| Đồng bộ sản phẩm real-time từ production | |||
| Tab hiệu năng AI / game trong trang SP | |||
| Checkout xuất VAT công ty (tra MST) | |||
| Redis object cache + tinh chỉnh Nginx | ~ | ~ |
Không dùng page-builder nặng: tối ưu tay theo Core Web Vitals, thêm các tính năng thương mại riêng.
Giấy phép
GPL phiên bản 2 trở lênGPL-2.0-or-later
Phần mềm tự do: ai cũng được dùng, sửa và chia sẻ lại, miễn là bản chia sẻ vẫn giữ giấy phép này và kèm mã nguồn.
Phát triển cho Tân Doanh.
- Theme tandoanh 1.9.54
GPL-2.0-or-laterKhai báo trong mã: themes/tandoanh/style.css (License: GNU General Public License v2 or later) - Plugin tandoanh-code 6.8.14
GPL-2.0-or-laterKhai báo trong mã: plugins/tandoanh-code/tandoanh-code.php (License: GPL v2 or later)
Ảnh chụp màn hình trên trang này do mình chụp từ bản chạy thật của dự án.
Xem trang Giấy phép và ghi nguồn →
Thư viện và tài nguyên bên thứ ba (8)
Vuốt ngang để xem đủ các cột.
| Tên | Giấy phép | Phiên bản | Loại | Nguồn |
|---|---|---|---|---|
| Select2Trong plugin tandoanh-code. | MIT | 4.1.0-rc.0 | Thư viện | select2.org |
| Be Vietnam Pro | OFL-1.1 | - | Font (trong theme) | fonts.google.com/specimen/Be+Vietnam+Pro |
| Inter | OFL-1.1 | - | Font (trong theme) | rsms.me/inter |
| Inter Tight | OFL-1.1 | - | Font (trang landing) | fonts.google.com/specimen/Inter+Tight |
| JetBrains Mono | OFL-1.1 | - | Font (trong theme) | jetbrains.com/lp/mono |
| Font Awesome Free | CC-BY-4.0 AND OFL-1.1 AND MIT | 6.5.2 | Biểu tượng (trang quản trị) | fontawesome.com/license/free |
| @wordpress/scripts | GPL-2.0-or-later | 30.27.0 | Công cụ (công cụ dựng) | developer.wordpress.org/block-editor/refe... |
| WUPO Group Attributes for WooCommerceModule group-attributes của tandoanh-code được chép từ bản này (đã bỏ phần Freemius). | GPL-2.0-or-later | 2.3.6 | Mã gốc (đã chép về dùng) | wordpress.org/plugins/wupo-group-attribut... |
Ghi công: Font Awesome Free by @fontawesome, https://fontawesome.com. Biểu tượng: CC BY 4.0, font: SIL OFL 1.1, mã: MIT. Copyright Fonticons, Inc.
Dự án khác
PixGamma
AI · macOS · Phục hồi ảnh
CreditMate
iOS · Tài chính cá nhân · Riêng tư
MoneyFlow
iOS · Tài chính gia đình · Đồng bộ
AIUsage
macOS · Công cụ nhà phát triển · Riêng tư
SL Migrations
Plugin WordPress · PHP · Bảo mật
IGA (Infinity Gems)
Full-stack · WooCommerce · Thiết kế lại
Media Studio
AI · Full-stack · Tự động hoá nội dung
PC Builder
Plugin WordPress · Full-stack
phatdev.net
Full-stack · Next.js · CMS
ERP Tân Doanh
Full-stack · ERP · Kế toán
IGA Social
Sản phẩm · Full-stack · Nội dung AI