MANAdev Infinite Scrolling extension works fine with most themes out of the box. However, some themes introduce very non-standard HTML structure to product lists in catalog/product/list.phtml template and extra configuration is required to help MANAdev Infinite Scrolling extension to find key HTML elements on product list page. This article describes in detail how infinite scrolling extension works, what key elements in HTML structure it searches for and how it can be configured.

Below is default configuration for infinite scrolling extension which is referenced in the following description. This configuration can be found in app/design/frontend/base/default/layout/mana_infinitescrolling.xml:

<block type="mana_infinitescrolling/engine" name="infinitescrolling_engine">
    <!-- change these CSS selectors if product list in your theme is marked with
        different CSS class than in standard theme -->
    <action method="setData"><key>container</key><value>.category-products</value></action>
    <action method="setData"><key>pager</key><value>.pager</value></action>

    <action method="setData"><key>row_in_list_mode</key><value>li.item</value></action>
    <action method="setData"><key>item_in_list_mode</key><value>li.item</value></action>
    <action method="setData"><key>loader_in_list_mode</key><value>.infinite-scrolling-grid-loader</value></action>

    <action method="setData"><key>row_in_grid_mode</key><value>.products-grid</value></action>
    <action method="setData"><key>item_in_grid_mode</key><value>li.item</value></action>
    <action method="setData"><key>loader_in_grid_mode</key><value>.infinite-scrolling-grid-loader</value></action>

    <!-- change these Magento layout block names if product list blocks in your theme
        are named differently that in standard theme -->
    <action method="setData"><key>list_block_name</key><value>product_list</value></action>

    <!-- add custom additional product list layout modes here -->
    <action method="addModeHandler"><mode>list</mode><handler>Mana/InfiniteScrolling/ListMode</handler></action>
    <action method="addModeHandler"><mode>grid</mode><handler>Mana/InfiniteScrolling/GridMode</handler></action>
    <block type="core/template" name="infinitescrolling_loader" template="mana/infinitescrolling/loader.phtml"/>
</block>

Infinite scrolling feature operates and uses its parameters as follows:

  1. First of all, it hides standard Magento pager block, typically marked with .pager CSS selector. This CSS selector can be overridden in pager parameter in mana_infinitescrolling.xml file.
  2. The extension operates inside product list container HTML element, typically marked with .category-products CSS selector. This CSS selector can be overridden in container parameter in mana_infinitescrolling.xml file.
  3. Infinite scrolling keeps track of how many products are currently in the list and compares it to total product count which is known and remembered on initial page load. Products are typically marked with li.item CSS selector. This CSS selector can be overridden in item_in_list_mode and item_in_grid_mode parameters in mana_infinitescrolling.xml file.
  4. The extension also containtly compares how many rows are left below visible area. In list mode, rows are products themselves and are typically marked with li.item CSS selector. However, in grid mode there are typically several products in a row and row is typically marked with .products-grid CSS selector. These CSS selectors can be overridden in row_in_list_mode and row_in_grid_mode parameters in mana_infinitescrolling.xml file.

If the theme you use marks container, pager, row or product differently, you have to adjust these parameters:

  1. Copy app/design/frontend/base/default/layout/mana_infinitescrolling.xml to app/design/frontend/[YOUR_PACKAGE]/[YOUR_THEME]/layout/mana_infinitescrolling.xml and open it for editing.
  2. Change CSS selectors as required.
  3. Refresh Magento cache in System->Cache Management.