fdk-infinite-loading

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

Infinite Loading Action Component

Tag

fdk-infinite-loading

Description

This action component is used to provide infinite loading functionality in all the listing pages including Product, Collection, Categories and Brands. This action component expose method to make SDK method call for product listing pages.

Props

Key	Type	Description
hasNext	boolean	Flag for calling next page, it becomes true when next page is available
loadData	function	Handler for making SDK method call for next page.
hasNext	boolean	Flag for calling next page, it becomes true when next page is available.
loadmore	function	Handler for making SDK method call for next page.
handleInfinite	boolean	Flag for disabling this action component functionality, when false this action component starts using infinite scrolling action component.

Example

<fdk-infinite-loading>
    <template slot-scope="infiniteLoaderData">
      <div className="product-container">
      <div
        v-for="(product, index) in context.items"
        :key="index + '-product.uid'"
      >
        <div @click="redirectToProduct(product.url)">
            <product-card
                :product="product"
                :context="context"
                ></product-card>
         </div>
      </div>
      <fdk-loader
          id="loader"
          className="loader-center"
          v-if="infiniteLoaderData.hasNext"
       ></fdk-loader>
      </div>
    </template>
</fdk-infinite-loading>