Brand List

Documentation: Brand List Component

The Brand List Component is a Vue.js component that displays a list of brand items, each represented by an image or name. The component is designed to be highly customizable through the model object, which controls the appearance and functionality.

Overview

The Brand List Component presents a grid of brand items. Each item can either display an image or a textual representation of the brand's name. The component adapts to different layouts based on the provided configuration.

Model Documentation

The Brand List Component uses a model object to configure its behavior and appearance. Here's a breakdown of the properties used in the model:

Model Structure

The model object should have the following properties:

id: String
A unique identifier for the component. This is used for the component’s id attribute and can be used for styling or targeting the component with JavaScript.

cssClass: String
Optional CSS class(es) for the outer container. This allows for additional styling.

header: String
Optional header text to be displayed at the top of the list. This text is rendered as an <h2> element.

alignment: Number
Controls the alignment of the header text. Possible values are:

1: Left alignment (justify-content-start)

2: Center alignment (justify-content-center)

3: Right alignment (justify-content-end)

brandIds: Array
An array of brand IDs used to fetch brand data.

Example Model

Here is an example of the model object:

{
  "id": "brands-list-1",
  "cssClass": "custom-brand-list",
  "header": "Our Brands",
  "alignment": 2,
  "brandIds": ["brand1", "brand2", "brand3", "brand4"]
}

Component Structure

The component is implemented with the following Vue.js features:

HTML Template: Defines the structure and appearance of the brands list.

JavaScript Logic: Manages data retrieval and utility functions.

HTML Template

The HTML template is responsible for rendering the list of brands. It uses Vue.js directives to dynamically generate the list based on the BrandList data:

JavaScript

The JavaScript portion of the component handles data initialization and utility functions:

Explanation

Props:

model: The component receives a model object as a prop, which contains configuration and data used for rendering.

Data:

Data: Stores the model object.

BrandList: Initializes as an empty array and will be populated with brand data fetched from a service.

Methods:

getAlignmentClass(alignment): Returns a CSS class based on the alignment value to control the alignment of the header.

Mounted Lifecycle Hook:

mounted(): Fetches brand data using the _findBrandsByIds method and updates the BrandList with the fetched data.

Steps to Create Your Own Brands List Component

Define the Vue Component:

Use Vue.component() or app.component() to register the component.

Create the Template:

Structure the HTML to include a header and a list of brands.

Use Vue.js directives (v-if, v-for, :class, etc.) for dynamic rendering.

Implement JavaScript Logic:

Define props for the model object.

Initialize data and implement methods for functionality.

Use the mounted() lifecycle hook to fetch and set brand data.

Customize Styling and Layout:

Adjust CSS classes and styles according to your design requirements.

Test and Debug:

Ensure the component functions correctly in different scenarios and screen sizes.

Debug any issues related to data binding or rendering.

Deploy the Component:

Integrate the component into your Vue.js application and deploy it as part of your project.

This documentation provides a comprehensive guide to the Brands List Component, including how to use and customize it according to your needs.

Documentation: Brand List Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Steps to Create Your Own Brands List Component#