Products Carousel Component Documentation

Overview

The Products Carousel Component is a component that provides a responsive carousel display of product items. It allows for the presentation of products in a sliding carousel format with navigation controls. The component is designed to be flexible and responsive, adapting to various screen sizes and including features such as optional headers and alignment options.

Model Documentation

Model Structure

The model object for the ProductsCarouselComponent 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 carousel.

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": "carousel-1",
  "cssClass": "custom-carousel",
  "header": "Top Rated Products",
  "alignment": 2,
  "collectionIds": ["xxxx"]
}

Component Structure

The ProductsCarouselComponent is structured as follows:

Section Wrapper: The main container for the carousel, 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 alignment is determined by the alignment property.

Carousel Container: Implements a carousel using the tns library with options for responsive item counts and navigation controls.

Carousel Items: Iterates over the products and displays them within the carousel. Each product includes an image and a title, with links to the product details.

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.

Carousel Initialization

The carouselInitialization method configures and initializes the carousel using the tns library. Default options are provided, which can be overridden by options specified in the data-carousel-options attribute of the carousel container.

Methods

carouselInitialization: Sets up the carousel with default and user-defined options.

getAlignmentClass: Returns the appropriate Bootstrap class for header alignment.

Usage

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

Products Carousel

Products Carousel Component Documentation#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Conditional Rendering#

Carousel Initialization#

Methods#

Usage#