Giỏ hàng
Ngăn giỏ hàng dùng chung cho cả site, cách mở nó ra để sửa, nút Thêm vào giỏ và các hành động liên quan tới giỏ, và cái bẫy 404 của trang Thanh toán.
Giỏ hàng là một ngăn trượt (drawer) chứ không phải một trang. Nó nằm chồng lên trang hiện tại, và dùng chung cho cả site — cây Lớp ghi đúng câu đó trên nhóm của nó: "Dùng chung — hiện trên mọi trang."
Đây là khác biệt quan trọng nhất so với mọi thứ khác bạn dựng: bạn thiết kế giỏ hàng một lần, không phải một lần trên mỗi trang.
Sửa giỏ hàng
Ngăn giỏ đóng thì không bấm được trên canvas, nên có hai đường vào:
- Mở Lớp (en: Layer) trên thanh công cụ, bung nhóm Giỏ hàng ở cuối cây — nhóm này đóng sẵn vì ngăn giỏ dài — rồi bấm dòng ngăn giỏ. Ngăn mở ra trên canvas.
- Hoặc chọn bất kỳ phần tử nào có hành động Mở giỏ hàng — biểu tượng giỏ ở header chẳng hạn.
Cả hai cách, thanh công cụ của phần tử hiện Sửa giỏ hàng (en: Edit cart). Bấm vào là bạn sửa ngăn giỏ như một phần trang bình thường: kéo phần tử vào, chỉnh kiểu, đặt khoảng cách. Trong lúc đó trình chỉnh sửa hiện Đang sửa ngăn giỏ hàng để bạn không quên mình đang đứng ở đâu.
Thấy "Không mở được ngăn giỏ hàng." là lỗi tải chứ không phải giỏ hỏng — đóng và thử lại.
Nó không nằm trong tài liệu của trang
Giỏ hàng được ghép vào trang lúc đọc và tách ra lúc ghi. Tài liệu của một trang không lưu dấu vết nào của nó — khác với phần dùng chung, vốn để lại một node tham chiếu. Hệ quả bạn nhìn thấy:
- Trong cây Lớp nó nằm ở nhóm riêng dưới Header/Body/Footer, không kéo được lên trên, và không tính vào quy tắc "trên cùng / dưới cùng" của header và footer.
- Sửa giỏ ở một trang là sửa nó ở mọi trang. Không có bản riêng cho từng trang.
- Xoá một trang không đụng gì tới giỏ.
Dòng giỏ hàng
Bên trong ngăn có Dòng giỏ hàng (en: Cart item) — mẫu cho một dòng hàng. Bạn thiết kế một dòng, cửa hàng lặp lại nó cho từng món khách đã thêm. Đừng dựng ba dòng để có ba món.
Hai danh sách giỏ hàng trong cùng một chỗ sẽ hiện mỗi món hai lần. Trên canvas bạn không thấy: mỗi danh sách chỉ xem trước một dòng mẫu, nên hai danh sách trông như một danh sách có một dòng bên dưới. Chỉ khi khách bỏ hàng vào giỏ trên trang thật, mọi thứ mới nhân đôi. Vì vậy trình chỉnh sửa dán nhãn đỏ "Ngăn này có 2 danh sách giỏ hàng" lên cả hai — xoá bớt một là xong.
Các phần tử của giỏ nằm ở panel Cửa hàng (en: Store), nhóm Gian hàng: Giỏ hàng (biểu tượng cho header, bấm là mở ngăn), Dòng giỏ hàng, Tổng giỏ hàng.
Thêm vào giỏ
Thêm vào giỏ không phải một hành động bạn gắn lên nút bất kỳ — nó là một nút dựng sẵn, ở panel Cửa hàng, nhóm Sản phẩm. Nút biết sản phẩm nào đang được xem (trang sản phẩm, hoặc thẻ trong danh sách), và dùng chung ô Số lượng đặt cạnh nó.
Trong bảng thuộc tính của nút có ô chọn việc xảy ra sau khi thêm: Ở lại trang, Mở giỏ hàng, hoặc Đến thanh toán.
Các hành động liên quan tới giỏ
Những hành động Khi nhấp (en: On click) gắn được cho nút hay phần tử bất kỳ:
| Hành động | en | Làm gì |
|---|---|---|
| Mở giỏ hàng | Open cart | Trượt ngăn giỏ ra |
| Đóng giỏ hàng | Close cart | Đóng lại |
| Đến thanh toán | Go to checkout | Sang trang thanh toán |
| Xoá dòng giỏ hàng | Remove cart line | Bỏ dòng hàng chứa nút này |
| Tăng số lượng | Increase quantity | +1 cho dòng chứa nút này |
| Giảm số lượng | Decrease quantity | −1 cho dòng chứa nút này |
Ba hành động cuối chỉ có nghĩa khi nút nằm bên trong Dòng giỏ hàng.
Tên hàng theo tiếng của khách
Ở cửa hàng bán nhiều ngôn ngữ, mỗi dòng trong ngăn
kéo hiện tên sản phẩm bằng ngôn ngữ khách đang đọc. Một dòng nhớ cái tên lúc
nó được thêm vào, và giỏ hàng sống qua cả lần đổi ngôn ngữ — nên khi khách
chuyển từ trang tiếng Việt sang /en/, những dòng thêm trước đó được đổi sang
tên tiếng Anh, thay vì để ngăn kéo nửa tiếng này nửa tiếng kia. Sản phẩm bạn
chưa dịch thì giữ tên gốc, đúng như chính trang đó in ra.
Một khoá học thêm vào bằng nút đăng ký hiện dưới tên sản phẩm bán khoá đó, không phải tên khoá — sản phẩm mới là thứ thật sự được mua, và đó là cái tên mà đơn hàng, biên nhận và lịch sử đơn của khách đều mang. Hãy đặt cho sản phẩm đó một cái tên người mua nhận ra được. Xem Khoá học.
Trang thanh toán
Đến thanh toán dẫn sang trang loại Thanh toán (en: Checkout) của site —
luôn ở /checkout, trang này không có đường dẫn riêng. Sau khi đặt xong, khách
tới trang loại Hoàn tất đơn hàng. Cả hai là
trang mẫu: dựng một lần, dùng cho mọi
đơn.
Chưa có trang Thanh toán thì nút Thanh toán trong giỏ dẫn ra trang 404. Không phải trang trống — là "không tìm thấy", đúng lúc khách đang cầm giỏ đầy.
Đây là chỗ dễ sập nhất của luồng bán hàng, nên hộp thoại Xuất bản liệt kê những gì còn thiếu để khách mua được, và có nút Tạo và xuất bản trang Thanh toán làm hộ cả bốn việc: tạo trang đúng loại, tạo biểu mẫu đặt hàng lấy hàng từ giỏ, điền các phương thức thanh toán đang bật, rồi xuất bản. Xem Đưa trang lên mạng.
Tự dựng thì nhớ hai điều: trang phải đúng loại Thanh toán, và biểu mẫu đặt hàng trên đó phải để Nguồn đơn hàng = Giỏ hàng của khách — để mặc định "sản phẩm ghim sẵn" thì biểu mẫu nhận đủ địa chỉ rồi từ chối đơn. Xem Biểu mẫu.
Chỉ sản phẩm đang bán mới mua được. Sản phẩm bạn chuyển về Nháp hoặc Lưu trữ thôi bán qua giỏ ngay lập tức — kể cả khi nó đang nằm sẵn trong giỏ của khách. Cả tổng tiền giỏ lẫn bước thanh toán đều từ chối, báo khách rằng có sản phẩm trong giỏ không còn bán, thay vì thu tiền một thứ bạn đã ngừng bán. Ngoại lệ duy nhất là link gia hạn khoá học: học viên gia hạn vẫn mua lại được khoá của mình dù sản phẩm của nó đã bị lưu trữ.
Trang Hoàn tất đơn hàng không có bẫy đó: chưa dựng thì hệ thống hiện tạm một biên lai mặc định — trơ trụi, không mang thương hiệu của bạn, nhưng không bao giờ là trang lỗi.
Xem thử
Giỏ chỉ có hành vi thật trên trang đã xuất bản hoặc trong Xem trước — trên canvas bạn thấy hình dáng, còn việc thêm hàng và cộng tiền chạy trên storefront. Dùng Xem trước (en: Preview) để thử cả luồng mà không cần xuất bản.
Cập nhật 26/9/2026