Hướng dẫn xây dựng trang Solution tĩnh và trang chi tiết dịch vụ cho website doanh nghiệp
Back To Blogs
Nguyễn Thị Thanh Tuyền - Chuyên viên Marketing
Sau khi website doanh nghiệp đã có Trang chủ, Blog và Liên hệ, một khu vực quan trọng tiếp theo là Solution – Giải pháp/Dịch vụ. Ở phiên bản ban đầu, website Ezyvora có thể mới chỉ hiển thị các dịch vụ dưới dạng card tĩnh. Khách hàng nhìn thấy tên và mô tả ngắn nhưng chưa thể đi sâu để biết dịch vụ giải quyết vấn đề gì, bao gồm những gì và chi phí ra sao.
Trong bài này, chúng ta sẽ hoàn thiện luồng:
- Danh sách Solution
- →
- Chọn dịch vụ
- →
- Xem chi tiết
- →
- Xem gói dịch vụ và chi phí
- →
- Đăng ký tư vấn
Ở giai đoạn này, nội dung vẫn được xây dựng dạng tĩnh trong mã nguồn. Việc đưa Solution thành dữ liệu quản lý trên EzyPlatform có thể thực hiện ở bước sau.
Bước 1: Kiểm tra trang Solution hiện tại
Trước tiên, mở dự án Ezyvora trong VS Code và yêu cầu Claude Code hoặc Codex kiểm tra cấu trúc Solution đang có.
Prompt mẫu
"Hãy kiểm tra toàn bộ phần Solution/Dịch vụ của website Ezyvora hiện tại.
Xác định:
- File chứa trang danh sách Solution.
- Các card dịch vụ hiện có.
- Dữ liệu của từng dịch vụ đang được lưu ở đâu.
- Khi click vào card hoặc nút "Xem chi tiết" hiện đang xử lý như thế nào.
- Các component và CSS có thể tái sử dụng.
Tôi muốn mỗi Solution có một trang chi tiết riêng.
Chưa chỉnh sửa code. Trước tiên hãy đề xuất cách triển khai phù hợp với cấu trúc dự án hiện tại."
Mục tiêu là tận dụng giao diện và code đã có thay vì xây lại toàn bộ trang Solution.
Bước 2: Xác định các dịch vụ cần hiển thị
Tiếp theo, xác định những Solution thực tế mà doanh nghiệp cung cấp. Ví dụ với Ezyvora, chúng ta có thể sử dụng ba dịch vụ:
| Solution | Mô tả |
|---|---|
| Xây dựng website doanh nghiệp | Thiết kế và triển khai website giới thiệu doanh nghiệp. |
| Số hóa quy trình | Chuyển các quy trình thủ công thành quy trình quản lý trên hệ thống. |
| Marketing Automation | Tự động hóa một số hoạt động tiếp cận và chăm sóc khách hàng. |
Mỗi card trên trang Solution chỉ cần cung cấp thông tin ngắn gọn:
- Tên dịch vụ
- →
- Mô tả
- →
- Xem chi tiết
Không cần đưa toàn bộ bảng giá và nội dung dài lên trang danh sách.
Bước 3: Cho phép click vào từng Solution
Bây giờ, hãy yêu cầu AI biến các card Solution hiện tại thành điểm điều hướng tới trang chi tiết.
Prompt mẫu
"Hãy chỉnh sửa trang Solution hiện tại.
Với mỗi dịch vụ, bổ sung nút "Xem chi tiết".
Khi người dùng click vào nút hoặc card, chuyển đến trang chi tiết tương ứng của dịch vụ. Ví dụ:
- Xây dựng website doanh nghiệp →
/solutions/business-website - Số hóa quy trình →
/solutions/digital-process - Marketing Automation →
/solutions/marketing-automation
Yêu cầu:
- Giữ nguyên phong cách giao diện hiện tại.
- Ưu tiên tái sử dụng card và CSS đang có.
- Có trạng thái hover/focus rõ ràng.
- Responsive trên desktop, tablet và mobile.
- Không thay đổi Header và Footer.
Sau khi hoàn thành hãy dừng lại để tôi Preview trang Solution."
Sau bước này, AI sẽ trả kết quả như bên dưới đây:
Bước 4: Xây dựng trang chi tiết cho từng dịch vụ
Trang chi tiết không nên chỉ có tên dịch vụ và một đoạn giới thiệu. Đây là nơi giúp khách hàng hiểu dịch vụ có thực sự phù hợp với nhu cầu của họ hay không. Không nhất thiết mỗi Solution phải có giao diện khác nhau. Nên xây dựng một cấu trúc chung để website đồng nhất và dễ bảo trì.
Prompt mẫu
"Hãy xây dựng trang chi tiết cho Solution "Xây dựng website doanh nghiệp".
Giữ nguyên Header, Footer, màu sắc và typography hiện tại của Ezyvora.
Trang gồm:
- Hero với tên dịch vụ và mô tả ngắn.
- Vấn đề dịch vụ giải quyết.
- Các hạng mục có trong dịch vụ.
- Lợi ích dành cho doanh nghiệp.
- Các gói dịch vụ và chi phí.
- CTA "Đăng ký tư vấn".
Ưu tiên tái sử dụng component và CSS hiện có.
Thiết kế responsive trên desktop, tablet và mobile.
Chưa xây dựng chức năng thanh toán."
Ở giai đoạn này, chi phí chỉ mang tính hiển thị, chưa cần xây dựng giỏ hàng hoặc thanh toán như website thương mại điện tử. Khi trang đầu tiên đã ổn, có thể yêu cầu AI sử dụng cùng cấu trúc cho những Solution còn lại.
Bước 5: Kết nối gói dịch vụ với form đăng ký tư vấn
Khi khách đã đọc thông tin và chọn được gói phù hợp, website nên giúp họ chuyển ngay sang bước liên hệ.
Ví dụ, khách đang xem:
- Website doanh nghiệp
- →
- Business
- →
- 18.900.000đ
Và bấm Đăng ký tư vấn, website có thể đưa họ tới form liên hệ và tự động xác định dịch vụ/gói họ vừa quan tâm.
Prompt mẫu
"Hãy kết nối các nút "Đăng ký tư vấn" trên trang chi tiết Solution với form liên hệ hiện tại.
Khi khách click từ một gói dịch vụ, form cần nhận biết:
- Solution khách đang xem.
- Gói dịch vụ khách đã chọn.
Nếu cấu trúc website hiện tại hỗ trợ query parameter, hãy ưu tiên sử dụng cách đó. Ví dụ:
<code>/contact?solution=business-website&package=business</code>
Không tạo form liên hệ mới nếu website đã có form dùng chung.
Không thay đổi API gửi form hiện tại."
Như vậy chúng ta tái sử dụng chức năng liên hệ đã xây dựng trước đó thay vì tạo thêm một quy trình riêng.
Bước 6: Preview toàn bộ hành trình
Sau khi hoàn thành, hãy kiểm tra website như một khách hàng thật.
- Từ trang Solution, chọn Xây dựng website doanh nghiệp.
- Kiểm tra trang chi tiết có hiển thị đầy đủ:
- Mô tả
- →
- Lợi ích
- →
- Nội dung dịch vụ
- →
- Các gói
- →
- Chi phí
Sau đó chọn một gói và nhấn Đăng ký tư vấn. Website cần đưa khách đến đúng form liên hệ và, nếu đã triển khai bước trước, nhận biết được Solution và gói khách đang quan tâm.
Kiểm tra lại trên desktop và mobile để bảo đảm bảng giá không bị tràn màn hình và các CTA vẫn dễ thao tác.
Kết luận
Sau bước này, Solution trên Ezyvora không còn chỉ là các card giới thiệu ngắn trên một trang. Mỗi dịch vụ đã có trang chi tiết riêng để khách hàng tìm hiểu nội dung, xem chi phí và chuyển trực tiếp sang bước đăng ký tư vấn. Ở giai đoạn đầu, việc giữ dữ liệu Solution ở dạng tĩnh giúp chúng ta nhanh chóng hoàn thiện và kiểm tra trải nghiệm trước khi tiếp tục chuyển dữ liệu sang quản lý tập trung trên EzyPlatform.