Categories List

The Categories List Component is a Vue.js component designed to display a list of categories in a flexible and customizable manner. It can adapt to different data sources and configurations, rendering category items with images and titles.

Overview

The Categories List Component provides two distinct views:

A navigational view for displaying category items as links with images.

A standard view for showing categories with or without images.

The component leverages Vue.js directives and methods to handle dynamic data and adjust its display based on the provided configuration.

Model Documentation

The Categories List Component uses a model object to control 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)

categoryIds: Array
An array of category IDs used to fetch category data.

Example Model

Here is an example of the model object:

{
  "id": "categories-list-1",
  "cssClass": "custom-categories-list",
  "header": "Featured Categories",
  "alignment": 2,
  "categoryIds": ["cat1", "cat2", "cat3"]
}

Component Structure

The component is implemented using Vue.js features:

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

JavaScript Logic: Manages data retrieval and utility functions.

HTML Template

The HTML template handles the rendering of categories. It uses Vue.js directives to dynamically generate the list based on the CategoriesList data:

JavaScript

The JavaScript section manages data initialization, methods, and lifecycle hooks:

Explanation

Props:

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

Data:

fontstyle: Default font style, currently not used.

fontweight: Default font weight, currently not used.

colors: Array for storing colors, currently not used.

title: Default title, currently not used.

navigations: Stores the list of navigational categories.

categories: Stores the list of categories fetched from the backend.

categoryTitle: Title for the current category if available.

Methods:

getImage(category): Returns the URL for the category image, or a default image if none is available.

getAlignmentClass(alignment): Returns a CSS class based on the alignment value for the header.

Mounted Lifecycle Hook:

mounted(): Fetches category data based on the URL and the component's model configuration. Updates categoryTitle, categories, or navigations as needed.

Define the Vue Component:

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

Create the Template:

Structure the HTML to include sections for navigations and categories.

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 data retrieval and utility functions.

Use the mounted() lifecycle hook to

Documentation: Categories List Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Steps to Create Your Own Categories List Component#

Documentation: Categories List Component