ElasticsuiteAjaxifier (optional)

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 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 type: button with “Previous (%p)” label
  • 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 type: Product tile with “Next (%n)” label
  • 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).

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

Each interaction element is a separate object, check elasticsuite-ajaxifier/view/frontend/web/js/infinite-scroll/interaction-element.js for reference.