Xây dựng thẻ sản phẩm dễ truy cập cho danh mục cây cảnh

Bắt đầu từ nhiệm vụ của người dùng

Một danh sách sản phẩm tốt không chỉ là một lưới ảnh đẹp. Người xem cần nhận ra sản phẩm, mở trang chi tiết và hiểu được thông tin nào còn thiếu. Với danh mục cây cảnh để bàn, những câu hỏi thường gặp gồm kích thước chậu, điều kiện ánh sáng, giá hoặc cách liên hệ. Các thông tin này cần đến từ dữ liệu của cửa hàng, không nên được tạo tự động nếu chưa có nguồn xác nhận.

Bài viết này minh họa cách xây dựng một thẻ sản phẩm bằng HTML ngữ nghĩa và CSS cơ bản. Ví dụ không khẳng định website được liên kết đang dùng cấu trúc này. Mục tiêu là có một điểm khởi đầu dễ kiểm thử và có thể áp dụng cho nhiều loại danh mục.

Chọn thông tin hiển thị trên thẻ

Với mỗi mục, nên bắt đầu bằng tên sản phẩm, ảnh và đường dẫn đến trang chi tiết. Giá, tình trạng hàng hoặc kích thước chỉ nên hiển thị khi dữ liệu đang được cập nhật. Nếu thiếu thông tin, bạn có thể dùng nhãn như “Liên hệ để biết thêm” thay vì đặt một giá trị giả.

Một trang chi tiết có thể chứa các trường dài hơn như hướng dẫn kiểm tra độ ẩm, loại chậu và hình ảnh bổ sung. Thẻ trong danh mục nên ngắn, giúp người xem so sánh mà không buộc họ đọc toàn bộ mô tả của mỗi cây.

Một ví dụ HTML đơn giản

<article class="product-card">
  <a class="product-card__link" href="/san-pham/cay-mau/">
    <img
      src="/images/cay-mau-640.webp"
      alt="Cây xanh trong chậu đặt trên bàn"
      width="640"
      height="640"
      loading="lazy"
    >
    <h2>Cây cảnh để bàn</h2>
  </a>
  <p>Kiểm tra kích thước và tình trạng cây trước khi mua.</p>
  <a href="/san-pham/cay-mau/">Xem chi tiết cây cảnh để bàn</a>
</article>

Đây chỉ là dữ liệu mẫu; /san-pham/cay-mau/ cần được thay bằng URL thực trong ứng dụng. Ví dụ sử dụng hai liên kết đến cùng trang để minh họa các vị trí có thể bấm, nhưng trong thiết kế thực tế bạn có thể dùng một liên kết bao toàn bộ phần điều hướng nếu cấu trúc của mình không chứa nút lồng bên trong. Tránh đặt một <a> bên trong một <a> khác.

Bố cục linh hoạt với CSS

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

.product-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.product-card a:focus-visible {
  outline: 3px solid #315f42;
  outline-offset: 3px;
}

Grid này cho phép số cột thay đổi theo chiều rộng vùng chứa. Hãy kiểm tra trên điện thoại thực tế: khoảng cách, kích thước chữ và vùng bấm cần đủ dễ sử dụng. Thuộc tính aspect-ratio giúp giữ chỗ cho ảnh, nhưng ảnh bị cắt bằng object-fit: cover có thể che mất phần quan trọng; hãy kiểm tra từng nhóm hình và điều chỉnh khi cần.

Viết alt text theo mục đích sử dụng

Văn bản thay thế nên mô tả thông tin mà ảnh mang lại, chẳng hạn dáng cây và loại chậu khi điều đó quan trọng với người mua. Không cần lặp lại một chuỗi từ khóa dài trong mọi ảnh. Nếu ảnh chỉ mang tính trang trí và đã được mô tả đầy đủ bằng văn bản lân cận, cân nhắc alt="" theo ngữ cảnh.

Với cây sống, một ảnh chính có thể không thể hiện chính xác từng cây được giao. Đội nội dung nên làm rõ ảnh là mẫu minh họa hay ảnh thực tế và cập nhật khi sản phẩm hoặc chậu thay đổi.

Kiểm tra bằng bàn phím và công nghệ hỗ trợ

Dùng phím Tab để đi qua các liên kết theo thứ tự hợp lý, quan sát vòng focus và thử mở từng trang. Tên liên kết như “Xem thêm” có thể thiếu ngữ cảnh nếu xuất hiện nhiều lần; “Xem chi tiết cây cảnh để bàn” rõ hơn khi đọc riêng. Kiểm tra độ tương phản, kích thước chữ và đảm bảo trạng thái hết hàng không chỉ được thể hiện bằng màu.

Khi thêm bộ lọc, hãy dùng các phần tử biểu mẫu có nhãn và kiểm tra thông báo trạng thái khi danh sách thay đổi. Nếu không có kết quả, cung cấp cách xóa bộ lọc thay vì để một vùng trống không giải thích.

Kiểm thử với dữ liệu thật

Thử sản phẩm có tên rất dài, sản phẩm thiếu giá, ảnh tải chậm và đường dẫn sai. Kiểm tra cách lưới xử lý một hoặc hai kết quả, cũng như trường hợp danh mục rỗng. Đo hiệu năng trên mạng di động và kiểm tra ảnh đầu trang không bị lazy-load một cách không cần thiết.

Để tham khảo một nhóm sản phẩm thực tế trước khi xây dữ liệu mẫu, có thể xem danh mục cây cảnh để bàn tại Tiểu Mộc Cát. Hãy luôn dùng URL và dữ liệu do cửa hàng xác nhận khi triển khai bản sản xuất.

DEV Community