Currently module introduces infinite scroll on POP.

Installation

composer require "creativestyle/magesuite-elasticsuite-ajaxifier"

Admin settings

General configuration:

Admin > Stores > Configuration > MAGESUITE > Ajaxifier > General

...

• 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).

Frontend

To enable styles, uncomment/add this line:

import 'MageSuite_ElasticsuiteAjaxifier/web/css/module.scss';

in your-theme/src/entries/category.ts