On your eCommerce store, it is necessary for the store owners to offer quick loading of the products. There are various web technologies that can help the store owners with this functionality on the store.
Ajax (Asynchronous JavaScript and XML) is one such technology that allows a webpage to update the content without reloading the page within the browser dynamically. This is supported by almost all visual browsers.
In Magento 2, Ajax pagination plays a vital role in offering easy loading of products in the catalog. Developed by the industry leaders, there are several Magento 2 extensions built to easily configure Ajax Infinite Scroll in an eCommerce store.
Magento 2 Ajax Scroll Pagination functionality reduces product loading time and offers a wonderful product browsing experience, adding to the overall customer experience of the store.
Steps to Configure the Infinite Ajax Scroll in Magento 2
Step 1. Installation
- Unzip the extension package file into the root folder of your Magento 2 installation.
- Connect to the SSH console of your server:
- Navigate to the root folder of your Magento 2 setup
- Run command as per below sequence,
php -f bin/magento setup:upgrade php -f bin/magento module:enable Magedelight_Ajaxscroll php -f bin/magento setup:static-content:deploy
- Flush store cache
- log out from the backend and log in again
Step 2. Backend Configuration
Enabled: Select "Yes/No" to enable/disable the module
Loading Icon: Specify loader icon to display on front-end
Use Previous: Specify "Yes" to allow load previous search results on front-end
Stop infinite scroll from page: Specify number of pages to display load more button. It will stop infinite scroll from specified page number and display the "load more" button to load next page manually
Text Button Load More: Specify text to display on load more button on front-end
Text Button Load Previous: Specify test to display on load previous button on front-end
Text No More: Specify text to display when there is no more items to show on front-end
Background Color for Load More Button: Specify color hash code to set background color of load more button on front-end
Color Button Load More: Specify color hash code to set text color of load more button on front-end
Enable: Specify "Yes" to enable "Go to Top" button on front-end
Location Offset: Specify the location offset in pixel to display “Go to Top” button
Bottom Offset: Specify the bottom offset in pixel to display "Go to Top" button
Container Size: Specify height and width for “Go to Top” button
Container Radius: Specify thickness in pixel for “Go to Top” button
Hide Under Width: Specify pixel to hide “Go to Top” button
Container Color: Specify color for “Go to Top” button
Arrow Color: Specify color of arrow for “Go to Top” button
A text to show on the button mouse hover: Specify text to show on mouse hover of move to top button
z-index: Specify z-index for button,
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Always Visible: Select "Yes" if you always wish to show move to top button
Trigger: Specify height of page in pixel to display “Go to Top” button
Location: Select the location of move to top button
Go Up Speed: Select the speed to move to top. It has two options fast and slow. Merchant/admin can set the speed of page.
Hope this tutorial helped you with detailed information about the functionality of Ajax Scroll Magento 2 Extension to help your store with easy installation and configuration. Feel free to reach out if there is any issue faced during the configuration process. Our experts will be happy to help!