Ở bài trước, chúng ta đã bổ sung Blog cho Levela, đưa các bài hướng dẫn sản phẩm lên EzyPlatform và liên kết từng Product Card với bài viết tương ứng. Nhờ đó, khách hàng không chỉ nhìn thấy sản phẩm mà còn có thể tìm hiểu cách sử dụng trước khi đưa ra quyết định.

Tuy nhiên, hành trình mua hàng vẫn chưa hoàn chỉnh. Nút Mua ngay hiện chủ yếu đưa khách đến form tư vấn. Nếu khách đã biết mình muốn mua sản phẩm nào, họ vẫn chưa thể tự thêm sản phẩm vào giỏ hàng và tạo đơn ngay trên website.

Trong bài này, chúng ta sẽ tiếp tục sử dụng Vibe Coding kết hợp MCP Server để mở rộng Landing Page Levela với các chức năng:

  • Chọn sản phẩm
  • →
  • Thêm vào giỏ hàng
  • →
  • Xem giỏ hàng
  • →
  • Nhập thông tin nhận hàng
  • →
  • Chọn phương thức thanh toán
  • →
  • Đặt hàng

Thay vì tự xây dựng toàn bộ hệ thống Ecommerce từ đầu, chúng ta sẽ ưu tiên tìm và tái sử dụng những chức năng Ecommerce đã có trên EzyPlatform.

1. Kiểm tra lại Product Section và chức năng hiện tại

Trước khi thêm giỏ hàng, hãy để AI kiểm tra lại những gì đã có trên /levela. Ở các bài trước, Product Card đã có tên sản phẩm, hình ảnh, mô tả, giá và các hành động liên quan. Đồng thời chúng ta cũng đã kết nối sản phẩm với Blog và form tư vấn.

Vì vậy, không nên yêu cầu AI tạo lại Product Section.

Hãy bắt đầu bằng prompt:

Prompt mẫu

"Hãy kiểm tra Landing Page /levela và các chức năng liên quan đến sản phẩm hiện tại.

Hãy xác định:

  • File chứa Product Section.
  • Cấu trúc Product Card.
  • Dữ liệu của từng sản phẩm đang được lấy từ đâu.
  • Tên, giá, hình ảnh và thông tin định danh hiện có của sản phẩm.
  • Hành động hiện tại khi click ảnh hoặc tên sản phẩm.
  • Hành động hiện tại của nút Mua ngay.
  • Cách Product Card đang liên kết với Blog.
  • Project đã có chức năng giỏ hàng, checkout hoặc Ecommerce nào hay chưa.

Ưu tiên tái sử dụng chức năng hiện có.

Chưa chỉnh sửa source code.

Hãy mô tả ngắn gọn luồng hiện tại."

AI kiểm tra Product Section và các chức năng hiện tại trên Landing Page levela
AI kiểm tra Product Section và các chức năng hiện tại trên Landing Page /levela

Kết quả của bước này giúp AI hiểu rằng Blog, form tư vấn và Product Card đã hoạt động, tránh việc thêm giỏ hàng nhưng vô tình làm hỏng các chức năng đã hoàn thiện.

2. Xác định hành trình mua hàng mới

Trước khi viết code, chúng ta cần xác định chính xác hành trình mới mà khách hàng sẽ đi qua. Với Levela, có thể giữ hai hướng song song.

Khách cần tìm hiểu thêm
  • Sản phẩm
  • →
  • Bài hướng dẫn
  • →
  • Nhận tư vấn
Khách đã muốn mua
  • Sản phẩm
  • →
  • Thêm vào giỏ
  • →
  • Giỏ hàng
  • →
  • Checkout
  • →
  • Đặt hàng

Như vậy Blog và form tư vấn không bị loại bỏ khi Ecommerce được bổ sung. Ở Product Card, chúng ta có thể chuyển CTA mua hàng thành Thêm vào giỏ, trong khi ảnh hoặc tên sản phẩm vẫn mở bài hướng dẫn như bài trước.

3. Kết nối sản phẩm Levela với dữ liệu Ecommerce

Một vấn đề cần xử lý trước khi làm giỏ hàng là sản phẩm trên Landing Page phải tương ứng với sản phẩm mà Ecommerce nhận diện được.

Ba Product Card hiện tại là:

Sản phẩm Levela Cần xác định từ Ecommerce
Levela Hydrating Serum ID hoặc thông tin định danh sản phẩm thực tế
Levela Daily Moisturizer ID hoặc thông tin định danh sản phẩm thực tế
Levela Gentle Cleanser ID hoặc thông tin định danh sản phẩm thực tế

Không nên chỉ gửi tên sản phẩm hoặc giá đang hiển thị trên HTML rồi sử dụng chúng làm dữ liệu đặt hàng.

Hãy để AI kiểm tra mapping:

Prompt mẫu

"Dựa trên chức năng Ecommerce vừa tìm được, hãy kiểm tra ba sản phẩm Levela hiện tại và xác định mapping với dữ liệu sản phẩm trên EzyPlatform.

Ba sản phẩm:

  • Levela Hydrating Serum.
  • Levela Daily Moisturizer.
  • Levela Gentle Cleanser.

Với mỗi sản phẩm hãy xác định:

  • ID hoặc thông tin định danh Ecommerce.
  • Tên sản phẩm.
  • Giá.
  • Ảnh.
  • Trạng thái cần thiết để có thể mua.

Kiểm tra xem Product Card hiện tại có thể sử dụng trực tiếp dữ liệu Ecommerce hay cần mapping bổ sung.

Không chỉnh sửa source code.

Không tự tạo ID sản phẩm."

AI xác định mapping giữa sản phẩm Levela và dữ liệu Ecommerce
AI xác định mapping giữa sản phẩm Levela và dữ liệu Ecommerce

Nếu dữ liệu Ecommerce đã có đầy đủ, nên ưu tiên sử dụng dữ liệu đó làm nguồn chính thay vì duy trì thêm một bộ giá viết cứng trên Landing Page.

4. Thêm chức năng Thêm vào giỏ hàng

Khi đã xác định được sản phẩm và chức năng Ecommerce tương ứng, chúng ta có thể bắt đầu thay đổi hành động mua hàng. Product Card lúc này có hai hướng rõ ràng:

  • Ảnh/Tên sản phẩm
  • →
  • Bài hướng dẫn
  • Thêm vào giỏ
  • →
  • Giỏ hàng

Prompt mẫu

"Hãy tích hợp chức năng thêm sản phẩm vào giỏ hàng cho Product Section trên Landing Page /levela.

Sử dụng chức năng Ecommerce vừa tìm được qua MCP Server.

Yêu cầu:

  • Ba Product Card sử dụng đúng ID sản phẩm Ecommerce.
  • Nút mua hàng chuyển thành hành động Thêm vào giỏ.
  • Click ảnh hoặc tên sản phẩm vẫn mở bài Blog hướng dẫn tương ứng.
  • Khi thêm thành công, cập nhật số lượng sản phẩm trên biểu tượng giỏ hàng.
  • Không thêm cùng một thao tác nhiều lần khi người dùng click liên tục.
  • Nếu thất bại, hiển thị thông báo phù hợp.
  • Không tin giá được gửi từ frontend nếu phía server/Ecommerce đã quản lý giá.
  • Không hard-code access token hoặc thông tin quản trị trong JavaScript phía trình duyệt.
  • Không làm thay đổi form tư vấn và Blog hiện tại.
  • Giữ nguyên Brand Identity Levela.

Sau khi hoàn thành, hãy liệt kê những file đã chỉnh sửa và dừng lại để tôi Preview."

Product Card với nút Thêm vào giỏ sau khi tích hợp Ecommerce
Product Card với nút Thêm vào giỏ sau khi tích hợp Ecommerce

Sau khi Preview, hãy thử thêm cả hai sản phẩm vào giỏ.

5. Tạo giao diện giỏ hàng

Khách đã thêm sản phẩm nhưng vẫn cần một nơi để kiểm tra những gì mình chuẩn bị mua. Có thể bổ sung biểu tượng Giỏ hàng trên Header. Khi click, tùy cấu trúc project, nó có thể mở trang giỏ hàng riêng hoặc giao diện giỏ hàng mà project hiện tại hỗ trợ.

Một giỏ hàng cơ bản nên cho khách xem:

Thông tin Chức năng
Sản phẩm Ảnh và tên sản phẩm
Đơn giá Giá hiện tại
Số lượng Tăng hoặc giảm số lượng
Tạm tính Giá × số lượng
Xóa Loại sản phẩm khỏi giỏ
Tổng cộng Tổng giá trị giỏ hàng

Prompt mẫu

"Hãy hoàn thiện giao diện giỏ hàng cho Levela dựa trên chức năng Ecommerce hiện có.

Giỏ hàng cần:

  • Hiển thị ảnh sản phẩm.
  • Tên sản phẩm.
  • Đơn giá.
  • Số lượng.
  • Tạm tính.
  • Cho phép tăng hoặc giảm số lượng.
  • Cho phép xóa sản phẩm.
  • Hiển thị tổng giá trị giỏ hàng.
  • Có CTA Tiến hành thanh toán.

Yêu cầu:

  • Dữ liệu giỏ hàng phải đồng bộ với cơ chế Ecommerce hiện tại.
  • Không tự tính hoặc ghi đè giá nếu server đã trả về giá trị chính thức.
  • Xử lý trạng thái giỏ hàng trống.
  • Giữ Brand Identity Levela.
  • Responsive trên mobile.
  • Không thêm thư viện mới nếu không cần thiết.

Hãy thực hiện trực tiếp trên source code và dừng lại để tôi Preview."

Giao diện giỏ hàng Levela - phần 1
Giao diện giỏ hàng Levela (1/2)
Giao diện giỏ hàng Levela - phần 2
Giao diện giỏ hàng Levela (2/2)

6. Tạo trang Checkout

Khi khách nhấn Tiến hành thanh toán, chúng ta chuyển sang Checkout. Ở đây nên giữ biểu mẫu đơn giản, chỉ thu thập những thông tin thực sự cần thiết để xử lý đơn hàng.

Ví dụ:

Nhóm Thông tin
Khách hàng Họ và tên, số điện thoại, email
Nhận hàng Địa chỉ nhận hàng và thông tin cần thiết theo hệ thống
Đơn hàng Sản phẩm, số lượng, tổng tiền
Thanh toán Các phương thức mà Ecommerce thực tế hỗ trợ

Không nên tự thêm các phương thức thanh toán chỉ vì chúng phổ biến. Chỉ hiển thị những phương thức mà EzyPlatform/Ecommerce hiện đã được cấu hình hỗ trợ.

Prompt mẫu

"Hãy tạo luồng Checkout cho Levela dựa trên chức năng Ecommerce đã tìm được.

Trang Checkout cần:

  • Hiển thị lại sản phẩm trong giỏ.
  • Hiển thị số lượng.
  • Hiển thị tổng giá trị đơn hàng.
  • Thu thập thông tin khách hàng mà API tạo đơn thực tế yêu cầu.
  • Thu thập thông tin nhận hàng nếu cần.
  • Hiển thị các phương thức thanh toán thực tế mà hệ thống hiện hỗ trợ.

Yêu cầu:

  • Validate các trường bắt buộc trước khi gửi.
  • Không tự tạo thêm field nếu API không cần.
  • Không tự tạo phương thức thanh toán chưa được cấu hình.
  • Không lấy giá trị tổng tiền từ dữ liệu người dùng có thể chỉnh sửa.
  • Không hard-code thông tin bảo mật vào frontend.
  • Disable nút đặt hàng trong khi request đang xử lý.
  • Nếu lỗi, giữ lại thông tin khách đã nhập để họ có thể thử lại.
  • Giữ Brand Identity Levela và responsive trên mobile.

Sau khi hoàn thành, hãy liệt kê những file đã thay đổi và dừng lại để tôi Preview."

Trang Checkout của Landing Page Levela
Trang Checkout của Landing Page Levela

7. Tạo đơn hàng và xử lý thanh toán

Đây là bước biến giỏ hàng thành một đơn hàng thực sự.

Không nên coi việc khách click Đặt hàng là đã thành công ngay lập tức.

Luồng nên là:

  • Khách xác nhận Checkout
  • →
  • Gửi dữ liệu
  • →
  • Ecommerce xử lý
  • →
  • Tạo đơn hàng
  • →
  • Server trả kết quả

Chỉ sau khi hệ thống xác nhận tạo đơn thành công, website mới chuyển sang trạng thái tiếp theo.

Prompt mẫu

"Hãy kết nối Checkout Levela với chức năng tạo đơn hàng Ecommerce vừa tìm được.

Yêu cầu:

  • Sử dụng đúng dữ liệu giỏ hàng hiện tại.
  • Gửi đúng các trường mà API/Ezy Function yêu cầu.
  • Không tin giá hoặc tổng tiền do frontend tự gửi nếu server có thể xác định lại.
  • Không tạo đơn hàng nhiều lần khi khách click liên tục.
  • Chỉ hiển thị đặt hàng thành công khi server xác nhận đã tạo đơn.
  • Nếu phương thức thanh toán yêu cầu bước tiếp theo, xử lý theo đúng dữ liệu server trả về.
  • Nếu tạo đơn thất bại, giữ lại giỏ hàng và thông tin Checkout.
  • Không hard-code access token, secret key hoặc thông tin quản trị trong frontend.

Không tự tạo API hoặc cơ chế thanh toán mới.

Sau khi hoàn thành, hãy mô tả lại luồng xử lý thực tế đã được tích hợp."

Trường hợp thanh toán khi nhận hàng

Nếu Ecommerce hiện hỗ trợ COD, sau khi tạo đơn thành công khách có thể được đưa đến trang xác nhận đơn hàng. Nếu API trả về mã đơn hàng, có thể hiển thị mã đó để khách dễ theo dõi.

Đặt hàng thanh toán khi nhận hàng - bước 1
Đặt hàng thanh toán khi nhận hàng (1/2)
Đặt hàng thanh toán khi nhận hàng - bước 2
Đặt hàng thanh toán khi nhận hàng (2/2)

Trường hợp thanh toán trực tuyến

Nếu hệ thống đã cấu hình cổng thanh toán, cần sử dụng đúng flow mà API/Ezy Function trả về. Không nên tự xây URL thanh toán hoặc xử lý trạng thái PAID ở frontend nếu cổng thanh toán/Ecommerce đã có cơ chế riêng.

Đặt hàng thanh toán trực tuyến - bước 1
Đặt hàng thanh toán trực tuyến (1/2)
Đặt hàng thanh toán trực tuyến - bước 2
Đặt hàng thanh toán trực tuyến (2/2)

8. Hoàn thiện các trạng thái của quá trình đặt hàng

Tương tự form tư vấn ở những bài trước, Checkout cũng cần có các trạng thái rõ ràng.

Trạng thái Xử lý
Default Khách kiểm tra đơn hàng và nhập thông tin
Submitting Disable nút và hiển thị "Đang xử lý..."
Success Chỉ xuất hiện sau khi server xác nhận tạo đơn thành công
Error Thông báo lỗi, giữ lại giỏ hàng và dữ liệu khách đã nhập

Một nguyên tắc quan trọng là:

Frontend không tự quyết định đơn hàng đã thành công. Thông báo Success phải dựa trên kết quả thực tế từ Ecommerce.

9. Kiểm tra đơn hàng trong EzyPlatform Admin

Không nên dừng kiểm thử ở thông báo Đặt hàng thành công trên website. Sau khi đặt một đơn thử nghiệm, hãy mở EzyPlatform Admin → Ecommerce → Đơn hàng và kiểm tra đơn vừa tạo.

Đơn hàng vừa tạo xuất hiện trong EzyPlatform Admin - Ecommerce
Đơn hàng vừa tạo xuất hiện trong EzyPlatform Admin – Ecommerce

Nếu website báo thành công nhưng không có đơn hàng tương ứng trong Ecommerce, luồng vẫn chưa hoàn thiện.

10. Kiểm thử toàn bộ hành trình mua hàng

Cuối cùng, hãy kiểm tra toàn bộ website thay vì chỉ kiểm tra từng chức năng riêng lẻ.

Prompt mẫu

"Hãy kiểm tra toàn bộ hành trình mua hàng trên Landing Page Levela.

Kiểm tra:

  • Product Card hiển thị đúng dữ liệu.
  • Click ảnh hoặc tên sản phẩm vẫn mở đúng bài Blog.
  • Thêm vào giỏ hoạt động với cả ba sản phẩm.
  • Số lượng trên biểu tượng giỏ hàng cập nhật đúng.
  • Có thể tăng, giảm và xóa sản phẩm.
  • Tổng giá trị giỏ hàng hiển thị đúng theo dữ liệu Ecommerce.
  • Giỏ hàng trống được xử lý đúng.
  • Checkout hiển thị đúng sản phẩm.
  • Validation hoạt động.
  • Không thể gửi nhiều request đặt hàng do click liên tục.
  • Đơn hàng chỉ báo Success khi server xác nhận.
  • Khi lỗi, giỏ hàng và thông tin khách hàng không bị mất.
  • Phương thức thanh toán hoạt động theo cấu hình hiện tại.
  • Đơn hàng thực tế xuất hiện trong EzyPlatform Admin.
  • Blog và form tư vấn từ các bài trước vẫn hoạt động.
  • Toàn bộ hành trình hoạt động tốt trên desktop và mobile.

Nếu phát hiện lỗi, chỉ sửa những vấn đề liên quan trực tiếp đến hành trình Ecommerce.

Không thêm chức năng mới."

AI rà soát kết quả toàn bộ hành trình mua hàng trên Landing Page Levela
AI rà soát kết quả toàn bộ hành trình mua hàng trên Landing Page Levela

Sau đó, chúng ta nên tự thực hiện ít nhất một đơn hàng hoàn chỉnh từ đầu đến cuối.

Thực hiện một đơn hàng hoàn chỉnh - bước chọn sản phẩm
Thực hiện một đơn hàng hoàn chỉnh – chọn sản phẩm
Thực hiện một đơn hàng hoàn chỉnh - bước thanh toán
Thực hiện một đơn hàng hoàn chỉnh – thanh toán
Thực hiện một đơn hàng hoàn chỉnh - bước xác nhận
Thực hiện một đơn hàng hoàn chỉnh – xác nhận

Kết luận

Đến đây, Landing Page Levela đã tiến thêm một bước từ website giới thiệu và thu thập khách hàng quan tâm thành một website có thể hỗ trợ hành trình mua hàng trực tiếp.

Thay vì tự xây dựng giỏ hàng, checkout và hệ thống đơn hàng từ đầu, chúng ta sử dụng Vibe Coding kết hợp MCP Server để AI kiểm tra và tái sử dụng những chức năng Ecommerce mà EzyPlatform đã cung cấp.

Khách hàng lúc này có nhiều lựa chọn hơn trong cùng một hành trình: họ có thể đọc Blog để tìm hiểu sản phẩm, gửi form nếu cần tư vấn hoặc trực tiếp thêm sản phẩm vào giỏ hàng và đặt hàng khi đã sẵn sàng.

Ở bài tiếp theo, chúng ta có thể tiếp tục sử dụng Vibe Coding để hoàn thiện trải nghiệm sau khi đặt hàng, chẳng hạn giúp khách nhận thông tin xác nhận đơn và theo dõi trạng thái đơn hàng, từ lúc đơn được tiếp nhận cho đến khi hoàn tất.