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.

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>