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."

Bộ sưu tập không phải nguồn duy nhất

Ô Nguồn (en: Source) còn bốn lựa chọn nữa, và mỗi cái trả lời một câu hỏi khác hẳn:

• Tự động theo trang — danh mục mà chính trang đang là. Trên một trang mẫu Danh mục (/collections/{danh mục}), danh sách đổ đúng sản phẩm của danh mục khách đang mở, nên một trang phục vụ được mọi danh mục. Đặt ở trang khác thì không có danh mục nào để dựa vào, nó hiện toàn bộ sản phẩm — và bảng nói trước: "Trang này không phải trang mẫu Danh mục, nên nguồn này hiện toàn bộ sản phẩm."
• Sản phẩm nổi bật — những sản phẩm bạn đã bật Sản phẩm nổi bật trong form sản phẩm. Trục là cửa hàng, nên nó hiện được ở mọi trang; hợp nhất cho trang chủ.
• Sản phẩm liên quan — những sản phẩm chung bộ sưu tập với sản phẩm mà trang đang hiện, trừ chính nó. Trục là trang, nên đặt ngoài trang sản phẩm thì nó không có gì để dựa vào và hiện trạng thái trống.
• Tên một khối liên kết — danh sách bạn chọn tay cho từng sản phẩm. Xem Khối liên kết.

Ba nguồn cuối không có dự phòng: không ai bật nổi bật, không có gì liên quan, chưa đổ món vào khối — thì kệ trống và nói ra lý do, chứ không lấy đại vài sản phẩm cho đỡ trống. Một kệ điền bừa dưới tiêu đề "Sản phẩm nổi bật" trông y hệt một tính năng đang chạy.

Một điều dễ hiểu nhầm: "Tất cả sản phẩm" cũng tự thu hẹp trên trang mẫu Danh mục — nó đã làm vậy từ lúc trang mẫu ra đời, chỉ là không nói ra. Bảng nhắc bạn ngay tại chỗ: "Trên trang mẫu Danh mục, nguồn này tự thu hẹp theo danh mục đang xem. Chọn 'Tự động theo trang' để nói rõ điều đó." Hai nguồn cho cùng một kết quả ở đó; cái thứ hai chỉ khác ở chỗ nó nói ra, nên người đọc trang sau bạn không phải đoán.

Danh sách bộ sưu tập lấy nguồn ở đâu

Ô Nguồn của Danh sách bộ sưu tập có ba lựa chọn, và cái đầu tiên — cũng là mặc định khi bạn thả xuống — là thứ biến một trang thành cả một cây danh mục:

• Tự động — danh mục con của trang — các danh mục con trực tiếp của danh mục mà trang đang là. Thả xuống trang mẫu Danh mục là xong, không phải chỉnh gì: mở /collections/ao thì lưới hiện các danh mục con của "Áo", mở /collections/giay thì hiện con của "Giày". Bạn không phải tạo một trang cho mỗi danh mục.
• Tất cả bộ sưu tập — toàn bộ bộ sưu tập của cửa hàng, kể cả khi đang đứng trên trang mẫu Danh mục. Nguồn này không tự thu hẹp, khác với "Tất cả sản phẩm" ở trên. Ngoài trang mẫu Danh mục thì nó cho đúng kết quả như nguồn tự động — đó là lý do mặc định dám để ở nguồn tự động: ở mọi trang khác, thả xuống vẫn ra y như trước.
• Bộ sưu tập tùy chọn — đúng những bộ sưu tập bạn chọn, theo thứ tự bạn kéo. Ô Số lượng không cắt danh sách này: bạn đã chọn tay thì không có gì bị bỏ bớt.

Một danh mục không có con thì lưới ra trạng thái trống, chứ không quay về hiện toàn bộ bộ sưu tập — hiện các danh mục khác ở đó trông y như chúng đang nằm bên trong danh mục này.

Ngoài trang mẫu Danh mục, nguồn tự động hiện toàn bộ bộ sưu tập, và bảng nói trước: "Trang này không phải trang mẫu Danh mục, nên nguồn này hiện toàn bộ danh mục." Nó vẫn được đưa ra ở mọi trang là có lý do: một section dùng chung không biết trước nó sẽ nằm ở trang nào.

Phân trang

Nhóm Cách tải thêm (en: Loading mode) trong bảng thuộc tính có ô Kiểu (en: Mode) với bốn lựa chọn:

• Không — chỉ hiện đúng số thẻ bạn đặt, hết. Đây là mặc định.
• Phân trang — một dãy số trang bên dưới lưới.
• Nút tải thêm — một nút, bấm là nối thêm trang kế vào ngay bên dưới.
• Cuộn để tải thêm — vẫn nối thêm như trên, nhưng tự chạy khi khách cuộn tới cuối danh sách. Không có nút nào để bấm.

Điều dễ vấp nhất: ô Số lượng đổi nghĩa. Khi Kiểu là Không, Số lượng (en: Quantity) là mức trần — danh sách hiện bấy nhiêu thẻ rồi thôi. Chọn bất kỳ kiểu nào khác, cùng con số đó trở thành kích thước một trang. Một kệ "Hàng mới" để 4 mà bật phân trang sẽ chia cả danh mục thành từng trang 4 sản phẩm — thường bạn muốn nâng lên 8–12.

Chỉ Phân trang mới có địa chỉ riêng. Bấm số trang là đổi địa chỉ trang web, nên khách bookmark được, bấm Quay lại được, và tải lại vẫn ở đúng trang đó. Hai kiểu nối thêm thì không đổi địa chỉ: khách tải lại trang là quay về đầu danh sách. Đó là cách mọi cửa hàng làm, và là lý do một danh mục dài nên chọn Phân trang chứ không phải Cuộn để tải thêm.

Nhóm này không hiện khi bố cục là dạng trượt (slide). Một carousel đã tự phân trang bằng mũi tên và chấm của nó rồi; đặt thêm một cơ chế nữa lên cùng một danh sách là hai thứ tranh nhau, nên ô đó được ẩn thay vì để đó mà không chạy.

Với Nút tải thêm, ô Chữ trên nút (en: Button text) là chữ khách đọc — viết bằng ngôn ngữ cửa hàng ("Xem thêm"), không phải ngôn ngữ trình chỉnh sửa. Hai kiểu kia không có ô này: dãy số tự đánh số, còn mốc cuộn thì vô hình.

Cả bộ số trang lẫn cái nút đều có bảng kiểu dáng riêng, mở từ chính nhóm đó: canh lề, khoảng cách với lưới, kích thước ô hoặc chiều cao nút, đệm ngang, bo góc, nền, màu chữ, viền — kèm trạng thái di chuột và, riêng bộ số trang, trạng thái đang đứng. Mọi giá trị đều đặt riêng được theo từng khổ màn hình.

Trên canvas, khi dữ liệu chưa đủ hai trang, trình chỉnh sửa nói rõ thay vì hiện một bộ điều khiển trống: "Xem trước — {count} mục, mỗi trang {size}. Trang thật chỉ hiện điều khiển khi có từ 2 trang." Với kiểu cuộn, mốc tải thêm vốn vô hình nên canvas dán nhãn "Cuộn tới đây sẽ tải thêm" để bạn biết nó nằm ở đâu. Đây là chuyện của canvas: trên cửa hàng thật, 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.

Khi khách bấm thì chuyện gì xảy ra

Ô Khi khách bấm (en: When a shopper clicks) trong bảng Cấu hình có ba câu trả lời, và chúng khác nhau về bản chất chứ không phải về tốc độ:

• Lọc danh sách sản phẩm — mặc định, và là cách duy nhất trước tháng 8/2026. Bấm là tải một địa chỉ mới, nên 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ì.
• Mở trang danh mục — mỗi dòng là một liên kết mở trang của chính danh mục đó. Đây không còn là bộ lọc nữa mà là một cây duyệt danh mục: khách không thu hẹp danh sách đang xem, họ rời sang chỗ khác. Chỉ có ở hai nguồn có cây danh mục (danh mục sản phẩm và chuyên mục blog) — chỗ khác thì giá trị không có trang nào để mở. Cũng không có ở phần tử Chọn (select): nó vẽ <option>, mà một <option> thì không mang được liên kết.
• Chỉ phát sự kiện (không tải lại) — không thu hẹp gì cả, chỉ phát một sự kiện wb:filter cho code của bạn. Dành cho khi bạn tự viết phần xử lý.

Một dòng không có slug thì vẫn hiện ra nhưng không thành liên kết — nó không có địa chỉ, và một liên kết trỏ về gốc cửa hàng dưới tên một danh mục thì tệ hơn là không liên kết.

Bộ lọc tự bắt theo trang

Ô Chọn giá trị lọc (en: Select filter value) có lựa chọn Tự động theo trang (en: This page's sub-categories) cho hai nguồn cây danh mục. Nó đọc slug trên địa chỉ và lấy các danh mục con của danh mục mà trang đang phục vụ — cùng cơ chế với lưới bộ sưu tập ở trên, nên một trang mẫu Danh mục là đủ: mở /collections/ao thì thanh lọc ra các nhánh của "Áo", mở /collections/giay thì ra nhánh của "Giày".

Ngoài trang mẫu Danh mục nó không hiện gì, và đây là chỗ nó khác lưới bộ sưu tập một cách có chủ ý. Một lưới trống vẫn giữ chỗ trong bố cục; một thanh lọc mà quay về liệt kê toàn bộ danh mục thì đang nói dối — nó trông y như đang cho bạn các nhánh bên trong thứ bạn đang xem.

Hai ô đi kèm cắt bớt cây cho vừa thanh bên:

• Số cấp hiển thị (en: Levels to show) — 1 là chỉ danh mục gốc. Để trống là hiện hết mọi cấp.
• Số dòng tối đa (en: Most rows) — để trống là không giới hạn.

Hai ô này áp cho cả phần tử Chọn (select), không riêng danh sách hộp kiểm — cùng một bảng Cấu hình thì cùng một luật.

Thứ tự là cấp trước, số dòng sau, và nó quan trọng: giới hạn 5 dòng trên một cây đã cắt còn 1 cấp cho bạn 5 danh mục gốc, còn cắt số dòng trước sẽ cho bạn 5 dòng đầu tiên của lần duyệt cây — thường là một gốc và bốn đứa con của nó. Cả canvas lẫn trang đã xuất bản đều áp dụng đúng thứ tự này.

Đường quay lại: dòng "tất cả"

Khi bộ lọc đã thành cây duyệt, khách đi vào được nhưng chưa có đường ra: bấm "Áo sơ mi" là rời sang trang khác, và không còn dòng nào đưa họ về xem toàn bộ "Áo". Công tắc Thêm dòng "tất cả" (en: Add an "all" row) dựng dòng đó — một liên kết về chính danh mục mà trang đang phục vụ, đặt trên cùng.

Đừng tạo một danh mục "Tất cả" trong cửa hàng để làm việc này. Nó sẽ được xếp vào danh mục thật: đứng ngang hàng với "Áo" và "Giày" trong mọi bộ lọc khác, trong lưới bộ sưu tập, trong ô chọn danh mục của trang sản phẩm và trong chính danh sách danh mục của bạn — một dòng sinh ra để làm liên kết, lại được lưu như một thứ mà sản phẩm có thể thuộc về. Đây là nhu cầu trình bày, nên phần tử tự vẽ lấy.

Ô Chữ trên dòng đó (en: What that row says) là chữ khách đọc. Bật công tắc thì ô tự điền "Tất cả"; xoá trắng thì dòng lấy đúng tên danh mục mà trang đang phục vụ — nên trên /collections/ao nó đọc là "Áo".

Dòng này không bị tính vào Số dòng tối đa, vì nó không phải một trong những giá trị đang bị cắt — nó là đường ra. Đặt giới hạn 5 dòng thì bạn được 5 danh mục và đường quay lại, chứ không phải 4 và đường quay lại.

Công tắc chỉ hiện khi nó có nghĩa: nguồn Tự động theo trang và hành vi Mở trang danh mục. Với lọc tại chỗ thì "tất cả" đã là thứ một bộ lọc chưa ai động tới đang hiển thị rồi.

Chuyên mục blog cũng duyệt được

Mở trang danh mục dùng được cho cả nguồn Chuyên mục blog, và nó dẫn về đúng địa chỉ của blog (/blog-categories/...), không phải địa chỉ bộ sưu tập sản phẩm.

Nhưng Tự động theo trang thì không: cái mà nó bắt theo là danh mục sản phẩm của trang, tức /collections/{slug}. Một trang mẫu chuyên mục blog không có thứ đó, nên với nguồn blog bạn vẫn chọn danh sách bằng tay. Đó là lý do ô Chọn giá trị lọc không chào "Tự động theo trang" khi nguồn là chuyên mục blog.

Một dòng chưa đặt đường dẫn — dù là danh mục sản phẩm hay chuyên mục blog — vẫn hiện nhưng không thành liên kết. Nó không có địa chỉ, và một liên kết trỏ về trang gốc dưới tên một danh mục thì tệ hơn là không liên kết.

Một danh sách cũng từ chối được việc bị thu hẹp: nhóm Được lọc danh sách này trên chính danh sách có hai công tắc — cho ô tìm kiếm và cho bộ lọc. Xem Tìm kiếm trên cửa hàng.

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.

Ô Nguồn của Danh sách bài viết có bốn lựa chọn, xếp cùng một kiểu với danh sách sản phẩm:

• Tự động theo trang — chuyên mục mà chính trang đang là. Trên trang mẫu Blog (/blog-categories/{chuyên mục}), danh sách đổ đúng bài của chuyên mục khách đang mở, nên một trang phục vụ được mọi chuyên mục. Ngoài trang mẫu Blog thì nó hiện toàn bộ bài, và bảng nói trước.
• Tất cả bài viết — toàn bộ bài đã đăng. Trên trang mẫu Blog, nguồn này cũng tự thu hẹp về chuyên mục đang xem, và nhãn đổi thành "Tất cả bài viết trong chuyên mục này" để nói ra điều đó.
• Một chuyên mục cụ thể — bài của đúng chuyên mục bạn chọn, kể cả khi trang đang phục vụ một chuyên mục khác. Một kệ "Đọc thêm từ Đời sống" trên trang Tin tức là như vậy, và nó được đọc riêng chứ không phải lọc lại feed của trang.
• Tên một khối liên kết — kệ bạn chọn tay cho từng bài. Xem Khối liên kết.

Ô Nguồn chỉ chào những khối chứa bài viết; khối chứa sản phẩm không xuất hiện ở đây, vì lý do ngược lại với bên kia.