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