Home >How to Add Pagination on Magento 2 Custom Collection Products

How to Add Pagination on Magento 2 Custom Collection Products

admin.November 5, 2018 |2 Comments

With the trend of mobile e-commerce, some might believe progressive load is more efficient while many others like pagination better. Each works well in specific cases. In respect of pagination, it is good when users are searching for something in particular within a list of results rather than scanning through a flow of information. Hence, today we will discuss about how to add pagination on Magento 2 custom collection products.

Please follow steps as below:

Step 1: Create Module Bss_HelloWorld

In the app/code/Bss/ HelloWorld/ registration.php add the following:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::MODULE,

'Bss_HelloWorld',

__DIR__

);

In the app/code/Bss/ HelloWorld/etc/module.xml add the following:

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"

>

<module name="Bss_HelloWorld" setup_version="1.0.0" />

 </config>

Read more: How to Create Magento 2 Module in 5 Steps

Step 2: Add a Pagination Similarly to That of Category Page, but with Custom Collection Products

1. Create Controller

In the app/code/Bss/ HelloWorld/etc/frontend/ routes.xml add the following:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"
>

<router id="standard">

     <route id="helloworld" frontName="helloworld">

         <module name="Bss_HelloWorld" />

     </route>

</router>

</config>

In the app/code/Bss/ HelloWorld/Controllers/Index/Index.php add the code:

<?php

namespace Bss\HelloWorld\Controller\Index;

use Bss\HelloWorld\Block\Index\Collection;

use Magento\Framework\App\Action\Action;

use Magento\Framework\App\Action\Context;

use Magento\Framework\View\Result\PageFactory;

class Index extends Action

{

/** @var PageFactory */

protected $pageFactory;

/** @var  \Magento\Catalog\Model\ResourceModel\Product\Collection */

protected $productCollection;

/** @var  \Bss\HelloWorld\Block\Index\Collection */

protected $collection;

public function __construct(

     Context $context,

     PageFactory $pageFactory,

        \Magento\Catalog\Model\ResourceModel\Product\CollectionFactory $collectionFactory,

     \Bss\HelloWorld\Block\Index\Collection $collection

)

{

     $this->pageFactory = $pageFactory;

     $this->productCollection = $collectionFactory->create();

     $this->collection = $collection;

     parent::__construct($context);

}

public function execute()

{

            $result = $this->pageFactory->create();

               $collection = $this->productCollection;

               $collection->addFieldToSelect('*');

               //$categoriesId = [1,2,3];

               //$collection->addCategoriesFilter(['in' => $categoriesId]); // Filter with category id

               $collection->addAttributeToFilter('status',\Magento\Catalog\Model\Product\Attribute\Source\Status::STATUS_ENABLED); // Filter enable product

               $this->collection->setProductCollection($collection);

               return $result;

}

}

2. Create Block

Please add the code in the app/code/Bss/ HelloWorld/Block/Index/Collection.php

<?php

namespace Bss\HelloWorld\Block\Index;

use Magento\Catalog\Block\Product\ListProduct;

use Magento\Catalog\Model\ResourceModel\Collection\AbstractCollection;

class Collection extends ListProduct{

public function getLoadedProductCollection()

{

     return $this->_productCollection;

}

public function setProductCollection(AbstractCollection $collection)

{

     $this->_productCollection = $collection;

}

}

3. Create a Frontend Layout

In the app/code/Bss/ HelloWorld /view/frontend/layout/ helloworld_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left"     xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

   <head>

     <title>Hello World</title>

</head>

<body>

     <referenceContainer name="content">

   <block class="Bss\HelloWorld\Block\Index\Collection" name="custom.products.list" as="product_list" template="Magento_Catalog::product/list.phtml">

             <container name="category.product.list.additional" as="additional" />

             <block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">

                 <block class="Magento\Framework\View\Element\Template" as="default"/>

             </block>

             <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto">

                 <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"

                           name="category.product.addto.compare" as="compare"

                           template="Magento_Catalog::product/list/addto/compare.phtml"/>

             </block>

             <block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">

<!-- this is pagination code -->

                 <block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>

             </block>

             <action method="setToolbarBlockName">

                 <argument name="name" xsi:type="string">product_list_toolbar</argument>

             </action>

            </block>

     </referenceContainer>

</body>

</page>

Note:

As above, we use the code of Magento to paginate 

<block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>

Block  : <magento-root>/vendor/magento/module_theme/Block/Html/Pager.php

Template :

<magento-root>/app/code/Magento/Theme/view/frontend/templates/html/pager.phtml

or

<magento-root>/vendor/magento/module_theme/view/frontend/templates/html/pager.phtml

You can find the block declaration in the layout here:

<magento-root>/vendor/magento/module_catalog /view/frontend/layout/catalog_category_view.xml

Step 3: Check Results in Frontend of The Created Module

Get the sample module here.

how to add pagination on Magento 2 custom collection products

We have walked you through how to add pagination on Magento 2 custom collection products. Hope this tutorial is helpful. Please stay stunned with our Magento knowledge base series to get more and more useful information.

< Previous Post
admin
+ posts