Skip to main content

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.

QG5


Arguments

ContextTypeDescription
itemsObjectAn array of objects containing details of products.
product_countNumberTotal number of products that are live
pageObjectPagination object consist details like has_next, has_previous, item_total which can be useful to display pagination
filtersArrayList of filters by which displayed products can be filtered out
sort_onArrayOptions to sort products such as Ratings, 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
product_metaObjectproduct_meta Object which contain banners, logo, name, slug, uid
compare_slugArrayPreviously compared product slug
app_featureObjectPage 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>


Was this section helpful?