Magento 2 Infinite Scroll (Magepow Infinite Scroll extension Free)
Infinite scroll for Magento 2 automatically loads product catalog without reloading the page. Your customers will be pleasantly surprised with supportive navigation and high performance of your web store.
See more information:
Highlight Features
-
Automatically load content and images in just one page.
-
Visitors can see all in just one page
-
Display load more chart to help users see more products.
-
Reduce the request load to the server, increase website speed
-
Increase professional animation effects for Magento website.
-
Support to increase website ranking on search engines
-
Responsive
How to use Infinite Scroll extension
Before you continue, ensure you meet the following requirements:
- You have installed magento2
- You are using a Linux or Mac OS machine. Windows is not currently supported. Install Magento 2 Infinite Scroll extension
Step 1 : Download Magento 2 Infinitescroll Extension
Install via composer (recommend)
Run the following commands in Magento 2 root folder:
composer require magepow/infinitescroll
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
Step 2: User guide
Key features of Magento 2 Infinite scroll Extension:
- Ajax scroll without interruption.
- Freely scroll down & See what page of the catalog they're on.
- Automatically loading pages.
- Show Loading Button.
- Possibility to give/ share links to a certain positions.
- Easy to customize.
- Similar technique as seen on Twitter, Facebook.
- Increase the conversion rate at your store.
- Easy to Change Button and Loading Text.
2.1. General configuration
Login to Magento admin > Stores > Configuration > Magepow > Infinitescroll > Enable > Choose Yes to enable the module.
In Stores > Configuration > Magepow > Infinitescroll we set:
- Delay (ms): Delay time for the scroll down, default 600.
- Content: Select for the elements that surrounds the items you will be loading more of (For Ex. = .classname/#id).
- Pagination: Select class, id for paging loaded more.
- Next: Select class, id for the link to to the next page.
- Item: Select for the class name that you want to config all items you will load more.
- Loading text: Place any text you want when loading the page.
- Done text: When the download is completed, the text you configured will appear.
- Loading Image placeholder: The icons you want are displayed while downloading more, you can change it arbitrarily or use Magento's default icons.
- Load More threshold: When this page number is reached, a button to load more products will be shown instead of continue loading products automatically with the scroll.
- Load More button text: Configure the download button text. After you finish configuring, save and clear the cache. Run the following command:
php bin/magento cache:clean
2.2. Result
3. Events
- Refresh Infinite Scroll update with Ajax use code:
$('body').trigger('collectionUpdated');
Donation
If this project help you reduce time to develop, you can give me a cup of coffee :)
