Magento 2 AJAX Infinite Scroll

Installation and User Guide for Magento 2 AJAX Infinite Scroll

Table of Contents

• Installation

  • Installation via app/code

  • Installation via Composer

• Configuration Settings for Optimiser Base

  • General Settings

• Configuration Settings for Infinite Scrolling

  • General Settings

• Front-end Site View of Infinite Scroll

  • Infinite Scroll with ‘Load More Button’ on the Category Page

  • Infinite Scroll with Auto Loading on the Category and Search Pages

  • Auto Loading on the Category Page

  • Auto Loading on the Search Page

  • Infinite Scroll with ‘Load More Button’ and Page Number

Installation

• Installation via app/code: Upload the content of the module to your root folder. This will not overwrite the existing Magento folder or files, only the new contents will be added. After the successful upload of the package, run below commands on Magento 2 root directory.

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

• Installation via Composer: Please follow the guide provided in the below link to complete the installation via composer.

Installation Via Composer

Configuration Settings for Optimiser Base

Go to Admin > Stores > Configuration > Scommerce Configuration > Optimiser Base

General Settings

• Enabled – Select “Yes” or “No” to enable or disable the module.

• License Key – Please add the license for the extension which is provided in the order confirmation email. Please note license keys are site URL specific. If you require license keys for dev/staging sites then please email us at [e-mail].

Configuration Settings for Infinite Scrolling

Go to Admin > Stores > Configuration > Scommerce Configuration > Infinite Scrolling

General Settings

• Enabled - Select “Yes” or “No” to enable or disable the module.

• Loading Type - Select loading type “Load Automatically” or “Load with Button”.

• Button Label - Enter button label. This will be shown only when the “Loading Type” is set to “Load with Button”.

• Button Label Font Color - Set font color for "Load with Button" which appears on site front-end.

• Button Label Background Color - Select button label background color. This will be shown only when the “Loading Type” is set to “Load with Button”.

• Button Label Size – Define font size for the “Load with Button” which appears on the site.

• Display Page Numbers (Yes/No) – Select “Yes” to show the page information on the side panel.

• Grid Dom Class – This is the class for grid view of product listing pages.

• List Dom Class – This is the class for list view of product listing pages.

Front-end Site View of Infinite Scroll

• Infinite Scroll with ‘Load More Button’ on the Category Page – You can display the “Load More Button” on the category page by selecting “Load with Button” option from Admin > Stores > Configuration > Infinite Scrolling > Loading Type.

• Infinite Scroll with Auto Loading on the Category and Search Pages – You can implement auto loading on the category and search pages by selecting the option "Load Automatically" from Admin > Stores > Configuration > Infinite Scrolling > Loading Type.

• Auto Loading on the Category Page

• Auto Loading on the Search Page

• Infinite Scroll with ‘Load More Button’ and Page Number – To display Load More Button with page numbers on category and search pages first select option “Load with Button” from Admin > Stores > Configuration > Infinite Scrolling > Loading Type and then select “Yes “ from Admin > Stores > Configuration > Infinite Scrolling > Display Page Numbers. This will display page numbers with Load More Button as shown in screen grab below.

If you have a question related to this extension please check out our FAQ section first. If you can't find the answer you are looking for then please contact [e-mail].