Analytics & Reports
Analytics

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