Products Block Component Documentation

Overview

The Products Block Component is a component designed to display a list of products. It utilizes dynamic data binding to render a responsive grid of product items based on the provided model. This component includes a section for a header and a list of products, each represented by a productlistitem component. The component also includes methods for interacting with the products, such as adding them to the cart and calculating currency values.

Model Documentation

Model Structure

The model object passed to the ProductsBlockComponent contains the following properties:

id: Unique identifier for the section.

cssClass: Optional CSS class(es) to apply to the section.

header: Optional header text to display above the products.

alignment: Alignment for the header, determining how it should be positioned (1: left, 2: center, 3: right).

collectionIds: Array of collection IDs from which to fetch the products.

Example Model

{
  "id": "products-section-1",
  "cssClass": "custom-products-block",
  "header": "Featured Products",
  "alignment": 2,
  "collectionIds": [12345]
}

Component Structure

The ProductsBlockComponent is defined as follows:

Section Wrapper: The main container for the component, including optional CSS classes and conditional rendering based on the presence of products.

Header Section: Conditionally renders a header if the header property is provided in the model. The header alignment is determined by the alignment property.

Products Grid: Renders a responsive grid of products using the productlistitem component. Each product is represented as a grid item.

HTML Template

JavaScript

Explanation

Conditional Rendering

The main section is rendered only if this.products is not null and contains items.

The header is displayed only if the header property in the model is not null or an empty string.

Product Grid

Products are iterated over using v-for, and each product is rendered as a productlistitem component.

The grid adjusts its layout based on the product's position and the screen size (using Bootstrap classes).

Methods

addToCart: Handles adding a product to the cart, including updating the quantity.

calculateCurrency: Formats the price according to the currency settings.

isLoading: Determines if a specific product is in the process of being added to the cart.

getAlignmentClass: Returns the appropriate Bootstrap class for header alignment.

Usage

To use the ProductsBlockComponent, ensure that the model object provided includes the necessary properties and conforms to the structure described. Import the component and register it with your Vue application. Use it in your template with the appropriate data bindings and props.

Products Block

Products Block Component Documentation#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Conditional Rendering#

Product Grid#

Methods#

Usage#