Magento 2 Ajax Catalog and Infinite Scroll.

Rating:
100%
$99.00
Links
$99.00

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 Ajax Catalog.

Why is this important, how does it help?

Help your customers to explore more content and reduce website friction with axaj infinite scroll and ajax pagination.

When building your store, one of your most important task is to build a website that has the least amount of friction. Less friction = better user experience results in 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. Helping your customers to explore more content will result in longer browsing experiences which can help your customers find exactly what they are looking for.

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. You will often find that this user experience is best on mobile devices, which often reaches even 70% to 80% of the total traffic (highly influenced by your industry). Other benefits of using Infinite scroll is that new products will load dynamically without the need of 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 Amazon.com, REI.com. Pagination helps divide content into multiple pages. To reduce friction, we are now loading the next page using the Ajax technology by removing completely the need to reload the entire page. When the users reaches the bottom of the page and click to go from page #1 to page #5 we dynamically load page #5 content without a refresh of a page and automatically scroll the user to the top of the page. Pagination is also helpful in providing the customer an initial best selection of products, you can curate best 50 products from a category that you can promote first on the first page, this will give you a better sense of control of what you display first and stop the initial presentation.

Ajax Infinite Scroll and Catalog doesn’t simply stop at giving you the option to implement Infinite Scroll or to have an Improved user experience with less friction on pagination. We are also giving you the option of both worlds. Now you have the option to start with Infinite Scroll but only load automatically the first few pages (you can define how many) and then display the load more button. The benefits are that you can now display less products on the initial load, which helps you with page speed, then automatically load page two or three of best products. Your customers will not get annoyed by never reaching the bottom of your page and you have better control of displaying the best of the best of each category first. It’s basically a Win! Win! Win! Solution.

When implementing this solution we focused heavily on improving SEO as well. The solution closely follows Google’s Infinite Scroll implementation by generating 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
  • Possibility to disable for search result pages
  • SEO Optimized functionality
  • Speed improvements
  • Clean open source code
  • Easy installation

How to Install.

  • 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.2.5. 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 ( download Backend from HERE if missing)
    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 use Ajax Infinite Scroll.

    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 ]
    weltpixel
    weltpixel

    Advanced Settings:

    • "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 use Ajax Next Page.

    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 ]
    weltpixel
    weltpixel

    Advanced Settings:

    • "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.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
    weltpixel
    Write Your Own Review
    You're reviewing:Magento 2 Ajax Catalog and Infinite Scroll.
    Your Rating