Infinite Scroll

The container for infinite scrolling on search products.

Implementation notes: This component expects to display products in rows divisible by the size of page size you are requesting. For example, if you have four products per row, make sure that the page size you are requesting is divisible by four (eg, 12, 16, 24). The reason for this, is that this component keeps track of the page you are on as you fetch, and can start at any page. If it were to start at page 2 with 5 products in a row, and a page size of 12, when you scroll up the offset of page 1 will make the products appear illogical.

Provided Aliases: $infinite

Structure

<gb-infinite-list items="{ $infinite.items }" layout="grid">
  <ul ref="wrapper" class="gb-list__wrapper { isGrid() ? 'gb-list__wrapper--grid' : 'gb-list__wrapper--column' }">
    <li data-is="gb-list-item" class="load first-loader" if="{ $infinite.isFetchingBackward }">
      <gb-infinite-loader label="{ $infinite.loaderLabel }">
        <span>{ $infinite.loaderLabel }</span>
      </gb-infinite-loader>
    </li>
    <li class="load" if="{ $infinite.loadMore && $infinite.prevExists }">
      <gb-button class="load-prev" on-click="{ $infinite.clickPrev }">Load Previous</gb-button>
    </li>
    <li data-is="gb-list-item" class="gb-list__item" each="{ item, i in $list.items }">
      <gb-product product="{ $item }"></gb-product>
    </li>
    <li data-is="gb-list-item" class="load second-loader" if="{ $infinite.isFetchingForward }">
      <gb-infinite-loader label="{ $infinite.loaderLabel }">
        <span>{ $infinite.loaderLabel }</span>
      </gb-infinite-loader>
    </li>
    <li data-is="gb-list-item" class="load" if="{ $infinite.loadMore && $infinite.moreExists }">
      <gb-button class="load-more" on-click="{ $infinite.clickMore }">Load More</gb-button>
    </li>
  </ul>
</gb-infinite-list>

Example Implementation

Add this to your html.

<gb-infinite-scroll load-more="{ true }" loader-label="{ 'Loading content' }"></gb-infinite-scroll>

Properties

Property	Type	Default
`loadMore`	boolean	`false`
`loaderLabel`	string	`'loading...'`
`windowScroll`	boolean	`false`

`loadMore`

true: displays a load more button
false: fetch on scroll

`loaderLabel`

A label used for the gb-infinite-loader tag, displayed when component is fetching.

`windowScroll`

With windowScroll set to false, the scroll listener is attached to the gb-infinite-list tag. In some cases, clients may want the scroll listener on the window, so that the component is not inside of a scrollable container, but instead listens to scrolls on the entire window. This can be done by setting windowScroll to true.

These are configurable via tags: read more under configuration.

State

Property	Type	Default	Description
`items`	[Store.ProductWithMetadata][]	`[]`	An array of products.
`isFetchingForward`	boolean		Indicates whether scroller is fetching forward
`isFetchingBackward`	boolean		Indicates whether scroller is fetching backward
`clickMore()`	function		Fetches forward
`clickPrev()`	function		Fetches backward

Events

Event	Affected State Properties
`'infinite_scroll_updated'`	`isFetchingForward` & `isFetchingBackward`
`'products_updated'`	`items`
`'more_products_added'`	`items`
`'search_changed'`
`'page_updated'`

Child Components: Infinite List

The container for displaying a list of products, with loaders and load more and previous buttons if needed.

This component does not have any properties.
This component does not have any properties in state.
This component does not listen for any events.

Child Components: Infinite Loader

A span with a label, displayed when infinite scroll is fetching.

This component does not have any properties.
This component does not have any properties in state.
This component does not listen for any events.