Product Attributes

Documentation: Product Attributes Component

The Product Attributes Component is designed to display a list of product attributes in a structured format. It can handle attributes organized into groups or as a flat list, providing flexibility in how product details are presented.

Overview

The Product Attributes Component showcases product attributes either grouped by categories or as a simple list. It is adaptable to different data structures and provides a clear presentation of attribute information.

Model Documentation

The model object for the Product Attributes Component contains configuration properties that control the component's appearance and behavior.

Model Structure

id: String
A unique identifier for the component, used for element targeting and styling.

cssClass: String
Optional CSS class(es) to apply to the component's container.

header: String
Optional header text to display above the attributes list.

alignment: Number
Determines the alignment of the header:

1: Align left

2: Center align

3: Align right

Example Model

{
  "id": "productAttributes",
  "cssClass": "attributes-class",
  "header": "Product Attributes",
  "alignment": 2
}

Component Structure

The Product Attributes Component consists of:

HTML Template: Defines how attributes are displayed, either as grouped or ungrouped items.

JavaScript: Manages data handling and includes methods for checking attribute presence and alignment.

HTML Template

The template handles two main sections based on the data provided:

Grouped Attributes Section:

Displays attributes organized into groups if attributeSet.groups is available and contains items.

Each group is displayed with its title and a list of attributes.

Flat Attributes Section:

Displays attributes as a simple list if attributeSet is not available but attributes contains items.

JavaScript

The JavaScript section manages the component's data and methods, handling both grouped and flat attribute structures.

Explanation

Data Handling: The component initializes with productData, extracting attributeSet and attributes data. It conditionally renders the appropriate section based on the presence of grouped attributes or a simple list of attributes.

Conditional Rendering: Two sections are rendered based on whether attributeSet with groups exists or just a flat list of attributes.

Alignment: The getAlignmentClass method dynamically assigns CSS classes based on the alignment value provided in the model.

Usage

To integrate the Product Attributes Component into your Vue.js application:

Register the Component: Ensure the ProductAttributes component is registered in your Vue app.

Pass the Model: Provide a model object to configure the component’s appearance and behavior.

Include the Component: Use the ProductAttributes component in your Vue template with the appropriate model data.

Product Attributes

Documentation: Product Attributes Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Usage#