iScroller (Auto-Pagination) Module

iScroller Module: it is used to implement auto-loading on Category or Product Pages.

How to access?

  • In Kartify: Extensions->Extensions->Modules->Infinite Scroller
  • Edit them to change properties.

Features:

  • Infinite Scroller
  • Scroll to Top
  • Translation
  1. Infinite Scroller:
  • Enable Infinite Scroll [Yes/No]:
    • Yes: Scroll will go till last page.
  • Next Page Loading Mode [Auto/With Button/Mixed(auto-loading + button)]:
    • Auto: Automatically changes at the end of the scroll
    • Button: Button will appear at the end of each page
    • Mixed: first auto-loading for some pages then button will come
  • Stateful scrolling [Yes/No]:
    • Yes: Preserve the log for user last scrolled position, then will send user to the same position
  • Show Page Separator [Yes/No]:
    • Yes: Will show page breaks
  • Enable Animation [Yes/No]:
    • Yes: Smooth auto scroll at the top
  • Product Container CSS Selector [Text]:
    • CSS Selector of the DOM elements which contains the products and where the new ones will be appended
  • Pagination Block CSS Selector [Text]:
    • CSS Selector of the DOM elements which contains pagination links: .pagination-results
  • Product Item CSS Selector [Text]:
    • CSS Selector of the DOM elements which contains image and other accompanying data of a single product
  • Minimum Distance to Bottom [Integer]:
    • In Pixels, when should the next page gets loaded.
  • Enhanced Compatibility [Yes/No]:
    • Yes: Compatibility with 3rd party extensions e.g., new filters
  • Custom Javascript Code [Text]
  • Custom CSS Code [Text]
  • Custom Loading Animation: [Upload Image]

2. Scroll to Top:

  • Enable Scroll to Top Bar [Yes/No]:
  • Scroll Bar Position [Left/Right]:
    • Scroll bar is shown Left or Right
  • Fit to the container [Text]:
    • Bar will stick to left or right if it is left empty
  • Scroll Bar Color
  • Arrow Color
  • Scroll Speed [in milliseconds]: Select 500 for 0.5 second
  • Minimum Width To Show The Bar [Pixels]:
    • In Order to hide the bar in mobile devices
  • Show button at width [Pixels]:
    • After these much pixels, show button

3. Translation:

  • Loading Message [Text]:
    • What message should come in when the next page is loading.
  • Message at the end of list [Text]:
    • What message should come in when/after all the pages are done.
  • Button Label [Text]:
    • If button is activated, the message will appear to load the next page.

How to enable infinite scroll on a particular store?

In Kartify: Design->Layouts->Category-InfiniteScroller->Edit

Add the store for which infinite scroll needs to be added by clicking on “Add” button in blue color on the right.

Incase the store was already active without infinite scroll, and now the infinite scroll needs to be added then, you need to remove the selected store Category Layout.

Follow the mentioned steps to remove the store from Category Layout.

In Kartify: Design->Layouts->Category-InfiniteScroller->Edit

Remove the store by clicking on “remove” button in red color which is next to the store in the list.

Keep in mind, the store has to be removed from “Category” Layout and is added in “Category-InfiniteScroller” Layout to activate infinite scroller on the store.