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:
-
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
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
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
- 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.
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
- Refresh Infinite Scroll update with Ajax use code:
$('body').trigger('collectionUpdated');
If this project help you reduce time to develop, you can give me a cup of coffee :)
