MAGENTO 2 INFINITE SCROLL & AJAX CATALOG PAGINATION.

Rating:
100%
$99.00
Links
$99.00
Magento 2 Infinite Scroll & Ajax Catalog Extension benefits.

INFINITE SCROLL + AUTOLOAD.

INFINITE SCROLL + LOAD MORE.

AJAX PAGINATION.

For Best Performance and Optimization use this Extension with:

We packed it all up to offer the smoother UX for your customers and made sure that all extensions work smoothly together.

ABOUT MAGENTO 2 INFINITE SCROLL & AJAX CATALOG EXTENSION.

WHY IS THIS IMPORTANT, HOW DOES IT HELP?

Magento 2 Infinite Scroll & Ajax Catalog Extension lets customers explore more content by smoothing the pagination experience or eliminating it altogether.

One of the most important parts of building your online store is creating a website with the least amount of friction. Less friction = better user experience. Needless to say, this results in a higher conversion rate; generating higher revenue and increased customer lifetime value. Category pages and search result pages are the most visited sections of your ecommerce store. It is critical that these are user friendly. Helping customers explore more content and find what they’re looking for gives them longer, more satisfying browsing experiences.

You have the option to go with two major browsing behaviours, infinite scrolling (load more) and pagination. Each UX behaviour has its benefits and we often recommend testing what works best for your customers.

Infinite scroll is commonly used by social media websites such as Facebook, Instagram and Twitter. Your customers were educated to scroll down by the Social Media giants. This user experience works great for mobile devices, which can generate 70- 80% of the total traffic depending on your industry! Another benefit of using Infinite scroll is the dynamic auto loading of new products without refreshing the entire page. Your customers can simply scroll up to view and compare previous products.

Pagination is also very commonly used around ecommerce websites such as Amazon.com and REI.com. Pagination helps divide content into multiple pages. We load the next page by using Ajax technology - reducing friction by removing the need to reload the entire page. When a user reaches the bottom of a page and clicks to go from page #1 to page #5 we dynamically load page #5 content without refreshing the page and automatically scroll the user to the top. Pagination is also helpful for product curation. You can pick the best 50 products from a category to display on the first page. This gives you more control and optimizes the initial presentation to the customer.

The Magento 2 Infinite Scroll Extension doesn’t make you choose between complete auto load or lessening the friction of pagination. We offer the best of both worlds! With this Magento extension, you can select a custom number of pages to auto load then display the load more button. This allows you to quickly display the best products automatically, while cutting down on the initial load and increasing page speed. Your customers won’t get annoyed by never reaching the bottom and you get to display the best items of each category first. It’s a 'win! win! win!' solution.

When implementing this solution we also focused heavily on improving SEO. The solution closely follows Google’s Infinite Scroll implementation. It generates rel=next and rel=prev at the correct page in conjunction with the canonical tag.

Features of the Extension.

  • Ajax Infinite Scroll - infinite product load while scrolling down.
  • Ajax Next Page - loading next page without reloading entire page.
  • Reduce website friction, improve user experience, AND conversion rate.
  • Helps users explore more content.
  • Control the number of the pages that autoload automatically.
  • "Show More" button available after a speficied number autoloaded pages.
  • Customizable notification messages.
  • Possible to disable for search result pages.
  • SEO Optimized functionality.
  • Speed improvements.
  • Clean open source code.
  • Easy installation.

1 MINUTE INSTALLATION GUI.

  • Step 1:
    Before installing please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.3.1. It is recommended to install the extension first on a testing server before you install it on a live (production) server.
  • Step 2:
    Copy the extension files to below paths of your magento 2 instance. If ‘app/code/WeltPixel’ folder is missing, please create it manually:
    app/code/WeltPixel/Backend
    app/code/WeltPixel/AjaxInfiniteScroll
  • Step 3:
    Copy the installation GUI folder 'weltpixel-extension-installation' in the root of your Magento installation. In some Magento configurations the public root folder may be under 'pub' directory.
    www.yourmagentostore.com/weltpixel-extension-installation/
  • Step 4:
    In your browser go to www.yourmagentostore.com/weltpixel-extension-installation/ and simply follow the installation steps from the graphical interface, presented in your browser. See the installation video: 1 Minute Module Installation via browser GUI.
  • Step 5:
    Wooohooo! The extension is now installed on your Magento store! Congrats!

Troubleshooting

If you experienced any issues or limitations with this quick GUI installation, see also SSH Installation below. SSH installation does the same thing but you are required to issue the commands step by step via CLI. Some servers may have high security configurations and may limit the functionality of this GUI Installer.

How to Install via SSH.

  • Step 1:
    Before installing Ajax Catalog and Infinite Scroll on a Magento 2 store please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0 - 2.3.1 It is recommended to install the extension first on a testing server before you install it on a live (production) server.
  • Step 2:
    Copy the extension files to below paths of your magento 2 instance. If ‘app/code/WeltPixel’ folder is missing, please create it manually:
    app/code/WeltPixel/Backend
    app/code/WeltPixel/AjaxInfiniteScroll
  • Step 3:
    Access the root of your magento 2 project from command line and run the following commands:
    php bin/magento module:enable WeltPixel_Backend --clear-static-content
    php bin/magento module:enable WeltPixel_AjaxInfiniteScroll --clear-static-content
    php bin/magento setup:upgrade
  • Step 4:
    Flush any cache that you might still have enabled on your server or in Magento.
  • Step 5:
    Woohoo, the extension is installed!

How to Upgrade the extension.

  • Step 1. Remove extension code under app/code/WeltPixel/AjaxInfiniteScroll before adding the new extension files. The extension may be refactored and old unused files may cause random issues so it's best to only keep the latest version of the files.
  • Step 2. Follow normal installation instructions above.

How to Configure Ajax Infinite Scroll in Magento?

General Settings:

Go to WeltPixel > Ajax Catalog & Infinite Scroll > General Configuration

  • Enable Ajax Catalog and set this option to [ Yes ].
  • Ajax Catalog Mode select Ajax Infinite Scroll

Functionality control for Category, Search and Advanced Search Page. When your store is integrated with external search solutions you may need to disable ajax for search pages in order to achieve default magento behaviour and therefore achieve full compatibility with other solutions.

  • Use Ajax Catalog on Category Page and set this option to [ Yes ]
  • Use Ajax Catalog on Search Page and set this option to [ Yes ]
  • Use Ajax Catalog on Advanced Search Page and set this option to [ Yes ]
Magento 2 Infinite Scroll & Ajax Catalog Extension configuration screen 1.
Magento 2 Infinite Scroll & Ajax Catalog Extension configuration screen 2.

How to take Ajax Infinite Scroll to the Next Level in Magento?

  • "Loading More Items" Text - Define the text that will display after the Load More button is clicked/tapped while the new content is loading
  • Show "Load more" button - In Magento you already predefined how many products to display on the category page. Let’s consider you set it to 25. This option defines after how many pages to display the load more button. Ex. 2 pages will load 2X25 products = 50 then it will display the Load More button. This option creates the balance by keeping your category pages light on initial load, having the ability to reach the footer easily and gives you the opportunity to have control over what is the most important on the page. By setting the value to 0, the Load more button will never display and it will automatically load new products until all the products from the category gets displayed.
  • "Load More" button text - The text that will display on the button “Load More” / “Show More”
  • No More Items Text - The text that will display as soon as all products from the category get loaded
  • Start Loading Early - To Make the scrolling experience even smoother, you have now the option to pre-load products when the customers are approaching the end of the list with new products. Setting this value to Yes will prevent when there is a normal browsing experience the customer from waiting on the next page to load. This option will only work for the first few pages defined in STEP 3 or for all if set to 0
  • Negative Margin - Load new items earlier considering the pixels offset configured. More items will start loading when you have less than specified pixels until the bottom of the page. Ex. 250. This option is only valid if Loading Early is set to Yes
  • Enable canonical and prev/next link elements - We followed closely how Google is recommending the implementation of the rel=next, rel=prev and canonical tag.

How to Configure Ajax Next Page in Magento?

General Settings:

Go to WeltPixel > Ajax Catalog & Infinite Scroll > General Configuration

  • Enable Ajax Catalog and set this option to [ Yes ].
  • Ajax Catalog Mode select Ajax Next Page

Functionality control for Category, Search and Advanced Search Page. When your store is integrated with external search solutions you may need to disable ajax for search pages in order to achieve default magento behaviour and therefore achieve full compatibility with other solutions.

  • Use Ajax Catalog on Category Page and set this option to [ Yes ]
  • Use Ajax Catalog on Search Page and set this option to [ Yes ]
  • Use Ajax Catalog on Advanced Search Page and set this option to [ Yes ]
Magento 2 Infinite Scroll & Ajax Catalog Extension configuration screen 3.
Magento 2 Infinite Scroll & Ajax Catalog Extension configuration screen 4.

How to Optimize Ajax Next Page in Magento?

  • "Loading More Items" Text - Define the text that will display after the Load More button is clicked/tapped while the new content is loading
  • No More Items Text - The text that will display as soon as all products from the category get loaded
  • Enable canonical and prev/next link elements - We followed closely how Google is recommending the implementation of the rel=next, rel=prev and canonical tag.

Change Log.

What’s new in v.1.8.5 - June 7, 2019

  • Small performance improvements.


What’s new in v.1.8.4 - April 25, 2019

  • Added PHP version in the WeltPixel Developer Section.


What’s new in v.1.8.3 - April 3rd, 2019

  • Fixed an issue whereby the Load Previous Items button text could not be changed.
  • Confirmed compatibility for Magento 2.3.1.


What’s new in v.1.8.2 - January 24, 2019

  • Fix for padding issues when swatch option is set to yes on category page.
  • Removed console log.
  • Removed CategoryPage helper dependancy and moved it into the theme instead of this extension.
  • Fixed a bug that prevented correct functionality of Layered Navigation if Infinite Scroll was disabled - compatibility fixes.
  • Helpcenter adjustment, removed zendesk iframe and added a simple link to our Support Center in order to avoid any potential conflicts with other admin js added by 3rd party extensions.
  • Fix for multiple rewritten ImageFactory classes, rewrite check validity, rewrite checks optimizations.


What’s new in v.1.8.0 - December 8, 2018

  • Compatibility adjustments for Magento 2.1.16/2.2.7/2.3.0.
  • PHP 7.2 compatibility added.
  • As Magento 2.3 comes with major core changes, we have provided a different set of files in order to achieve the best performance on each version.


What’s new in v.1.7.5 - October 24, 2018

  • Fixed CTRL+Click issue on category page, now pages open in a new tab.
  • Added compatibility with our newly released WeltPixel Product Labels Extension.
  • Added detailed error messages for invalid licenses for an easier identification of the cause.
  • License improvements, added *.magento.cloud as a valid test domain for Enterprise Cloud environments. Now both ‘magentosite.cloud’ and ‘magneto.cloud’ can be used for testing purpose with the production domain license.

What’s new in v.1.7.4 - August 25, 2018

  • Fixed bundle js error / production mode.
  • Added 'Load previous items' option in admin to configure text / translation.
  • Added compatibility with just released Advance Category Sorting extension by WeltPixel.
  • Admin menu styling to fit screen size 1366px.
  • Fix for production mode with merged JS - missing color pallet display now fixed.


What’s new in v.1.7.3 - August 23, 2018

  • Infinite Scroll compatibility with Layered Navigation - improvements and optimizations.
  • License improvements, adding *.magento.cloud as a valid test domain.


What’s new in v.1.7.2 - August 2, 2018

  • WeltPixel Layered Navigation - Ajax infinite scroll pagination fix.
  • Google Tag Manager compatibility - data layer impressions push for ajax loaded content.
  • Fixed JS srror: Cannot read property length of null”.
  • Fixed swatches loading after ajax call.
  • Fixed admin random logout issue.
  • Licensing improvements, allowing 3 letter domain as valid domain.


What's new in v.1.7.1 - July 11, 2018

  • Compatibility with Magento 2.2.5 both Open Source & Commerce Cloud B2B.
  • Added domain.test & [any_subdomain].domain.test to the list of valid urls for staging/development environments. Added domain validation with port number included for licensing purpose.
  • Added licensing compatibility with Magento B2B.


What’s new in v.1.7.0 - July 5, 2018

  • Added option to enable/disable WeltPixel admin notifications.
  • Show store and server related information under debugging tab: Magento Mode, Magento Edition, Server User, Magento Installation Path, Current server time, Latest cron jobs.
  • Added licensing, license key needs to be generated under weltpixel.com account for purchased product, based on domain name and added under your magento installation.


What’s new in v.1.6.4 - May 16, 2018

  • Compatibility with Magento 2.2.4, logger broken reference fix, changed to rewrite from plugin.
  • Removed extra parameter from store url generated by infinite scroll functionality
  • Fix for ‘previous page load’, now when user hits the back button and returns in listing view mode, will land on the last page loaded with ajax or infinite scroll (ex: listing page 4)


What’s new in v.1.0 - February 23, 2018

  • Initial release
Magento 2 Infinite Scroll & Ajax Catalog Extension Change Log.
Write Your Own Review
You're reviewing:MAGENTO 2 INFINITE SCROLL & AJAX CATALOG PAGINATION.
Your Rating
Recently Viewed
No recently views items
Clear All
Newsletter Fashion Box
Stay Updated!
Newsletter Fashion Box