Product Listing
You are reading an outdated document
Get the latest developer guides on Fynd Partners Help
The product listing page will render a product listing page, which lists all products with their basic details and with all available filter options.
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 |
Context.items
This will contain an array of the first 12 products and every product in this array will have metadata like sample you can use this metadata to render your UI on basis of your requirements.
The below example will render all products name
Example:
<div v-for="(product, index) in context.items" :key="index + product.uid">
<h3>{{ product.name }}</h3>
</div>