fdk-infinite-loading

You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

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 api call for product listing pages.

Props

Key	Type	Description
hasNext	boolean	flag for calling next page, it becomes true when next page is available
loadmore	function	handler for making api call for next page.
handleInfinite	boolean	flag for disabling this action component functionality, when false this action component start using infinite scrolling action component

Example

<fdk-infinite-loading>
    <template slot-scope="infiniteLoaderData">
      <div class="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"
          class="loader-center"
          v-if="infiniteLoaderData.hasNext"
       ></fdk-loader>
      </div>
    </template>
</fdk-infinite-loading>

Props​

Example​

Props

Example