Case study
Nền tảng đặt tour đa ngôn ngữ
Đặt tour đa ngôn ngữ cho khách quốc tế — lọc, yêu cầu riêng, thanh toán.
- Vai trò
- Lập trình viên Frontend
- Thời gian
- 04.2025 — 06.2025
- Công nghệ
- WordPress (Headless CMS) · REST API · GSAP
Dự án bảo mật
Đây là dự án khách hàng đã được ẩn danh. Thương hiệu, trang live và hình ảnh thuộc thỏa thuận bảo mật (NDA) — liên hệ để mình trao đổi chi tiết về cách làm, quyết định và kết quả.
Liên hệ để trao đổi về dự ánDemo bộ lọc
Thử thanh lọc
- Highland loop3d · $420
- Coastal escape5d · $680
- Delta discovery2d · $310
- Mountain trek4d · $540
Demo ẩn danh — không brand khách hay inventory live.
Tổng quan
Nền tảng tour cá nhân hoá với lọc điểm đến/ngày/thời lượng/ngân sách, yêu cầu tour riêng, cổng thanh toán và hỗ trợ EN/ZH.
Phác thảo giao diện
Vấn đề
01Khách quốc tế cần tin vào ngôn ngữ, giá và chỗ trống. Brochure site không gánh nổi filter, custom request và payment.
Hướng tiếp cận
02- UI Next.js từ Figma + motion
- WordPress headless CPT/ACF → REST
- Filter tour + custom request
- Cổng thanh toán + form booking
- Performance và đa ngôn ngữ
Quyết định quan trọng
03- Đa ngôn ngữ là requirement sản phẩm
- Tái dụng bài học tour trước đó, đổi cổng thanh toán
- Tối ưu cho mạng mobile khi đi tour
Tác động
Lab / shipping
LCP
1.5s
Lab mobile
Lab mobile trên bản build giống production — URL khách vẫn riêng tư.
Ngôn ngữ
EN/ZH
Khách quốc tế
Bộ lọc tour
4
Kèm ngân sách
LCP
1.5s
Lab mobile
Checkout
1
Đã nối thanh toán
Trước / sau
Điểm lab mobile trên bản build giống production — URL khách vẫn riêng tư.
Trước
LCP 4.8s
Sau
LCP 1.4s
Kết quả
Khám phá tour có filter và custom request
Booking gắn cổng thanh toán
Trải nghiệm EN/ZH với nền tảng hiệu năng tốt hơn
Công nghệ dùng
- WordPress (Headless CMS)
- REST API
- GSAP
Kiến trúc
Cách hệ thống được nối. UI khách không đưa lên trang này — tên, logo và screenshot thuộc NDA.
- 01Copy EN/ZH
- 02Next.js
- 03WordPress REST
- 04Bộ lọc
- 05Checkout