How To Add Pagination to Custom Collection in Magento 2?

Before we discuss Magento 2 pagination settings, let’s first understand the term itself.

What is Magento 2 Pagination?

It is a content management technique without which, your store’s structure would be incomprehensible, thereby leading to a poor user experience. But what exactly is pagination? The simplest way to describe is it that it is a technique which divides the website content into separate pages. Suppose you have 100 products on offer.

Would you show them all at once to a user?

The answer is no. Instead, you may only show 10 or 20 products at once unless the user themselves select a higher limit. The rest of the products are on separate pages. Let’s explain this concept with the help of an example. We are going to search for ‘SSD’ on Amazon UK. The below image shows the search results.

 

Source: Amazon UK

As you can see from the above image, there are over 1,000 results for ‘SSD’. If Amazon decided to show all 1000+ results, imagine the loading time and the data it will consume? To avoid low loading times and consuming the user’s data, Amazon displays only a select few products. The rest can be viewed by clicking on the next pages as shown below.

Source: Amazon UK

This is pagination which is already present on Magento 2 default collections. However, in the case of custom collection in Magento 2 such as image galleries, product collection, etc. pagination has to be added. In the following tutorial, we are going to show you everything there is to know about Magento 2 add pagination to custom collection.

Although there are multiple approaches to achieve this, we have shown the most effective and easy method for pagination of your Magento 2 custom collection. You can also seek assistance about Magento web development from FME Extensions that are not only limited to setting up a website, as our services extends to consultancy, installation, and customisation to your business needs.

What is Magento 2 Product Custom Collection?

Before we delve further into Magento 2 pagination and adding it to the custom collection, let’s understand Magento 2 product custom collection.

The product collection shows your products to the website visitors. To personalise the user experience, you can organise the collections use a wide range of filters and sorting options. While default collections include paginations, custom collections such as blogs or image galleries require users to know about Magento 2 collection limit.

Magento 2 Pagination Settings – Add Pagination to the Custom Collection

Step 1: Create Collection for Pager

protected $newscollectionFactory;

public function __construct(\FME\News\Model\ResourceModel\News\CollectionFactory $newscollectionFactory) 

    { 


        $this->newscollectionFactory = $newscollectionFactory; 


    }

public function getNews()

    {

      //get values of current page. if not the param value then it will set to 1

        $page=($this->getRequest()->getParam('p'))? $this->getRequest()->getParam('p') : 1;

    //get values of current limit. if not the param value then it will set to 1

        $pageSize=($this->getRequest()->getParam('limit'))? $this->getRequest()->getParam('limit') : 1;

        $newsCollection = $this->newscollectionFactory->create();

        $newsCollection->setPageSize($pageSize);

        $newsCollection->setCurPage($page);

        return $newsCollection;

    }

Step 2: Add Collection to Pager and Magento 2 Pagination Set Limit

The following will add pager to layout and set limit for number of items to be displayed on each page.  You can set this limit depending on your requirements, but we would recommend you keep the limit lower so that it does not affect the page loading speed. The limit highly depends on the content size, if you are loading an image collection, you may need to keep it 5 to10 and for loading a simple list you can set it 10-15. The Magento 2 pagination set limit is a tricky task as currently Magento2 itself is pretty slow.

protected function _prepareLayout()

{

    parent::_prepareLayout();

    $this->pageConfig->getTitle()->set(__('News'));


    if ($this->getNews()) {

        $pager = $this->getLayout()->createBlock(

            'Magento\Theme\Block\Html\Pager',

            'fme.news.pager'

        )->setAvailableLimit(array(5=>5,10=>10,15=>15))->setShowPerPage(true)->setCollection(

            $this->getNews()

        );

        $this->setChild('pager', $pager);

        $this->getNews()->load();

    }

    return $this;

}

Step 3: Getting the Child Block of the Pager

This function will return block with pagination and limit items to be displayed.

public function getPagerHtml()

{

    return $this->getChildHtml('pager');
}

Step 4:  Add the Following Code in Phtml File to Call the Pager

getPagerHtml()): ?>

getPagerHtml(); ?>

Final Thoughts on Magento 2 Pagination Settings – Add Pagination to Custom Collection

This concludes our article on Magento 2 pagination settings for custom collection. We have touched upon several important topics, including Magento 2 pagination set limit for custom collections. If you have any queries, don’t hesitate to contact us.

Other Articles You Should Read:

• How To Upload Product Image Placeholders in Magento 2?
• How To Get Order Information by Order ID in Magento 2?
• How to Add, Rename & Remove Product Tabs in Magento 2?

FAQs

1. What do we mean by Magento 2 Pagination?

It is a technique in which store owners divide the website content into multiple pages rather than displaying them all at once. The goal is to enhance the user experience and improve page loading times.

2. What can you tell me about Magento 2 collection limit?

While the default collections include the pagination, custom collection such as blogs or product listings require the admin to know about Magento 2 pagination collection limit. This involves implementing a limit to manage the large collection efficiently.

3. What happens if I don’t set Magento 2 collection limit?

Magento will display the entire collection in one go. In case of a large collection, it will considerably longer to load. On top of it, the customer will have to browse through a very large page. There is a high probability the page will not load correctly due to its size, thereby leading to a negative user experience.

4. Does Magento 2 pagination settings impact my store’s SEO?

Yes, improper pagination negatively impacts your store’s SEO since it can create content duplication issues. For those of you who don’t know, content duplication can lead to your webpages being deindexed altogether. Therefore, use rel="next" and rel="prev" tags.