Product Attachments

Documentation: Product Attachments Component

The Product Attachments Component displays a list of product-related attachments, such as documents or files, in a card layout. Each attachment is presented as a clickable button that opens the file in a new tab.

Overview

The Product Attachments Component is used to show downloadable files or documents associated with a product. This component dynamically generates a list of attachments based on the provided data and supports alignment and styling configurations.

Model Documentation

The model object used in the Product Attachments Component contains configuration options that control the component's appearance and behavior.

Model Structure

id: String
A unique identifier for the component. Used for element targeting and CSS styling.

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

header: String
Optional header text to display above the list of attachments.

alignment: Number
Determines the alignment of the header:

1: Align left

2: Center align

3: Align right

Example Model

{
  "id": "productAttachments",
  "cssClass": "attachments-class",
  "header": "Product Documents",
  "alignment": 2
}

Component Structure

The Product Attachments Component is comprised of:

HTML Template: Defines the layout for displaying attachments, including optional headers and alignment.

JavaScript: Manages the data handling and methods for component functionality.

HTML Template

The HTML template outlines the structure and styling for the attachments. It includes an optional header and a series of cards, each representing an attachment.

JavaScript

The JavaScript code manages the attachment data and implements functionality such as alignment and dynamic content rendering.

Explanation

Data Handling: The component extracts attachments from productData.mediaItems, filtering those with a media type of "Attachment" or 2.

Dynamic Rendering: The component uses Vue.js directives to dynamically render the list of attachments and apply appropriate styling based on the model's alignment settings.

Alignment: The getAlignmentClass method returns CSS classes based on the alignment value specified in the model, which affects how the header is positioned.

Usage

To use the Product Attachments Component in your Vue.js application:

Include the Component: Register the ProductAttachments component in your Vue app.

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

Render the Component: Include the ProductAttachments component in your template and provide the necessary data.

Product Attachments

Documentation: Product Attachments Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Usage#