Magento 2 Infinite Scroll

Home > Magento Extension User Guides > Magento 2 Infinite Scroll

Magento 2 Infinite Scroll extension allows the customers to explore the complete product catalog on a single page by using Ajax infinite scroll. Surprise your customers with an uninterrupted smooth product browsing on your store.

Table of Content

  1. Extension Installation Guide
  2. Configuration
  3. Load Prev-Next Button Settings
  4. Back to Top Button Settings
  5. DOM Selectors
  6. Infinite Scroll in the Frontend

 

  1. Extension Installation
    • For Magento Marketplace Customers
      • Find the Composer name and version of the extension in the extension’s composer.json file.
      • Login to your SSH and run:
        • composer require meetanshi/magento-2-infinite-scroll
      • 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 aren’t any errors.
      • To verify that the extension installed properly, run the command:
        • php bin/magento module:status Meetanshi_InfiniteScroll
      • By default, the extension is probably disabled.
      • Enable the extension and clear static view files:
        • php bin/magento module:enable Meetanshi_InfiniteScroll --clear-static-content
        • php bin/magento setup:upgrade
        • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
        • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
        • php bin/magento cache:flush
    • For Meetanshi Customers
      • Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
      • Login to your SSH and run below commands step by step:
        • php bin/magento setup:upgrade
        • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
        • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
        • php bin/magento cache:flush
  1. 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.

  1. 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 it’s clicked.

  1. 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.

 

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

  1. 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

    • Automatic scroll type with button page number display style

    • Button type with button page number display style

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

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

 

 

Updated:

Other Articles

and 238 more ...