Single brand

This single brand page template is to display the details of a single brand within the store's list of brands. These details can be a short blurb about that brand and a marketing banner for it. It also shows the list of that brand's products as well. The goal here is to group the products of that brand along with information about them on one page for the customer's reference.

Example

Variables

SingleBrandPage

page

object

optional

title

string

optional

Title of the page. May include html tags

slug

enum<string>

optional

Meaningful unique identifier that is readable by users. Slug are predifned valued in which each page has a list of allowed values. Below are the allowed values for this page.

Allowed value:

brands.single

string

optional

represents a unique identifier for the page.

Default:

page.id = brand.id

brand

object (Brand)

optional

Detailed structure of the brand model object showing its fields and data types.

number

required

A unique identifier assigned to a specific brand.

name

string

required

The label given to a particular company, to identify its products in the market. 🌐 Support multi-language

description

string

required

A brief summary of a manufacturer or company, highlighting key attributes, values, and offerings to convey its identity and purpose. 🌐 Support multi-language

banner

string

required

A text or URL linking to a banner file, used as a visual identifier for a brand on a webpage or platform.

logo

string

required

A text-based representation or URL link that directs to the logo file, used as a visual symbol to identify and represent a brand on a webpage or platform.

ar_char

string

required

Brand represented in Arabic character

en_char

string

required

Brand represented in English character

metadata

object

required

products

array[object (Product) {28}]

optional

This object is a Paginator as well, so it performs the pagination function and to specify which view should be used to create pagination links. Example: products.next_page

name

string

required

A label to identify and categoriz a product listing.

price

number

required

The specified cost assigned to a particular item.

status

enum<string>

required

The current condition or state of availability of a particular item within a product catalog or inventory.

Allowed values:

hiddensaleout

product_type

enum<string>

required

Product type classifies items by shared attributes or characteristics, streamlining inventory organization and improving search and categorization efficiency.

Allowed values:

productservicegroup_productscodesdigitalfooddonatingbooking

quantity

number

required

The numerical count of an item in inventory.

unlimited_quantity

boolean

required

Display whether this product has an infinite quantity or is limited.

description

string

required

The detailed information about an item.

Components

The category page includes the Breadcrumbs component. Breadcrumbs are a set of links that indicate the current page and its "ancestors" leading back to the site's homepage.

JS Web Components

Single Brand page may include the following JS Web Components, which are ready-made designs and style-sets of web components for Salla stores.

Products List <salla-products-list>

Hooks

Several hooks can be automatically injected into the Brand page in order to display information about that particular Brand.
For example, the brand details can be displayed before and after the brand information:

Similarly, the details of the brand's products can be displayed before and after, as shown below:

Usage

This page shows brand information along with its products. The object brands contains all of these information. For example, brand.name, brand.description, and brand brand.banner.

Show brand detail, banner in case of any

In addition, this page template receives the object products which represents the list of the brand's products using for-loop. Note that the salla-infinite-scroll is the Salla component that is used to paginate the long list of products.

Beside that, the object page can be used to display informtion about that page.

Example#

Variables#

Components#

JS Web Components#

Hooks#

Usage#

Example

Variables

Components

JS Web Components

Hooks

Usage