Magento 2 Infinite Scroll Extension – User Manual

1.0 Introduction

Infinite scrolling loads web page content continuously as the user scrolls down the web page. Basically, infinite scrolling is the technique of web design to eliminates the pagination from the website. Magento 2 Infinite Scroll Extension by Knowband does the same. It removes the pagination and page reload functionality from the website and make navigation easier for your Magento store visitors to view the next set of products without reloading the web page.

1.1 Admin Benefits of Magento 2 quick scroll extension:

  1. Magento 2 Infinite Scroll extension replaces the pagination system from the website.
  2. Magento 2 fast scroll extension reduces the load time of the website.
  3. Magento 2 quick scroll extension offers sandbox testing option to the admin.
  4. Infinite scroll for Magento 2 extension serves better user experience.
  5. Magento 2 fast scroll module optimizes the navigation of the site.
  6. The admin can specify the number of pages after which, “Load More” will be shown.
  7. Magento 2 endless scroll extension works smoothly with list views as well as the grid view.

2.0 Installation Steps of Infinite scroll for Magento 2 Extension:

The steps to install the Magento 2 quick scroll extension are mentioned below:

1. Buy the Infinite scroll for Magento 2 extension from Knowband. You can download the extension package.

2. The package has a zipped file that contains the user manual and the source code of Magento 2 Infinite Scroll Extension. Unzip the package.

3. Create a folder {Magento root}/app/code/Knowband/Infinitescroll

4. Upload the extracted content in the above folder via FTP manager (like Filezilla or WinSCP – download here: http://filezilla-project.org/).

5. Now run below commands to install the Magento 2 Infinite Scroll Extension:
php -f bin/magento module:enable –clear-static-content Knowband_ Infinitescroll
php -f bin/magento setup:upgrade
php -f bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

6. The extension is now installed and ready for use. In Admin Panel go to “Knowband Extensions > Infinite Scroll”.

You can now configure and use the Magento 2 Infinite Scroll extension.

3.0 Admin Interface

Magento 2 fast scroll extension offers following interfaces to be configured:

Magento 2 Infinite Scroll Extension by Knowband - Admin Interface

  1. General Settings
  2. Look and Feel Settings
  3. Selector Settings
  4. Sandbox Settings

Below is the detailed description of every setting:

3.1 General Settings

Magento 2 Infinite Scroll Extension by Knowband - General Settings

  • Enable the extension: This tab of Magento 2 fast scroll will enable the infinite scroll option. The admin can enable/disable this Magento extension whenever needed.
  • Display End Page Message: This field of Magento 2 quick scroll extension allows the admin to enable/disable the message that would be displayed at the end of the product listing page.
  • End Page Message: This field of Magento 2 endless scroll extension allows the admin to set the text of the end page message that would be displayed at the end of the product listing page.
  • Display Go To Top Link: The Magento 2 infinite scroll module allows the admin to display the “Go To Top Link” option that helps the users to jump to the top of the product listing page.
  • Loading Message: This section of Magento 2 fast scroll extension offers the admin to set the text while loading the content of the web page.
  • Select Scroll Type: The Magento 2 quick scroll extension provides the admin to select the type of scrolling on product listing page. Following options are given in scroll type:

a. Infinite Scrolling

b. Load More Link

  • Load More Label: When “Load More Link” option is selected, this field will be shown. This field of Magento 2 infinite scroll extension let the admin to set the text on Load More link.
  • Frequency to show Load More text: This field of Magento 2 fast scroll extension will work only when “Scroll Type” is “Infinite Scroll”. This field allows the admin to set the frequency of load more link to be shown in the front-end.
  • Loader Delay: This field of Magento 2 infinite scroll module allows the admin to set the minimal number of milliseconds to stay in a loading state.
  • Negative Margin: This field of Magento 2 quick scroll extension will give you the ability to load the new items earlier before you reach to last item of the page. By default, the loader starts loading new items when the user scrolls to the last element of the page. The admin can set the number of products here. For instance, if the number ‘X’ is entered here, then, the loader will start loading before there are X number of products left in the web page.
  • Display Toolbar: This field of Magento 2 endless scroll extension will allow the admin whether to display the Toolbar on product listing page or not.

Below is the screenshot of the toolbar at product listing page:

Magento 2 Infinite Scroll Extension by Knowband - Display Toolbar

3.2 Look and Feel Settings

Magento 2 Infinite Scroll Extension by Knowband - Look and Feel Settings

  • Message Box Background Color: This tab of Magento 2 endless scroll extension offers the admin to set the background color of the message box.
  • Border Color: The Magento 2 Infinite Scroll extension allows the admin to customize the border color of the message box as per his preferences.
  • Text Color: The admin can customize the text color of the message box as per his choice. He can do the same just by selecting the color from the color picker.
  • Go To Top Link Background Color: This field of Magento 2 fast scroll extension allows the admin to set the background color of the “Go To Top Link”. Below is the screenshot of the Go To Top Link:

Magento 2 Infinite Scroll Extension by Knowband - Go to Top link

  • Custom CSS: If the admin wants to add the custom CSS for any element of Infinite scroll for Magento 2 extension, then, he can do the same by adding CSS in this field.
  • Upload Loader Image: This tab of Magento 2 endless scroll extension allows the admin to upload the loader image of his choice. The admin can upload .jpg, .png and .gif format images only. Image size should not be more than 2 MB.

3.3 Selector Settings:

Magento 2 Infinite Scroll Extension by Knowband - Selector Settings

  • Content: This tab of Magento 2 Infinite Scroll extension allows the admin to set the Class name of the Content container.
  • Next: This tab of Magento 2 fast scroll extension offers the admin to set the Class name of Next element.
  • Previous: This tab of Magento 2 quick scroll extension allows the admin to set the Class name of the Previous element.
  • Item Grid: This field of Magento 2 endless scroll extension allows the admin to set the Class name of Grid item.
  • Toolbar: In this field of Magento 2 infinite scroll module, the admin will have to set the Class name of the Toolbar.
  • Pagination: This tab of Magento 2 quick scroll extension allows the admin to set the Class name of the pagination container.

NOTE:

1. Don’t forget to add ‘#’ before id element and ‘.’ before the class element.
2. If you are not familiar with these selector elements please do not edit them.

3.4 Sandbox Settings:

Magento 2 Infinite Scroll Extension by Knowband - Sandbox Testing

The Sandbox Settings tab of the Magento 2 infinite scroll extension offers the admin to test the extension before implementing it on the site.

  • Activate: Enable this field of Magento 2 fast scroll extension to test the extension.
  • Authorized IP Address: In this field of Magento 2 quick scroll extension, enter the IP addresses on which you want infinite scroll active. Make sure that the entered IP addresses are separated by a comma. You can add the IP by clicking on “Add my IP” option.

4.0 Store Front-end

The Magento 2 endless scroll extension will be enabled on the whole website where pagination occurs. The  Infinite scroll for Magento 2 extension would appear at the front as follows:

Magento 2 Infinite Scroll Extension by Knowband - Front End

Magento 2 Infinite Scroll Extension by Knowband - Front End

Magento 2 Infinite Scroll Extension by Knowband - Front End

Find more details about this Infinite scroll for Magento 2 below:

Magento 2 endless scroll extension Admin Demo

Magento 2 fast scroll extension Extension Front Demo

“Also, explore more Magento 2 Extensions for your store.”

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *