Infinite Scroll Ajax Pagination in Magento 2

Having a smooth user experience is a prime factor that makes an e-commerce website a good one. Infinite Scroll Ajax Pagination in Magento 2 helps every e-commerce website in achieving this.

Need for Infinite Scroll Ajax Pagination

Nowadays, customers in e-commerce websites needn’t have to make more interactions to view the next list of products. Scroll pagination helps in sorting this out without any interactions to view all the products with the smooth user experience.

Implementation of Infinite Scroll Ajax Pagination with Magento 2

Here, we’ll show you how to implement the ajax scroll pagination with a simple javascript method in Magento 2. This will help in increasing the customer user experience. If you know about the query and layout file structure in Magento 2, it’s simple to implement the ajax scroll pagination in the category product list page.

Step 1:

Create app/code/DCKAP/AjaxScroll/etc/module.xml file to create a module using the code below

Step 2:

Create app/code/DCKAP/AjaxScroll/registration.php to register that module using the code below

 

Step 3:
Create a layout catalog_category_view.xml file, which overrides the Magento core list.phtml file, where we will add the script of ajax infinite scroll pagination.
Path: app/code/DCKAP/AjaxScroll/view/frontend/layout/catalog_category_view.xml


     
         
               
                    DCKAP_AjaxScroll::product/list.phtml
               
         
      


 

Step 4:
Create app/code/DCKAP/AjaxScroll/view/frontend/templates/product/list.phtml file
Copy the code of vendor/magento/module-catalog/view/frontend/templates/product/list.phtml
And paste in your list.phtml. Add the jquery script code below in the bottom of the list.phtml file


 

Note: Add the code below at the bottom of the product list items code

    Load more Items


    


 

You can change the text as you wish in the script and HTML.
Step 5:
Open your terminal and go to the Magento 2 root. Run from there with the following command:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush
Once the commands get executed, Infinite ajax scroll pagination will start working. Now, you can smoothly run your e-commerce website without any glitches or interactions to view the upcoming list of products. A user-friendly website is indeed a good website.


Get to experience the best extensions for your Magento Store. Visit our extension store to get Magento 2 extensions for your business.