Extension: Category Lazy Load

Category Lazy Load Magento Extension Logo

Performant, cacheable AJAX loading (infinite scroll) of the category product list for Magento 2.4.x. This extension replaces Mirasvit_Scroll.

This package is the core module (backend configuration + AJAX endpoint). The frontend integration for Hyvä is provided by the separate package cleverzoeger/ext.magento2.cleverzoeger.category-lazy-load-hyva (module CleverZoeger_CategoryLazyLoadHyva).

Features

  • Page 1 is rendered server-side and served via the Full Page Cache (Varnish/built-in) as usual.

  • Each further page is loaded on scroll through a dedicated, public-cacheable controller endpoint — only the page fragment is loaded, not the whole page.

  • The complete query string of the current view (filter, sorting, limit) is passed through 1:1, so the loaded collection stays in sync with the filtered/sorted view.

  • Customer-group dependent content (e.g. tier prices) is cached separately via the X-Magento-Vary mechanism.

Requirements

This extension depends on the following module and will be installed together with it via composer:

  • cleverzoeger/ext.magento2.cleverzoeger.base

Implementation

To configure the extension, please go to Stores → Configuration → CLEVER+ZÖGER EXTENSIONS → Category Lazy Load

Backend: Configuration

General Settings

The configuration is scope-aware (Default/Website/Store-View), path cleverzoeger_category_lazy_load/general/*:

  • Aktiv (enabled): Enables the AJAX loading of the category product list (default: off).

  • Modus (mode): How the next page is triggered — infinite (auto load on scroll), infinite_button (auto, then a "load more" button after the configured number of pages) or button (button only).

  • Auslöse-Abstand (trigger_offset): rootMargin of the IntersectionObserver — the higher the value, the earlier the next page is loaded (default: 600).

  • Max. automatische Seiten (max_auto_pages): After this many automatically loaded pages the module switches to a "load more" button. 0 = unlimited.

  • „Vorherige laden"-Button ab Seite (prev_button_from_page): On direct entry to a page ≥ this value (refresh/deep link) previous pages are not loaded automatically but via a "load previous" button. 0 = always automatic, 1 = always button.

  • Ladeanzeige (show_loader): Shows a spinner while loading.

This documentation is brought to you by the clever+zöger GmbH. We are developing Magento projects since 2008 and since 2020 we are Adobe Solution partner. We provide our customers a highly skilled developer team with all kinds of magento certifications. If you have any issues, don’t hesitate to contact us support@clever-zoeger.de. We would be pleased to help you.

Frontend

The frontend integration (Alpine.js / Hyvä) is provided by the separate package CleverZoeger_CategoryLazyLoadHyva.

Screenshots

Backend

Category Lazy Load configuration
Figure 1. Configuration under Stores > Configuration > Clever+Zoeger > Category Lazy Load

Frontend

Category with lazy load
Figure 2. Category product list with lazy loading active (pager replaced by AJAX loading)
Load more products button
Figure 3. 'Load more' button mode – the next products are loaded on button click
Load previous products button
Figure 4. 'Load previous' button on a deep-linked page (e.g. ?p=2)