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

7th May 2022
Table of contents

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

Tạo View trong Drupal
Tạo View trong Drupal

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”

cài đặt views infinite scroll-2

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

Cấu hình Views Infinite Scroll -3

Cuối cùng là lưu lại và kiểm tra trang bạn vừa tạo.

Bước 4 - Hiển thị các tùy chọn cho người dùng

Trong phần cài đặt Infinite Scroll có mục  “Exposed options”. Khi chọn vào option này bạn sẽ cho phép người dùng: 

  •     Chọn số lương item xuất hiện
  •     Được nhìn tất cả items
  •     Số Items được bỏ qua từ lúc đầu
Cấu hình Views Infinite Scroll -Tùy Chỉnh Cho Người Dùng
Cấu hình Views Infinite Scroll -Tùy Chỉnh Cho Người Dùng

Bạn hãy thêm style để cho UI được đẹp hơn nhé.

Bạn thấy bài viết này như thế nào?
0 reactions

Add new comment

Image CAPTCHA
Enter the characters shown in the image.
Câu nói tâm đắc: “Điều tuyệt với nhất trong cuộc sống là làm được những việc mà người khác tin là không thể!”

Related Articles

Master list (in progress) of how to get parts of fields for use in Twig templates. I’m always having to look these up, so I thought I’d hash them out and write them down.

Litespeed Cache là plugin WordPress dùng để kết hợp với Web Server LiteSpeed nhằm tăng tốc website WordPress của bạn gấp nhiều lần

In this article, we are going to see how some tools & libraries will make people's lives easier during the development & code review process.

In this tutorial, you will learn how to improve the custom code, theme and module, and general code development by using the pre-commit hook on git

Trước khi tìm hiểu xem PHP Code Sniffer là gì thì các bạn cần phải nắm được coding convention là gì đã.