WebsiteMỹ phẩmThương mại điện tử2026

PRESIST — Website bán hàng ba thứ tiếng cho hãng mỹ phẩm Nhật vào Việt Nam

PRESIST là hãng mỹ phẩm chăm sóc da của Nhật, đang vào thị trường Việt Nam. Chúng tôi giữ vẻ tối giản của site gốc và thêm phần bán hàng: ba thứ tiếng, giỏ hàng, đặt không cần tài khoản, trả tiền khi nhận hàng hoặc chuyển khoản bằng mã VietQR.

Đang triển khai

presist.vn chưa mở, sẽ gắn link khi site chạy

Trang chủ PRESIST bản tiếng Việt trên máy tính (bản mẫu đã duyệt): menu, nút Liên hệ, nút đổi ngôn ngữ VI / JA / EN, chữ PRESIST và câu “Làn da vẫn còn có thể đẹp hơn. Đưa vẻ đẹp lên một tầm cao mới.” trên ảnh bảy sản phẩm đặt trên bục — Trang chủ PRESIST trên máy tính và điện thoại, Trang chủ PRESIST trên điện thoại, chụp từ bản mẫu giao diện khách duyệt ngày 24/10/2026. presist.vn chưa mở; khi site chạy, chúng tôi thay bằng ảnh chụp từ site thật.

Trang chủ PRESIST trên điện thoại (bản mẫu đã duyệt): chữ PRESIST, câu giới thiệu hai dòng và bảy sản phẩm — Trang chủ PRESIST trên máy tính và điện thoại, Trang chủ PRESIST trên điện thoại, chụp từ bản mẫu giao diện khách duyệt ngày 24/10/2026. presist.vn chưa mở; khi site chạy, chúng tôi thay bằng ảnh chụp từ site thật.

Khách hàng

PRESIST là thương hiệu mỹ phẩm chăm sóc da của Nhật, có bảy sản phẩm dùng theo các bước dưỡng da trong ngày, bắt đầu từ gel tẩy trang. Site tiếng Nhật của hãng chỉ giới thiệu thương hiệu và không có giỏ hàng.

Khi vào thị trường Việt Nam, hãng cần một website bán được hàng ở đây, đọc được bằng tiếng Việt, tiếng Nhật và tiếng Anh.

Bài toán

Site mới phải bán được hàng ở Việt Nam mà vẫn giữ được vẻ của site gốc. Mỗi phía cần một điều riêng:

Hãng: Giữ vẻ tối giản, sang của site gốc: nền trắng, nhiều khoảng trắng, ảnh sản phẩm nền trắng, tiêu đề tiếng Anh in hoa.
Khách ở Việt Nam: Đọc bằng tiếng Việt, đặt hàng không cần tạo tài khoản, trả tiền khi nhận hàng hoặc chuyển khoản.
Người đọc tiếng Nhật, tiếng Anh: Có bản đủ bằng thứ tiếng của mình, có địa chỉ riêng để tìm thấy trên Google.
Chữ trên site: Bản tiếng Việt theo quy định quảng cáo mỹ phẩm ở Việt Nam; bản tiếng Nhật giữ cách ghi nhãn của hãng.
Nhân viên bán hàng: Tự sửa sản phẩm, nội dung ba thứ tiếng và xử lý đơn, không phải gọi lập trình viên.

Giai đoạn đầu chỉ bán lẻ và chưa dùng cổng thanh toán.

Cách giải

Chúng tôi dựng bản mẫu giao diện bấm được trước, đo lại khoảng cách, cỡ chữ và màu của site gốc, rồi chạy thử từng bước mua hàng trên máy tính và điện thoại. Khách duyệt bản mẫu ngày 24/10/2026. Code dùng lại đúng các class của bản mẫu, rồi được soát lại từng trang so với bản mẫu, nên site bám sát bản đã duyệt.

Một mã nguồn chạy cả ba thứ tiếng. Khách đặt hàng không cần tài khoản, trả tiền khi nhận hàng hoặc chuyển khoản bằng mã VietQR, rồi tra cứu đơn bằng mã đơn và số điện thoại. Trang quản trị chỉ dành cho nhân viên bên bán, chia bốn vai trò.

Đang triển khai

Tiến độ và giai đoạn sau

Phần đã làm chỉ kể những gì đã có trong mã nguồn; phần đang làm và giai đoạn sau ghi riêng. presist.vn chưa chạy trên máy chủ thật và chưa có ngày mở bán.

14/10/2026

Duyệt kế hoạch, chạy thử bản mẫu

Bản mẫu giao diện chạy thử đủ 26 bước mua hàng ở màn máy tính 1440 và màn điện thoại 390 điểm ảnh.
24/10/2026

Khách duyệt giao diện

Bắt đầu viết code, dùng lại đúng các class của bản mẫu đã duyệt.
26/10/2026

Xong các phần chính

Trang ba thứ tiếng, giỏ hàng, thanh toán, VietQR, tra cứu đơn, email, quản trị đơn và nội dung, sitemap, cache trang.
Đang làm

Hoàn thiện

Các trang đơn hàng, và bản tiếng Nhật, tiếng Anh của trang Về PRESIST, Thông điệp và các chính sách.
Trước khi mở bán

Nhập dữ liệu bán hàng

Khi site chạy, bên bán tự nhập giá bán, số công bố mỹ phẩm, tài khoản nhận tiền, phí giao hàng, chính sách và ảnh gốc của hãng trong trang quản trị; đủ dữ liệu thì mở bán.

Giai đoạn sau

Chưa làm, nhưng dữ liệu đã chừa sẵn chỗ: bộ sản phẩm chăm sóc theo combo, mã giảm giá, tạo vận đơn GHN, payOS tự xác nhận khi tiền về, ví MoMo, VNPay, ZaloPay và tin báo đơn qua Zalo ZNS.

01Ba thứ tiếng

Ba thứ tiếng, mỗi thứ tiếng một địa chỉ

Tiếng Việt là bản chính, tiếng Nhật và tiếng Anh đi cùng. Mỗi thứ tiếng có đường dẫn, nội dung, thẻ SEO và sitemap riêng, nên người đọc và Google đều vào thẳng đúng bản của mình.

Cùng một trang, đổi thứ tiếng

Menu, nút bấm và câu giới thiệu đổi theo thứ tiếng; ảnh, bố cục và nhịp khoảng trắng giữ nguyên. Nút VI, JA, EN đưa sang đúng trang đó ở thứ tiếng kia.

Font tiếng Nhật chỉ tải ở trang tiếng Nhật, nên trang tiếng Việt và tiếng Anh không phải tải thêm.
Giỏ hàng, thanh toán, trang cảm ơn và tra cứu đơn có đủ ba thứ tiếng. Đơn nhớ thứ tiếng khách dùng để gửi email đúng tiếng; tên tỉnh, phường trong địa chỉ vẫn giữ tiếng Việt.
Bản tiếng Nhật và tiếng Anh hiện thêm giá tham khảo quy ra yên hoặc đô la Mỹ theo tỷ giá nhân viên nhập; đơn vẫn tính bằng đồng.
Chữ trên giao diện tách riêng theo thứ tiếng, có bài kiểm thử báo ngay khi một thứ tiếng thiếu chữ. Form quản trị có ba thẻ cho ba thứ tiếng.

Đầu trang chủ PRESIST bản tiếng Việt trên máy tính (bản mẫu đã duyệt): menu, nút Liên hệ, nút đổi thứ tiếng với VI đang chọn, chữ PRESIST và câu “Làn da vẫn còn có thể đẹp hơn. Đưa vẻ đẹp lên một tầm cao mới.” — Bản tiếng Việt.

Cùng phần đầu trang ở bản tiếng Nhật: menu, nút Liên hệ và câu dưới chữ PRESIST viết bằng tiếng Nhật, nút JA đang chọn — Bản tiếng Nhật: menu, nút Liên hệ và câu dưới chữ PRESIST đổi theo, nút JA đang chọn.

Đầu trang chủ PRESIST bản tiếng Việt trên điện thoại (bản mẫu đã duyệt): chữ PRESIST và câu “Làn da vẫn còn có thể đẹp hơn. Đưa vẻ đẹp lên một tầm cao mới.” — Bản tiếng Việt trên điện thoại.

Cùng phần đầu trang ở bản tiếng Nhật trên điện thoại: câu dưới chữ PRESIST viết bằng tiếng Nhật — Bản tiếng Nhật: câu dưới chữ PRESIST đổi theo thứ tiếng.

Đường dẫn riêng, chữ Latin không dấu

Trang nào cũng có tiền tố /vi, /ja hoặc /en, và phần sau đó dịch theo thứ tiếng. Site gốc dùng chữ Nhật trong đường dẫn, gửi qua tin nhắn thành một chuỗi mã khó đọc; bản mới đặt slug chữ Latin riêng cho từng thứ tiếng.

Vào presist.vn thì site chuyển sang thứ tiếng khách chọn lần trước; chưa chọn thì theo ngôn ngữ của trình duyệt, còn lại là tiếng Việt.

Một sản phẩm

VI: /vi/san-pham/nuoc-duong-da-skin-hydrate-lotion
JA: /ja/products/skin-hydrate-lotion
EN: /en/products/skin-hydrate-lotion

Về PRESIST

VI: /vi/ve-presist
JA: /ja/company
EN: /en/company

Tra cứu đơn

VI: /vi/tra-cuu-don-hang
JA: /ja/order-tracking
EN: /en/order-tracking

Cùng ba trang ở ba thứ tiếng, theo cấu hình đường dẫn của site.

Trang chưa dịch thì ẩn ở thứ tiếng đó

TrangTrả trang 404 đúng thứ tiếng, thay vì hiện chữ tiếng Việt giữa trang tiếng Nhật.
Thẻ hreflangChỉ trỏ tới bản dịch có thật, kèm x-default là tiếng Việt. Trang giỏ, thanh toán và tra cứu không có hreflang.
Nút đổi thứ tiếngTrang chưa có bản tiếng kia thì nút đưa về trang chủ của thứ tiếng đó.
Menu, chân trangẨn link tới trang chưa dịch, nên người đọc không bấm vào một trang trống.

02Ghi nhãn

Ghi nhãn của hãng và quy định quảng cáo mỹ phẩm

Site gốc của hãng ghi chú thích thành phần bằng dấu ※, theo cách ghi nhãn quen dùng ở Nhật. Trên site mới, bản tiếng Nhật giữ dấu ※, còn bản tiếng Việt và tiếng Anh dùng số mũ và dấu *.

Một dòng chú thích, ba cách viết

Bản tiếng Việt viết lại câu chữ theo quy định quảng cáo mỹ phẩm ở Việt Nam: bỏ những chữ dành cho thuốc và những câu nói về tác động lên tế bào, ghi mục đích phối hợp của từng thành phần, và thêm dòng chú thích dấu * ở cuối mục thành phần.

Form sửa sản phẩm có dòng nhắc quy tắc ngay cạnh ô nhập: bản tiếng Nhật giữ dấu ※, bản tiếng Việt và tiếng Anh dùng dấu *.
Số tiếp nhận Phiếu công bố mỹ phẩm có ô riêng; chưa có số thì trang sản phẩm không hiện dòng đó.

VI: Sodium Hyaluronate (thành phần dưỡng ẩm)* Mô tả theo mục đích phối hợp thành phần, không cam kết công dụng.
JA: ヒアルロン酸Na（保湿成分）※ 成分名は配合目的に基づいた記載であり、特定の効能効果を保証するものではありません。
EN: Sodium Hyaluronate (moisturizing)* Ingredient names are described according to their formulation purpose and do not guarantee any specific efficacy or effect.

Cùng một dòng thành phần và dòng chú thích ở ba bản, chép từ dữ liệu sản phẩm Skin Hydrate Lotion.

Trên trang sản phẩm

Mỗi thành phần chính ghi kèm mục đích phối hợp trong ngoặc, dòng chú thích nằm ngay dưới danh sách. Khối mua bên phải ghi hai cách trả tiền và giao hàng toàn quốc.

Ba mục đầu của trang sản phẩm (bản mẫu đã duyệt): 1 Ý tưởng sản phẩm, 2 Điểm nổi bật, 3 Thành phần chính và dòng chú thích dấu sao; khối mua đứng yên bên phải. Giá, mức miễn phí vận chuyển và hai dòng thành phần đã làm mờ — Ba mục đầu của trang sản phẩm trong bản mẫu đã duyệt. Giá, mức miễn phí giao hàng và haiHai dòng thành phần đã làm mờ vì chưa chốt.

03Sản phẩm

Bảy sản phẩm theo thứ tự dưỡng da

Danh sách sản phẩm và trang chủ xếp bảy sản phẩm theo thứ tự dùng trong ngày, bắt đầu từ gel tẩy trang. Trang sản phẩm nào cũng có đủ sáu mục đánh số như site gốc, đầu mục ghi cả tiếng Việt và tiếng Anh.

Ý tưởng sản phẩm Concept

Một câu nói sản phẩm dùng để làm gì.
Điểm nổi bật Product Highlights

Ba ý ngắn.
Thành phần chính Key Ingredients

Tên thành phần kèm mục đích phối hợp, dòng chú thích ở cuối.
Kết cấu & cảm giác Texture & Feel

Cảm giác khi thoa lên da.
Cách sử dụng How to Use

Dùng hằng ngày và chăm sóc tập trung.
Thông tin sản phẩm Product Info

Dung tích, lượng dùng, xuất xứ, số công bố khi có.

Khối mua đứng yên, thanh mua dính đáy

Trên máy tính, khối mua đứng yên bên phải khi khách cuộn qua sáu mục. Trên điện thoại, thanh Thêm vào giỏ và Mua ngay dính ở đáy màn hình.

Cuối trang gợi ý các sản phẩm dùng cùng trong quy trình, kèm link sang sản phẩm đứng trước và đứng sau.
Trang chủ có khối The Collection xếp so le như site gốc; sản phẩm nào cũng có ba nút Thêm vào giỏ, Mua ngay và Xem chi tiết.
Tiêu đề tiếng Anh in hoa dùng chữ SVG của hãng hoặc chữ Garamond, giống site gốc.

Trang sản phẩm Skin Hydrate Lotion trên máy tính (bản mẫu đã duyệt): tên sản phẩm lớn, tên tiếng Việt, ảnh chai, khối mua bên phải có dung tích, lượng dùng, số lượng, nút Thêm vào giỏ và Mua ngay; giá đã làm mờ — Trang Skin Hydrate Lotion trên máy tính và điện thoạiTrang Skin Hydrate Lotion trên điện thoại, bản mẫu đã duyệt; giá đã làm mờ.

Trang Skin Hydrate Lotion trên điện thoại (bản mẫu đã duyệt): đường dẫn, tên sản phẩm, tên tiếng Việt, câu giới thiệu và ảnh chai — Trang Skin Hydrate Lotion trên máy tính và điện thoạiTrang Skin Hydrate Lotion trên điện thoại, bản mẫu đã duyệt; giá đã làm mờ.

Bốn trạng thái hàng

Trang sản phẩm đổi nút mua theo tồn kho và theo giá.

Còn hàng: Hai nút Thêm vào giỏ và Mua ngay.
Chỉ còn n sản phẩm: Hiện khi còn từ 5 sản phẩm trở xuống, với hàng có theo dõi tồn kho.
Tạm hết hàng: Khách đọc được trang nhưng không đặt được.
Sắp ra mắt: Sản phẩm chưa có giá thì ẩn nút mua, khách vẫn đọc được trang.

04Đặt hàng

Đặt hàng không cần tài khoản, tra cứu bằng mã đơn

Khách thêm vào giỏ, điền một trang thanh toán và nhận mã đơn. Muốn xem đơn đang ở đâu thì nhập mã đơn và số điện thoại đã đặt, không cần đăng nhập.

Giỏ hàng và thanh toán một trang

Giỏ hàng giữ bảy ngày mà không cần tài khoản. Giỏ nhỏ mở ra ở cạnh màn hình, thêm hay bớt không tải lại trang; xóa nhầm thì bấm Hoàn tác.

Trang giỏ ước tính phí giao theo tỉnh và có thanh báo còn thiếu bao nhiêu để được miễn phí giao hàng.
Thanh toán một trang: họ tên, số điện thoại, email nếu muốn, địa chỉ hai cấp tỉnh và phường, xã theo hệ thống hành chính từ 1/7/2025 (34 tỉnh, thành; 3.321 đơn vị cấp xã), số nhà và ghi chú.
Phí giao hàng theo vùng nhân viên cài đặt (Hà Nội, TP.HCM, tỉnh khác) và mức miễn phí.

Khi khách bấm Đặt hàng

Máy chủ tính lại toàn bộ tiền, không dùng con số nào trình duyệt gửi lên.
Tổng tiền khác lúc khách xem thì đơn chưa được tạo: trang báo số mới và hỏi khách lại.
Tạo đơn và trừ tồn kho trong cùng một lần ghi; hai người cùng mua món cuối thì chỉ một người mua được.
Mã đơn là PR và sáu ký tự, bỏ các ký tự dễ đọc nhầm 0, O, 1, I, L.

Bước 3, Phương thức thanh toán, trên điện thoại (bản mẫu đã duyệt): thẻ Chuyển khoản ngân hàng (VietQR) đang chọn kèm ba bước, bên dưới là Thanh toán khi nhận hàng (COD) — Bước 3 của trang thanh toán trên điện thoại: VietQR hoặc COD, mỗi cách ghi rõ chuyện gì xảy ra sau khi đặt.

Tra cứu đơn bằng mã đơn và số điện thoại

Trang tra cứu che bớt số điện thoại, email và số nhà, có dòng thời gian, đơn vị vận chuyển và mã vận đơn, và hiện lại mã VietQR nếu đơn chưa trả tiền.

Trang cảm ơn chỉ hiện đủ thông tin cho đúng người vừa đặt; người khác mở link chỉ thấy đơn đã được ghi nhận và nút tra cứu.
Số lần tra cứu có giới hạn theo địa chỉ IP, theo mã đơn và theo số điện thoại; vượt mức thì tạm chặn một lúc, để không ai dò thử đơn của người khác.
Nút Gửi yêu cầu hỗ trợ mở form liên hệ đã điền sẵn chủ đề và mã đơn.

Đơn hàngPR5X7Q2M

Điện thoại: 090***4009
Giao tới: Số •••, Phường Mẫu, Hà Nội
Thanh toán: Chuyển khoản VietQR, đã nhận tiền

Chờ xác nhận25/10 09:12
Đã xác nhận25/10 10:05
Đang giao26/10 08:40 · Hãng giao hàng mẫu, mã vận đơn MAU4518 (trạng thái hiện tại)
Hoàn tất

Dựng lại bằng HTML với dữ liệu giả: mã đơn, số điện thoại, ngày giờ, hãng và mã vận đơn là ví dụ.

05Trả tiền

COD và VietQR, chưa cần cổng thanh toán

Giai đoạn đầu không dùng cổng thanh toán nên không mất phí cổng. Khách trả tiền khi nhận hàng, hoặc quét mã VietQR có sẵn số tiền và nội dung chuyển khoản là mã đơn; nhân viên đối chiếu sao kê rồi bấm xác nhận.

Khách đặt hàng

Chọn Chuyển khoản ngân hàng (VietQR) ở bước 3 của trang thanh toán.
Quét mã

Trang cảm ơn hiện mã VietQR theo chuẩn chung của các ngân hàng: đúng tài khoản, số tiền, nội dung là mã đơn. Mã được tạo ngay trên máy chủ.
Nhân viên xác nhận

Đối chiếu sao kê rồi bấm Xác nhận đã nhận tiền.
Khách được báo

Trang cảm ơn đang mở tự kiểm tra lại 30 giây một lần và đổi trạng thái; khách có để lại email thì nhận thêm thư báo đã nhận tiền.

Hai cách trả tiền, mỗi cách một luật

Đơn chuyển khoản chưa thấy tiền thì vẫn xác nhận được nhưng chưa giao được, trừ khi nhân viên tích Giao trước, thu sau; việc này ghi vào lịch sử đơn.

Số tài khoản nhận tiền nhập trong quản trị và được mã hóa khi lưu; muốn đổi phải nhập lại mật khẩu. Có mã QR thử để kiểm tra tên chủ tài khoản trước khi mở bán.
Mỗi lần thanh toán lưu lại thông tin ngân hàng lúc đó, nên đổi tài khoản sau này không làm sai đơn cũ.
Đơn chuyển khoản chưa trả không tự hủy. Bảng điều khiển báo đơn quá 24 giờ (đổi được mốc này), và đơn đã hủy mà đã nhận tiền nằm ở mục cần hoàn tiền.
Email đặt hàng không nhúng ảnh mã QR, chỉ ghi ngân hàng, số tài khoản, số tiền, nội dung chuyển khoản và link tra cứu.

Thanh toán khi nhận hàng (COD): Khách trả tiền mặt cho người giao. Đơn hoàn tất thì tự ghi là đã thanh toán.; thu khi giao
Chuyển khoản bằng mã VietQR: Khách quét mã bằng app ngân hàng. Nhân viên đối chiếu sao kê, bấm xác nhận; trang cảm ơn đổi trạng thái, khách có email thì nhận thêm thư.; nhân viên xác nhận

Hai cách trả tiền ở bước thanh toán. Mã nguồn đã chừa chỗ để gắn cổng thanh toán ở giai đoạn sau.

Khối The Collection trên trang chủ (bản mẫu đã duyệt): ảnh Deep Cleansing Gel trên dải ruy băng, bên phải tên sản phẩm, câu giới thiệu và ba nút Thêm vào giỏ, Mua ngay, Xem chi tiết; sản phẩm sau xếp đổi bên. Đoạn mô tả và giá đã làm mờ — Khối The Collection trên trang chủ, bản mẫu đã duyệt: mỗi sản phẩm một hàng, ảnh và chữ đổi bên như site gốc. Đoạn mô tả và giá đã làm mờ vì chưa chốt.Ảnh Deep Cleansing Gel trong khối The Collection trên trang chủ, bản mẫu đã duyệt.

06Quản trị

Quản trị chỉ cho nhân viên, bốn vai trò

Khách mua hàng không có tài khoản, nên chỉ nhân viên bên bán đăng nhập vào trang quản trị. Mỗi người thấy đúng phần việc của vai trò mình, menu cũng lọc theo quyền.

Bốn vai trò nhân viên, tên như trong trang quản trị, và việc mỗi vai trò làm được
Vai trò	Làm được
Admin	Toàn quyền. Là vai trò duy nhất tạo, sửa và khóa được tài khoản admin.
Quản trị viên	Quản lý mọi việc khác như admin, chỉ không đụng được tài khoản admin.
Bán hàng	Đơn hàng, sản phẩm và hộp thư liên hệ.
Marketing	Nội dung, cài đặt nội dung và hộp thư liên hệ.

Đơn hàng: Lọc theo trạng thái, thanh toán, cách trả tiền, thứ tiếng và khoảng ngày; tìm theo mã đơn, số điện thoại, tên. Đơn đi từ Chờ xác nhận, Đã xác nhận, Đang giao tới Hoàn tất; hủy thì trả lại tồn kho. In phiếu giao khổ A5 cho một hay nhiều đơn, xuất CSV.
Bảng điều khiển: Đơn hôm nay, doanh thu tháng, đơn chờ xử lý, chuyển khoản chưa trả, đơn đã hủy nhưng đã nhận tiền cần hoàn, hàng sắp hết.
Sản phẩm, tồn kho: Kéo thả để xếp thứ tự, ba thẻ cho ba thứ tiếng, danh sách đánh dấu bản dịch nào đã có, album ảnh. Form không có ô tồn kho: tồn chỉ đổi bằng phiếu điều chỉnh cộng hay trừ, có lý do, ghi lịch sử.
Nội dung: Trang Về PRESIST, Thông điệp, bốn trang chính sách (trang còn nháp không hiện ở chân trang), banner trang chủ, tin tức ba thứ tiếng, hộp thư liên hệ, cài đặt SEO, mạng xã hội, tỷ giá, email, vùng giao hàng, chuyển hướng 301 có đếm lượt.
Tài khoản: Khóa tài khoản thay vì xóa, luôn còn ít nhất một admin, không ai tự hạ quyền hay tự khóa mình. Không hoạt động lâu thì tự đăng xuất. Thao tác ghi nào cũng vào nhật ký, chỉ ghi những trường đã đổi.
Email: Gửi qua hàng đợi sau khi đơn đã ghi xong: xác nhận đặt hàng cho khách đúng thứ tiếng, đơn mới cho nhân viên, đã nhận tiền, đã giao cho bên vận chuyển, liên hệ mới.

07Ảnh và bài viết

Ảnh có điểm lấy nét, ảnh dán tự tải về

Nhân viên tải ảnh nào lên thì site tự đổi sang WebP, tạo sẵn ba cỡ nhỏ và bỏ thông tin máy chụp. Ảnh nào bị cắt theo khung thì có điểm lấy nét, nên phần quan trọng của ảnh luôn nằm trong khung.

Điểm lấy nét: bấm lên ảnh, xem ngay các khung

Trong trang quản trị, nhân viên bấm lên ảnh để đặt điểm cần giữ, xem trước ngay các khung site đang dùng, và có nút Đặt lại giữa. Ngoài site, ảnh được cắt quanh điểm đó và không bao giờ bị méo.

Bảy chai, hũ PRESIST trên bục, cắt từ ảnh banner trang chủ của bản mẫu, dùng để thử điểm lấy nét — Minh họa cách điểm lấy nét chạy, dùng phần bục sản phẩm trong ảnh banner của bản mẫu: ba khung cắt cùng một ảnh quanh cùng một điểm. Trong trang quản trị, khung xem trước theo đúng tỉ lệ site dùng cho ô ảnh đó.

Minh họa cách điểm lấy nét chạy, dùng phần bục sản phẩm trong ảnh banner của bản mẫu: ba khung cắt cùng một ảnh quanh cùng một điểm. Trong trang quản trị, khung xem trước theo đúng tỉ lệ site dùng cho ô ảnh đó.

Trình soạn bài: dán từ trang khác, ảnh tự về máy chủ

Dán một bài từ trang khác vào thì ảnh ngoài trong bài được tải về ngay, đổi sang WebP và đặt tên theo bài. Lưu bài thì site tải nốt phần còn lại.

Form sửa bài báo còn bao nhiêu ảnh nằm ở trang khác, kèm nút Tải ảnh về ngay. Mỗi đêm site quét lại bài cũ; ảnh tải lỗi thì thử vài lần rồi thôi.
Bộ tải ảnh chỉ tải từ địa chỉ công khai trên Internet, không chạm được vào mạng nội bộ của máy chủ.
Tải nhiều ảnh một lần, xếp lưới hai hoặc ba cột. Định dạng dùng chung cho trình soạn, bộ lọc HTML và giao diện site, nên bài lên site đúng như lúc soạn.
Mỗi ảnh lưu bản gốc cạnh dài tối đa 2000 điểm ảnh, kèm ba cỡ 400, 800 và 1200; ảnh nhỏ hơn thì không phóng to. Điện thoại tải đúng cỡ mình cần.

08SEO và tốc độ

SEO ba thứ tiếng, cache cả trang

Mỗi trang có thẻ meta, canonical, Open Graph đúng thứ tiếng và dữ liệu có cấu trúc. Một sitemap tổng trỏ tới ba sitemap theo thứ tiếng, trang nào trong đó cũng kèm link sang bản dịch của nó.

Lưu sẵn cả trang

Trang chủ, sản phẩm, Về PRESIST, Thông điệp, chính sách, tin tức. Lưu nội dung là bản lưu cũ của trang đó bị xóa ngay.

Luôn tạo mới

Liên hệ, giỏ hàng, thanh toán, đơn hàng. Số trên biểu tượng giỏ được lấy riêng, nên trang đã lưu sẵn không chứa gì của riêng ai.

Dữ liệu có cấu trúc: Tổ chức, website, đường dẫn, sản phẩm kèm giá bằng đồng, bài viết, danh sách. Thẻ og:locale đổi theo thứ tiếng.
Không lập chỉ mục: Giỏ hàng, thanh toán, trang cảm ơn, tra cứu đơn và trang 404; các trang này cũng không có hreflang.
Link cũ: Bảng chuyển hướng 301 được xét trước khi trả trang 404; trang 404 hiện đúng thứ tiếng.
Tải nhanh: Font đặt trên chính máy chủ, ảnh WebP tải khi cuộn tới, một bộ giao diện cho mọi màn hình thay vì hai khối riêng cho máy tính và điện thoại như site gốc.
Bảo vệ: Mỗi nhóm trang có giới hạn số lần gửi riêng, có bài kiểm thử báo lỗi nếu một trang quản trị thiếu quyền hay một trang ghi dữ liệu thiếu giới hạn. HTML lưu vào đều qua bộ lọc; form liên hệ có bẫy chống bot và ô đồng ý bắt buộc theo Nghị định 13/2023; dữ liệu cá nhân được che trong nhật ký.

Công nghệ

Laravel 13 · PHP 8.3: Đơn, tiền, tồn kho, phân quyền, ba thứ tiếng và trang quản trị. Giao diện Blade, không dùng SPA.
MySQL 8: Đơn hàng, tồn kho, tài khoản nhân viên và nội dung ba thứ tiếng.
Tailwind CSS · Alpine.js: Dùng lại đúng class của bản mẫu đã duyệt; giỏ nhỏ và các nút bấm chạy không tải lại trang.
TinyMCE: Trình soạn bài và trang nội dung ba thứ tiếng.
VietQR: Mã chuyển khoản cho từng đơn, tạo ngay trên máy chủ.
Email: Gửi qua hàng đợi, mỗi thư có bản HTML và bản chữ thường.

09Cách nghĩ

Vì sao làm như vậy

Ba chỗ chúng tôi chọn đánh đổi, kèm lý do. Nếu bạn đang tính làm website bán hàng nhiều thứ tiếng, các câu này đáng hỏi trước khi bắt đầu.

Chưa dịch thì ẩn, không dịch nửa vời

Ẩn một trang thì bản tiếng Nhật hay tiếng Anh mỏng đi một chút. Đổi lại, người đọc không gặp đoạn tiếng Việt giữa trang tiếng Nhật, và Google không hiểu nhầm trang đó viết bằng tiếng gì.
Chuyển khoản tay trước, cổng thanh toán sau

Nhân viên phải đối chiếu sao kê bằng tay, đổi lại chưa mất phí cổng khi đơn còn ít. Đơn nhiều lên thì gắn cổng thanh toán vào chỗ mã nguồn đã chừa sẵn.
Dữ liệu kinh doanh do bên bán tự nhập

Giá bán, số công bố, tài khoản ngân hàng hay chính sách phải do bên bán quyết. Chúng tôi không chờ đủ những thứ đó mới làm tiếp: thiếu thì site ẩn đi hoặc ghi Sắp ra mắt, nên dữ liệu chưa đủ không làm chậm việc viết code.

PRESIST — Website bán hàng ba thứ tiếng cho hãng mỹ phẩm Nhật vào Việt Nam

Khách hàng

Bài toán

Cách giải

Tiến độ và giai đoạn sau

Duyệt kế hoạch, chạy thử bản mẫu

Khách duyệt giao diện

Xong các phần chính

Hoàn thiện

Nhập dữ liệu bán hàng