Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

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

...