Magento 2 Infinite Scroll

1
Infinite Scroll for Magento 2 User Guide

• Table of Content
• Extension Installation Guide
• Configuration
• Load Prev-Next Button Settings
• Back to Top Button Settings
• DOM Selectors
• Infinite Scroll in the Frontend

2

• Extension Installation
• For Magento Marketplace Customers
• Find the Composer name and version of the
  extension in the extensions composer.json file.
• Login to your SSH and run
• composer require meetanshi/magento-2-infinite-scro
  ll
• Enter your authentication keys. Your public key
  is your username your private key is your
  password.
• Wait for Composer to finish updating your project
  dependencies and make sure there
• arent any errors.
• To verify that the extension installed properly,
  run the command
• php bin/magento modulestatus Meetanshi_InfiniteSc
  roll
• By default, the extension is probably disabled.
• Enable the extension and clear static view files
• php bin/magento moduleenable Meetanshi_InfiniteSc
  roll --clear-static-content
• php bin/magento setupupgrade
• For Magento version 2.0.x to 2.1.x - php
  bin/magento setupstatic-contentdeploy
• For Magento version 2.2.x above - php
  bin/magento setupstatic-contentdeploy f
• php bin/magento cacheflush
• For Meetanshi Customers

3

• Configuration
• For configuring the extension, login to Magento
  2, move to Stores ? Configuration ? Meetanshi ?
  Infinite Scroll where you can find various
  settings to enable and configure the extension.
• Infinite Scroll Enable the Infinite Scroll
  extension from here.
• Loading Type Select one of the scroll types to
  show products on the category page.
• Automatic on page scroll Automatically loads
  products on page scroll.
• Button on button click Loads the products on
  click of next or previous buttons.
• Combined automatic button Firstly, loads
  products automatically until the defined pages
  and then loads the products on button click. For
  example, Number of Automatically
• Loaded Pages is set to 2, the users will see the
  first 2 pages loaded automatically as a long
  one-pager and then, to load the other next pages,
  the users will need to press a 'Load
• Next' button every time.
• Combined button automatic Firstly, loads
  products on button click and then loads the
  products automatically on scroll. For example,
  Number of Automatically Loaded Pages is set to
  2, the users will see the Load Next button
  between 2nd and 3rd page, and the other next
  pages will be loaded automatically.
• Number of Automatically Loaded Pages Enter the
  number of pages to be autoloaded for
• the Combined type option above.
• Display Page Numbers Set YES to show page
  numbers above the products loaded on the
  category page.
• Page Numbers Display Style Select one of the
  page number display styles if the above option
  is set to Yes.
• Button Shows page number in a button.
• Text with Divider Shows page number as text with
  a divider.
• Text with Background Shows the page number as
  text with background.
• AJAX Loader Image Path Enter path to the loader
  image to show when the products are loading.

4

• 3. Load Prev-Next Button Settings (Optional)
• The extension facilitates to show Load prev and
  Load next buttons if selected any of the
• button related Loading Type.
• Label for the Prev Button Enter label for the
  button users require to click to load previous
  products.
• Label for the Next Button Enter label for the
  button users require to click to load next
  products.
• Button Color Set the color for the next-prev
  load buttons.
• Button Color (Pressed) Set the color for the
  next-prev button after its clicked.

• Back to Top Button Settings
• The extension facilitates to show Back to Top
  button at the bottom of the page so that on
  click, users can scroll to the top of the page.
• Enabled Enable back to top button from here.
• Button Style for Desktop Select one of the
  button display styles for the desktop.
• Arrow Only Shows button with arrow.
• Arrow and Text Shows button with arrow and
  Scroll to Top text.
• Vertical sticky button with arrow and text Shows
  a vertical sticky button with arrow
• and Scroll to Top text.
• Button Style for Mobile Select one of the button
  display styles for the mobile.
• Arrow Only Shows button with arrow.
• Arrow and Text Shows button with arrow and
  Scroll to Top text.
• Button Color Set the color for the back to top
  button.

5
5. DOM Selectors For the custom theme users,
enter DOM selectors for product groups, product
link and footer.

• Infinite Scroll in the Frontend
• After the extension is configured successfully,
  infinite scroll is enabled on the category page
  in frontend.
• Button type infinite scroll with button page
  number display style

6

• Automatic scroll type with button page number
  display style

7

• Button type with button page number display style

8

• Automatic Button type with text with divider
  page number display style

9

• Button Automatic type with text with background
  page number display style