Infinite Scroll Extension for Magento 2

Installation Information

Module Name: Olegnax_InfiniteScroll
Module Path: app/code/Olegnax/InfiniteScroll 

Check this article to learn how to install Magento 2 extensions.

This extension require Olegnax Core module to be installed. Core module can be installed both Manually and via Composer. Note that both Infinite Scroll and Core modules are already packed with Magento 2 themes by Olegnax, so you don’t need to install it if you use Olegnax theme.

Extension Settings

You can find Magento 2 Infinite Scroll Extension settings in Olegnax menu on the left in your Magento 2 admin panel: Olegnax > InfiniteScroll > Configuration.

General Settings

1. Load Action

This option allows you to choose on what action to load next page and also to disable the extension:

• Disable Module – this option is self explanatory. Set “Load action” as “Disable module” to turn off infinite scroll extension.

If you don’t want to use this extension then it is better to uninstall it: How to Uninstall Magento 2 Extension

• On scoll – this option will replace default pagination with “Load more” button. Click on this button to load next page without reloading the page.

• Button – Manually on button click – this option will replace default pagination with “Load more” button. Click on this button to load next page without reloading the page.

Load more Button text – allows you to change default text for load more button. You can set button text in different languages for different store view.

2. Ajax Progress Loader

This option allows you to choose loader style. You can choose between Magento default loader image, CSS spinner, Theme Preloader or upload your custom image.

Custom Image – by default you need to upload image to your theme base folder. images/preloader.svg will link to images folder in your current theme: app\design\frontend\Olegnax\athlete2\web\images.

Additionally, you can link to image from other module like this: Olegnax_Scroll::images/ajax-loader.gif. This will look for image in app/code/Olegnax/InfiniteScroll/view/frontend/web/images/ajax-loader.gif

Theme Preloader – there are no styles in extension for Theme Preloader so this option will work only if theme has specific styles. Below example of Athlete2 Theme preloader for Button.

Button ajax loader example from Athlete2 Magento 2 Theme – https://athlete2.com

Preloader CSS selectors

Here is an example of less that add svg image for Theme Preloader in case you want to add your own loader styles. Image is placed in base folder app\design\frontend\Vendor\Theme\web\images, e.g.: app\design\frontend\Olegnax\athlete2\web\images

.ox-product-scroll{
    &.ox-product-scroll__loader--theme{
        .ox-product-scroll__loader{
            background: url('@{baseDir}images/preloader.svg');
            background-size: 56px 21px;
            width: 56px;
            height: 21px;
        }
    }
}

Following code demonstrates classes to style Load more button. Class “active” added when loading is in progress.

.ox-product-scroll{
    &.ox-product-scroll__loader--theme{
        &.ox-product-scroll__type--button{
            .ox-product-scroll__button{
                //your buttton styles here
            }
            &.active{
                .ox-product-scroll__button{
                  // button styles when loading is in progress
                }                
            }
        }
    }
}

3. Progress counter

Show Products Amount Info – enable this option to show amount of loaded and total products with progress line. You can also change text for progress block directly in admin panel.

Example of Infinite Scroll with progress line on Athlete2 Magento 2 Theme – https://athlete2.com/

4. Custom DOM Selectors

You can set your own selectors for products container and product item, in case you have custom html structure in your theme.

By default following selectors are set for container and item accordingly: .column.main .products.products-grid, .column.main .products.products-list, .column.main .products-grid.grid and .item.product.product-item