Brand Listing
The Brand Listing page will display the list of products under the respective brand. This page is same as the product listing page (PLP). This also gives users sort and filter options to enhance the results accordingly.
Arguments
Context | Type | Description |
---|---|---|
items | Object | An array of objects containing details of products. |
product_count | Number | Total number of products that are live |
page | Object | Pagination object consist details like has_next, has_previous, item_total which can be useful to display pagination |
filters | Array | List of filters by which displayed products can be filtered out |
sort_on | Array | Options to sort products such as 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 |
product_meta | Object | product_meta Object which contain banners, logo, name, slug, uid |
compare_slug | Array | Previously compared product slug |
app_feature | Object | Page specific details |
context.items
This will contain an array of objects and every object will contain all necessary details of the product of a respective brand.
Example:
The below example will render a list of products of a brand with details as required.
theme/templates/pages/category-listing.vue
// Brands Listing Example
<div className="brands-listing-container" v-if="context.items && context.items.length">
<ul className="brand-product-list" v-for="product in context.items">
<li className="product-list__item" :key="product.name">
<h2>{{product.name}}</h2>
<span>Dept: {{product.departments}}</span>
<img src="product.logo.url"/>
</li>
...
</ul>
</div>