Category Listing
The category listing page display all the product in any particular category.
Arguments to be passed
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 |
page_error | 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 |
Example of category listing in infinite.
theme/templates/pages/category-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
:link="product.url"
:target="hrefTarget"
class="product-wrapper"
>
<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"
></fy-product-card>
</fdk-link>
</div>
<fdk-loader
id="loader"
class="loader-center"
v-if="infiniteLoaderData.hasNext"
></fdk-loader>
</div>
</template>
</fdk-infinite-loading>