Magento 2 Infinite Scroll

1. Infinite Scroll for Magento 2 User Guide 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 Infinite Scroll for Magento2 © Meetanshi

2. 1.Extension Installation •For Magento Marketplace Customers oFind the Composer name and version of the extension in the extension’s composer.json file. oLogin to your SSH and run: ▪composer require meetanshi/magento-2-infinite-scroll oEnter your authentication keys.Your public key is your username; your private key is your password. oWait for Composer to finish updating your project dependencies and make sure there aren’t any errors. oTo verify that the extension installed properly, run the command: ▪php bin/magento module:status Meetanshi_InfiniteScroll oBy default, the extension is probably disabled. oEnable 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 oExtract the zip folder and upload our extension to the root of your Magento 2 directory via FTP. oLogin 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 Infinite Scroll for Magento2 © Meetanshi

3. 2.Configuration For configuring the extension, login to Magento 2, move to Stores → 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. oAutomatic – on page scroll: Automatically loads products on page scroll. oButton – on button click: Loads the products on click of next or previous buttons. oCombined – 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. oCombined – 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. oButton: Shows page number in a button. oText with Divider: Shows page number as text with a divider. oText 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. → Configuration → → Infinite Scroll for Magento2 © Meetanshi

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 it’s clicked. 4.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. oArrow Only: Shows button with arrow. oArrow and Text: Shows button with arrow and “Scroll to Top” text. oVertical 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. oArrow Only: Shows button with arrow. oArrow and Text: Shows button with arrow and “Scroll to Top” text. •Button Color: Set the color for the back to top button. Infinite Scroll for Magento2 © Meetanshi

5. 5.DOM Selectors For the custom theme users, enter DOM selectors for product groups, product link and footer. 6.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 Infinite Scroll for Magento2 © Meetanshi

6. •Automatic scroll type with button page number display style Infinite Scroll for Magento2 © Meetanshi

7. •Button type with button page number display style Infinite Scroll for Magento2 © Meetanshi

8. •Automatic + Button type with text with divider page number display style Infinite Scroll for Magento2 © Meetanshi

9. •Button + Automatic type with text with background page number display style Infinite Scroll for Magento2 © Meetanshi