4.13. Load more button & infinite scroll

The load more button and infinite scroll feature allow scrolling the category pages instead of using pages. This behaviour is known from social media, like facebook or Instagram. Furthermore, the load more button or infinite scroll can be configured to display from a specific viewport, and so it’s feasible to apply the default pagination on desktops while mobile devices will have either the load more button or the infinite scroll.

Open

General configuration:

Admin > Stores > Configuration > MAGESUITE > Ajaxifier > General

• Enabled: turns whole module on or off

Infinite scroll configuration:

Admin > Stores > Configuration > MAGESUITE > Ajaxifier > Infinite scroll:

• Enabled: turns on/off infinite scroll feature

• Media breakpoint: css media breakpoint at which infinite scroll works, e.g. (max-width: 768px). If 0 provided, infinite scroll will work on all resolutions.

• Trigger previous type: how should “Load previous” trigger look like? It will be visible if user access non-first page (second etc). Available options:

  • None (no trigger),

  • Button (button-type trigger).

• Trigger previous label: label of “Load previous” trigger (only if Trigger previous type is not set to None). You can use additional variables here:

  • %c - current qty of fetched products,

  • %t - total qty of fetched products,

  • %p - previous products qty to load,

  • %n - next products qty to load.
    Example: If you to have caption: 'Load more (30 products left)', simply type: Load more (%p products left)

• Trigger next type: how should “Load more” trigger look like? Available options:

  • None (no trigger),

  • Button (button-type trigger).

  • Product tile (last product tile is cloned, blurred and has caption set in Trigger next label field).

• Trigger next label: label of “Load more” trigger (only if Trigger previous type field is not set to None). You can use variables as in Trigger previous label field.

• Auto fetch next: if set to Yes, products will be fetched automatically as user scrolls the page (as on Facebook or Instagram).

• Auto fetch limit: (only if Auto fetch next field is set to Yes) you can specify how many times content will be fetched automatically (e.g. to allow user get to the footer). If 0 is set, then products will be fetched without any limits.

• Observer threshold: (only if Auto fetch next field is set to Yes) distance (in pixels) before the end of the listing, when auto fetch should start.

• Show next items indicator: if set to Yes, text (set in next field) will be displayed under the listing.

• Next items indicator label: text displayed when there are more products to fetch. e.g. Showing %c of %t products. You can use variables as in Trigger previous label field.

• Item selector: product css selector.

• Container selector: products container css selector.

• Toolbar selector: toolbar css selector (toolbar is hidden when infinite scroll works).

Open