Product 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.
The product listing page will render a product listing page, which lists all the products with its basic details with all the available filter options.
Website URL: https://www.gofynd.com/products
Arguments to be passed
| Context | type | Description |
|---|---|---|
| is_logged_in | Boolean | User is logged in or not |
| product_meta | Object | product_meta Object which contain banners, logo, name, slug, uid |
| 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 based on various factors, such as 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 a metadata like sample. You can use this metadata to render your UI on basis of your requirements.
The below example will render the names of all the products:
Example:
theme/global/components/fy-product-card.vue
<div v-for="(product, index) in context.items" :key="index + product.uid">
<h3>{{ product.name }}</h3>
</div>