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

    Image Added

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

    Image Added

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

  Image Added

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

• Hide image teasers: when enabled hides image teasers in content loaded by the infinity scroll.

• Tile scroll Y offset - Y offset for product tile used when returning from PDP to POP (should take into account f.e. sticky header)

Frontend

Style

To enable styles, uncomment/add this line:

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

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

Customization

Each the of “interaction elements” (button, fake product tile, next items indicator) has it’s own html template which can by fully customized in your project. See elasticsuite-ajaxifier/view/frontend/web/template for reference. When customizing, keep in mind that they have some important data:

• data-direction="<%= data.direction %>" - next/prev, top node must have that property,

• data-url="<%= data.url %>" - url for next/prev page, top node must have that property (can be removed, if it doesn’t have any listener, e.g. indicator).

• data-role="label" - label placeholder, can be removed.