Danh sách tự đổ dữ liệu

Bạn không dựng một thẻ cho từng sản phẩm. Bạn dựng một thẻ, và một phần tử danh sách nhân nó ra cho mọi sản phẩm mà nguồn của nó trả về.

Các phần tử này nằm ở panel Cửa hàng (en: Store) trên thanh công cụ.

Hai loại danh sách

Danh sách sản phẩm (en: Product list) — lặp lại một thẻ cho từng sản phẩm.

Danh sách bộ sưu tập (en: Collection list) — lặp lại một thẻ cho từng bộ sưu tập.

Cả hai hoạt động giống nhau: bên trong có một mẫu thẻ, bạn thiết kế nó, và cửa hàng lặp lại.

Thiết kế mẫu thẻ

Kéo phần tử vào bên trong mẫu như bình thường. Những phần tử biết tự lấy dữ liệu của dòng đang lặp gồm: Ảnh sản phẩm, tên, Hiển thị giá, nút thêm vào giỏ, và các thứ tương tự cho bộ sưu tập (Tên bộ sưu tập, Mô tả bộ sưu tập, Ảnh bộ sưu tập).

Khi một phần tử nằm bên trong mẫu, ô Nguồn của nó bị khoá và nói rõ lý do:

"Đang nằm trong mục lặp lại nên tự lấy theo sản phẩm của mục đó."

Đó là điều bạn muốn. Ngoài mẫu lặp, cùng phần tử đó cho bạn chọn Tự động (lấy theo ngữ cảnh trang) hoặc Tuỳ chỉnh (ghim một sản phẩm cụ thể).

Danh sách hiển thị cái gì

Thả một Danh sách sản phẩm xuống thì mặc định nó hiển thị tất cả sản phẩm. Để thu hẹp lại, bấm vào phần chọn bộ sưu tập — gợi ý ngay trên canvas nói: "Bấm vào đây để chọn những bộ sưu tập danh sách này hiển thị."

Chọn một hay nhiều bộ sưu tập. Sản phẩm thuộc bất kỳ bộ sưu tập nào được chọn sẽ hiện ra, và các bộ sưu tập con cũng được tính — chọn một danh mục cha là bao luôn nhánh bên dưới nó.

Nếu cửa hàng chưa có bộ sưu tập nào, bảng nói thẳng: "Chưa có bộ sưu tập nào để hiển thị — Hãy tạo bộ sưu tập trong cửa hàng, chúng sẽ hiển thị ở đây."

Phân trang

Danh sách chọn được cách tải thêm: phân trang bằng số trang, hoặc một Nút tải thêm (en: Load more).

Bộ phân trang có phần kiểu dáng riêng — canh lề, bo góc, nền, màu chữ, kích thước ô, khoảng cách phía trên.

Trên canvas, nếu dữ liệu hiện có chưa đủ để chia trang, trình chỉnh sửa nói rõ thay vì hiện một bộ phân trang trống: "Chưa đủ để phân trang — {n} mục, mỗi trang {size}." Đây là chuyện của canvas, không phải của cửa hàng thật: trên storefront con số là toàn bộ danh mục của bạn.

Trạng thái trống

Một danh sách có thể không trả về gì — bộ lọc quá hẹp, bộ sưu tập rỗng, hoặc khách tìm một từ không khớp gì.

Bạn thiết kế được trạng thái đó thay vì để lại một khoảng trắng. Bật Đang xem trạng thái trống (en: Previewing the empty state) trên canvas để nhìn thấy và sửa nó: một câu, một biểu tượng, một nút quay lại.

Trình chỉnh sửa cũng cho xem trước trạng thái tải và thẻ mẫu, để bạn kiểm cả ba mà không cần dựng dữ liệu giả.

Bộ lọc cửa hàng

Panel Gian hàng (en: Storefront) có các phần tử lọc — hộp kiểm, nút chọn, và ô màu — để khách tự thu hẹp danh sách.

Một điều đáng biết về cách chúng hoạt động: bộ lọc điều hướng trang, chứ không lọc tại chỗ bằng JavaScript. Bấm một bộ lọc là tải một địa chỉ mới. Nghĩa là kết quả lọc có địa chỉ riêng — khách bookmark được, chia sẻ được, và công cụ tìm kiếm đọc được. Đó là đánh đổi có chủ ý so với việc lọc tức thì.

Xem thử

Trên canvas bạn thấy hình dáng và một ít dữ liệu thật. Việc phân trang, lọc và lặp đầy đủ chạy trên trang đã xuất bản — dùng Xem trước (en: Preview) để thử toàn bộ mà không cần xuất bản.

Bài viết

Cùng cơ chế đó áp dụng cho blog: có phần tử danh sách cho Bài viết và Danh mục blog. Xem Viết bài.