Skip to main content

​
4.2.4. Products

Dữ liệu
  • Thêm dữ liệu mới:
1

Thêm dữ liệu mới cho sản phẩm

Người dùng nhấn vào nút “Thêm dữ liệu mới”.
Nút thêm dữ liệu mới cho sản phẩm trong giao diện quản lý

Thêm dữ liệu mới

2

Nhập thông tin sản phẩm và chọn ảnh

Người dùng nhập tiêu đề sản phẩm,
sau đó nhấn “Tải ảnh lên hoặc chọn ảnh từ thư viện” để thêm hình ảnh minh họa cho sản phẩm.
Giao diện thêm thông tin và chọn ảnh sản phẩm

Màn hình thêm dữ liệu

3

Hoàn tất hoặc hủy thao tác thêm sản phẩm

Người dùng nhấn “Thêm dữ liệu” để hoàn tất việc thêm sản phẩm mới,
hoặc nhấn “Hủy bỏ” để hủy quá trình thêm dữ liệu.
  • Sửa:
1

Mở trang chỉnh sửa sản phẩm

Người dùng nhấn vào nút để đến trang chỉnh sửa sản phẩm.
Nút chỉnh sửa sản phẩm trong giao diện quản lý

Nút chỉnh sửa

2

Chỉnh sửa thông tin sản phẩm

Người dùng sửa tiêu đề sản phẩm, sau đó nhấn “Tải ảnh lên hoặc chọn ảnh từ thư viện” để thay đổi hình ảnh minh họa cho sản phẩm.
Giao diện chỉnh sửa thông tin và hình ảnh sản phẩm

Màn hình chỉnh sửa dữ liệu

3

Lưu hoặc hủy chỉnh sửa

Người dùng nhấn “Lưu chỉnh sửa” để tiến hành cập nhật thông tin hoặc hình ảnh sản phẩm,
hoặc nhấn “Hủy bỏ” để hủy quá trình chỉnh sửa dữ liệu.
  • Xóa:
1

Xóa sản phẩm

Người dùng nhấn vào nút để xóa dữ liệu sản phẩm khỏi danh sách.
Nút xóa sản phẩm trong giao diện quản lý

Nút xóa

2

Xác nhận xóa dữ liệu

Khi hộp thông báo xuất hiện, người dùng nhấn “Xóa ngay” để tiến hành xóa sản phẩm,
hoặc nhấn “Hủy” để dừng quá trình xóa dữ liệu.
  • Tổng quan
    • Hiển thị tiêu đề:
      • Người dùng nhấn nút để chuyển đổi qua lại giữa 2 trạng thái có tiêu đề và không có tiêu đề, ngoài ra người dùng có thể nhập tiêu đề cho phần sản phẩm. Ví dụ, nếu tiêu đề là “Đây là tiêu đề phần sản phẩm” thì phần sản phẩm sẽ như thế này
Screenshot of a deployment confirmation message that says All checks have passed.

Tiêu đề sản phẩm

  • Kích thước/ Màu sắc:
    • Người dùng có thể điều chỉnh kích thước và màu sắc cho tiêu đề của phần sản phẩm tại
Screenshot of a deployment confirmation message that says All checks have passed.
  • Hiển thị phụ đề:
    • Người dùng nhấn nút để chuyển đổi qua lại giữa 2 trạng thái có phụ đề và không có phụ đề, ngoài ra người dùng có thể nhập phụ đề cho phần sản phẩm. Ví dụ, nếu phụ đề là “Xem thêm” thì phần sản phẩm sẽ như thế này
Screenshot of a deployment confirmation message that says All checks have passed.

Phụ đề sản phầm

  • Kích thường/ Màu sắc:
    • Người dùng có thể điều chỉnh kích thước và màu sắc cho tiêu đề của phần sản phẩm tại
Screenshot of a deployment confirmation message that says All checks have passed.
  • Link phụ đề khi nhấn:
    • Người dùng có thể chọn liên kết để khi click vào phụ đề, ứng dụng sẽ chuyển hướng đến liên kết đó tại
Screenshot of a deployment confirmation message that says All checks have passed.

  • Danh sách thẻ
    • Lề ngoài
      • Người dùng điều chỉnh chung khoảng cách giữa lề trên và dưới giữa các thẻ với các thẻ khác bằng nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Người dùng điều chỉnh khoảng cách giữa lề trái và phải giữa các thẻ với các thẻ khác bằng nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Người dùng có thể điều chỉnh riêng lề trên và lề dưới bằng cách nhấn vào nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Lề trong
    • Người dùng điều chỉnh chung khoảng cách giữa lề trên và dưới giữa lề các thẻ bằng nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Người dùng điều chỉnh khoảng cách giữa lề trái và phải giữa lề các thẻ bằng nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Người dùng có thể điều chỉnh riêng lề trên và lề dưới bằng cách nhấn vào nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Nền
    • Chọn màu nền cho các thẻ bằng cách nhấn ô vuông sau đó chọn màu
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chuyển đổi qua lại giữa 2 trạng thái có màu nền và không có màu nền bằng cách nhấn nút
  • Xóa màu nền bằng cách nhấn nút
  • Bo góc
    • Người dùng có thể nhập hoặc tăng/giảm chung độ bo góc của 4 góc của các thẻ tại ô nhập
Screenshot of a deployment confirmation message that says All checks have passed.

hoặc điềù chỉnh riêng lẻ độ bo góc của từng góc bằng cách nhấn nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Viền
    • Người dùng có thể nhập hoặc tăng/giảm chung độ lớn viền của các thẻ tại ô nhập
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chọn màu cho viền bằng cách nhấn ô vuông sau đó chọn màu
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chuyển đổi qua lại giữa 2 trạng thái có viền và không viền bằng cách nhấn nút
  • Xóa viền bằng cách nhấn nút
  • Đổ bóng
    • Người dùng có thể chọn độ lớn đổ bóng của các thẻ tại ô
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chọn màu cho đổ bóng bằng cách nhấn ô vuông sau đó chọn màu
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chuyển đổi qua lại giữa 2 trạng thái có đổ bóng và không đổ bóng bằng cách nhấn nút
  • Xóa đồ bóng bằng cách nhấn nút
  • Chi tiết thẻ
    • Lề ngoài
      • Người dùng điều chỉnh chung khoảng cách giữa lề trên và dưới giữa các thẻ với các thẻ khác bằng nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Người dùng điều chỉnh khoảng cách giữa lề trái và phải giữa các thẻ với các thẻ khác bằng nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Người dùng có thể điều chỉnh riêng lề trên và lề dưới bằng cách nhấn vào nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Lề trong
    • Người dùng điều chỉnh chung khoảng cách giữa lề trên và dưới giữa lề các thẻ bằng nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Người dùng điều chỉnh khoảng cách giữa lề trái và phải giữa lề các thẻ bằng nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Người dùng có thể điều chỉnh riêng lề trên và lề dưới bằng cách nhấn vào nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chiều cao
    • Người dùng có thể chọn hoặc tăng/giảm chiều cao của các thẻ sản phẩm tại
Screenshot of a deployment confirmation message that says All checks have passed.

  • Nền
    • Chọn màu nền cho các thẻ bằng cách nhấn ô vuông sau đó chọn màu
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chuyển đổi qua lại giữa 2 trạng thái có màu nền và không có màu nền bằng cách nhấn nút
  • Xóa màu nền bằng cách nhấn nút
  • Bo góc
    • Người dùng có thể nhập hoặc tăng/giảm chung độ bo góc của 4 góc của các thẻ tại ô nhập
Screenshot of a deployment confirmation message that says All checks have passed.

hoặc điều chỉnh riêng lẻ độ bo góc của từng góc bằng cách nhấn nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Viền
    • Người dùng có thể nhập hoặc tăng/giảm chung độ lớn viền của các thẻ tại ô nhập
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chọn màu cho viền bằng cách nhấn ô vuông sau đó chọn màu
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chuyển đổi qua lại giữa 2 trạng thái có viền và không viền bằng cách nhấn nút
  • Xóa viền bằng cách nhấn nút
  • Đổ bóng
    • Người dùng có thể chọn độ lớn đổ bóng của các thẻ tại ô
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chọn màu cho đổ bóng bằng cách nhấn ô vuông sau đó chọn màu
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chuyển đổi qua lại giữa 2 trạng thái có đổ bóng và không đổ bóng bằng cách nhấn nút
  • Xóa đồ bóng bằng cách nhấn nút
    • Hiển thị tên sản phẩm:
      • Người dùng nhấn nút để chuyển đổi qua lại giữa 2 trạng thái có tên sản phẩm và không có tên sản phẩm
    • Hiển thị danh mục:
      • Người dùng nhấn nút để chuyển đổi qua lại giữa 2 trạng thái có danh mục và không có danh mục
    • Hiển thị giá tiền:
      • Người dùng nhấn nút để chuyển đổi qua lại giữa 2 trạng thái hiển thị giá tiền và không hiển thị giá tiền
    • Hiển thị giá giảm:
      • Người dùng chọn hiển thị giá giảm theo phần trăm hay giá gốc
Screenshot of a deployment confirmation message that says All checks have passed.

  • Sản phẩm Sale:
    • Người dùng nhấn nút để chuyển đổi qua lại giữa 2 trạng thái có sản phẩm sale và không có sản phẩm sale
  • Hiển thị nhãn:
    • Người dùng chọn không hiển thị nhãn hoặc chọn hiển thị nhãn flashsale, bán chạy, mới nhất.
Screenshot of a deployment confirmation message that says All checks have passed.

  • Hiển thị yêu thích:
    • Người dùng nhấn nút để chuyển đổi qua lại giữa 2 trạng thái có nút yêu thích và không có nút yêu thích
  • Hiển thị đánh giá
    • Người dùng nhấn nút để chuyển đổi qua lại giữa 2 trạng thái có số sao đánh giá và không có số sao đánh giá
  • Hiển thị số lượng yêu thích
    • Người dùng nhấn nút để chuyển đổi qua lại giữa 2 trạng thái có số lượng yêu thích và không có số lượng yêu thích
  • Hiển thị số lượng đã bán:
    • Người dùng nhấn nút để chuyển đổi qua lại giữa 2 trạng thái có số lượng đã bán và không có số lượng đã bán
  • Hiển thị giỏ hàng:
    • Người dùng nhấn nút để chuyển đổi qua lại giữa 2 trạng thái có nút thêm vào giỏ hàng và không có nút thêm vào giỏ hàng.
Kiểu nút giỏ hàng: Người dùng có thể chọn chuyển đổi hiển thị giỏ hàng giữa icon hoặc button
Screenshot of a deployment confirmation message that says All checks have passed.