Chính website này

Bắt đầu từ đâu

Điểm xuất phát là một bản thiết kế giao diện: bố cục, chuyển động, màu sắc, nội dung ba ngôn ngữ. Không có backend, không có cơ sở dữ liệu, các nút bấm chỉ chuyển tab.

Việc phải làm là biến bản thiết kế đó thành một cửa hàng chạy thật mà không để giao diện xô lệch đi chỗ nào.

Cách giữ nguyên bản thiết kế

Giao diện không được chép tay sang mã nguồn. Thay vào đó là một bộ chuyển đổi tự động đọc file thiết kế rồi sinh ra mã: vòng lặp, điều kiện, hiệu ứng di chuột đều được dịch máy móc.

Mọi chỗ cần nối vào chức năng thật đều khai báo rõ ràng và bắt buộc phải khớp — thiết kế đổi mà chỗ nối không còn thì bộ chuyển đổi dừng lại và báo, thay vì âm thầm làm mất một nút mua hàng.

Thanh toán

• Khách Việt Nam trả bằng chuyển khoản và VietQR qua PayOS.
• Khách nước ngoài trả bằng thẻ qua Paddle, đơn vị đứng tên bán hàng nên tự lo thuế VAT từng nước.
• Chọn cổng theo ngôn ngữ khách đang xem, không bắt khách tự chọn.
• Webhook đối chiếu số tiền thực nhận với số tiền của đơn trước khi mở quyền tải — lệch một xu là không giao.
• Chống phát lại: mỗi thông báo thanh toán chỉ được xử lý một lần, kiểm chữ ký và giới hạn thời gian.

Phần còn lại

• Tài khoản: đăng ký, đăng nhập, quên mật khẩu. Mật khẩu lưu dạng băm, link đặt lại chỉ lưu bản băm và có hạn dùng.
• Giao hàng: mở quyền tải trong tài khoản và gửi link qua email ngay khi nhận được xác nhận thanh toán.
• Ba ngôn ngữ Việt, Anh, Trung — dựng sẵn đúng ngôn ngữ ngay từ HTML đầu tiên, không chớp một nhịp rồi mới đổi.
• Bộ trang pháp lý đầy đủ: điều khoản, bảo mật, hoàn tiền, giấy phép sử dụng.
• SEO: sitemap, robots, ảnh hiển thị khi chia sẻ link.

Những chỗ đáng kể lại

Đối chiếu tiền với Paddle. Cách đọc số tiền đầu tiên chạy trơn tru mà vẫn sai: nó lấy tổng đã gồm thuế, trong khi đơn hàng lưu giá chưa thuế. Không có lỗi nào hiện ra — chỉ là mọi đơn quốc tế sẽ bị đánh dấu thất bại, khách trả tiền mà không nhận được hàng. Phải đối chiếu với một giao dịch thật mới tìm ra.

Ảnh nền tải hai lần. Video nền và video trong thẻ dùng chung một file nhưng là hai thẻ riêng, nên trình duyệt tải cùng một thứ hai lượt. Nửa dung lượng trang chủ là bản sao thừa.

Khung hình trên điện thoại. Màn hình dọc cắt video ngang còn một dải hẹp ở giữa. Cắt sẵn khung dọc từ bản gốc cho ra ảnh nét hơn mà file nhẹ hơn 60%.

Khả năng tiếp cận

Bản thiết kế gốc báo vị trí con trỏ bàn phím bằng hiệu ứng sáng lên, thực tế là gần như không nhìn thấy. Đã thay bằng viền rõ ràng.

Thêm vào đó: thuộc tính ngôn ngữ đi theo ngôn ngữ khách chọn, có vùng mốc để trình đọc màn hình nhảy nhanh, tiêu đề trang mang đúng nội dung thay vì tên danh mục, và tương phản chữ đạt chuẩn WCAG AA.