Hướng dẫn Thêm Infinite Scroll vào Drupal 9

Infinite Scrolling là gì?

Infinite Scrolling là nội dung tải liên tục khi người dùng cuộn xuống trang. Tùy chọn này có thể đi kèm với nút “Tải Thêm” ở cuối trang, nút này sẽ tải nội dung khi nhấp vào.

Các trang vô tận làm cho tương tác của người dùng với trang web tự nhiên hơn vì rất tiện lợi khi không phải nhấp vào trang tiếp theo. Kỹ thuật này đặc biệt phổ biến với các trang web giàu nội dung, mạng xã hội, cửa hàng thương mại điện tử, v.v.

Nó cực kỳ hữu ích cho các trang dài và điều hướng trên thiết bị di động.

Tuy nhiên, tính năng Infinite Scrolling nên được sử dụng cẩn thận để nó không làm phiền người dùng, phân tán sự chú ý của họ khỏi mục tiêu chính của họ hoặc chặn các action khác như form liên hệ, button,...

Ví dụ:

Nếu Footer “biến mất” cùng với các thông tin liên hệ của bạn mỗi khi người dùng cuộn trang, lúc này bạn hãy cân nhắc sử dụng chân trang cố định hoặc di chuyển các liên kết chính sang thanh bên( sidebar).

Hãy thử nút “Tải thêm” để người dùng kiểm soát nhiều hơn và không bao giờ chặn bất cứ thứ gì.

Bạn cũng có thể tăng thêm khả năng sử dụng bằng cách cho phép người dùng chọn số lượng mục được hiển thị trước khi nhấn “Tải thêm”.

Tất cả điều này và hơn thế nữa được cung cấp bởi module có sẵn tên là Views Infinite Scroll trong Drupal, mà bây giờ chúng ta sẽ nói về module này.
Giới thiệu Views Infinite Scroll

Views Infinite Scroll module được sử dụng kết hợp với Views module, một tính năng trong core Drupal.

Module cho phép bạn hiển thị bộ sưu tập hình ảnh, bài báo, sản phẩm, danh sách hồ sơ người dùng hoặc bất kỳ thứ gì khác với các tính năng:

Tự động tải thêm nội dung khi cuộn trang.
Thêm nút "Tải Thêm" để người dùng có thể load thêm nội dung
Và hiển thị một số tùy chọn cho người dùng như số lượng nội dung tải thêm.

The Views Infinite Scroll module is available both for Drupal 7 and Drupal 8. However, the Drupal 8 version has a special bonus — it uses the built-in AJAX system of Drupal Views and requires no third-party libraries. In the next chapter, we will look more closely at how it works.

Module Views Infinite Scroll có sẵn cho cả Drupal 7, Drupal 8 và Drupal 9. Tuy nhiên, phiên bản Drupal 8/9 có một phần đặc biệt hơn đó là nó sử dụng hệ thống AJAX tích hợp sẵn của Drupal Views và không yêu cầu thư viện của bên thứ ba như trong Drupal 7.

Hướng dẫn cài đặt module Views Infinite Scroll

Bước 1 - Cài đặt module

Chúng ta bắt đầu tải và cài đặt module Views Infinite Scroll

cài đặt module drupal - Views Infinite Scroll

Bước 2 - Tạo một View trong Drupal

Bây giờ chúng ta sẽ tạo một View trong Drupal với một vài phần từ trong nó. Trong ví dụ, mình tạo một view với 2 cột là hình ảnh xe.

Khi mà tạo page, chúng ta chọn "Create a page" với giá trị mặc định là "Use a pager" và "10 items to display" .

Bước 3 - Cấu hình Views Infinite Scroll

Trong quản lý Views vừa mới tạo xong, chúng ta chọn "Use pager - Mini" như hình.

Cấu hình Views Infinite Scroll 1 — Cấu hình Views Infinite Scroll

Trong popup mở ra, chọn lại “Infinite Scroll”

Tiếp theo chúng ta cấu hình cho Infinite Scroll.

Chúng ta gắn số lượng item mỗi trang là 4 và quan trọng nhất, chúng ta chọn xuất hiện hoặc ẩn đi nút "Load More" và cũng có thể thay đổi tên nút tùy thích.

Như trong ví dụ này, cho hiển thị và thay đổi tên button thành "View more luxury cars".