Skip to main content

Product Listing

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

QG11


Arguments to be passed

ContexttypeDescription
is_logged_inBooleanUser is logged in or not
product_metaObjectproduct_meta Object which contain banners, logo, name, slug, uid
favourite_idsArrayIds of products that are added in the wishlist
compare_slugsArrayPreviously compared product slugs
app_featuresObjectApplication specific configurations
pageObjectPagination object consist details like has_next, has_previous, `item_total which can be useful to display pagination```
product_countNumberTotal number of products that are live
itemsArrayFirst 12 products that are live
filtersArrayList of filters by which displayed products can be filter out
sort_onArrayOptions to sort products based on various factors, such as discounts or price
page_errorObjectIt will have error details so that you can handle errors gracefully on theme side
loadingBooleanWhile 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>

Was this section helpful?