Collection Listing

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.

In platform we can create collections of products basis on some criteria. The page is same as PLP (product listing page). It comes with sorting methods and other filters.

Context	type	Description
is_logged_in	Boolean	User is logged in user or not
favourite_ids	Array	ids of products that are added in the wishlist
compare_slugs	Array	previously compared product slugs
app_features	Object	Application specific configurations
page	Object	Pagination object consist details like has_next, has_previous, `item_total which can be useful to display pagination```
product_count	Number	Total number of products that are live
items	Array	First 12 products that are live
filters	Array	List of filters by which displayed products can be filter out
sort_on	Array	Options to sort products like Ratings, Discounts or price
pageError	Object	It will have error details so that you can handle errors gracefully on theme side
loading	Boolean	While products are being fetched from backend you can indicate progress bar on theme side

theme/templates/pages/collection-listing.vue

     <fdk-infinite-loading class="plp-container">
              <template slot-scope="infiniteLoaderData">
                <div class="product-container">
                  <div
                    v-for="(product, index) in getProducts"
                    :key="index + '-product.uid'"
                  >
                    <fdk-link
                      class="product-wrapper"
                      :link="product.url"
                      :target="!isMobile ? '_blank' : ''"
                      @click.native="redirectToProduct($event, product.url)"
                    >
                      <fy-product-card
                        :product="product"
                        :context="context"
                        :active-product-id="active_product_uid"
                        @slide-up="slideUpEventListener($event)"
                        @slide-down="slideDownEventListener($event)"
                        :global_config="global_config"
                        :listing_price_config="listingPriceConfig"
                        :page_config="page_config"
                      ></fy-product-card>
                    </fdk-link>
                  </div>
                  <fdk-loader
                    id="loader"
                    class="loader-center"
                    v-if="infiniteLoaderData.hasNext"
                  ></fdk-loader>
                </div>
              </template>
            </fdk-infinite-loading>