Car Group

Overview

The Car Group component displays a collection of vehicles belonging to a specific group with sorting capabilities. Users can sort the vehicles by price, mileage, or power in ascending or descending order.

Installation

The component is part of the Carpose application and requires no separate installation.

Usage

To use the Car Group component in a standard HTML page:

<div 
  data-carpose-component="car-group"
  data-api-key="your-api-key"
  data-car-group-id="your-car-group-id"
></div>

Configuration Attributes

The component reads configuration from data attributes on the provided element:

Attribute	Type	Default	Description
data-carpose-component	string	-	Identifies the component type, must be set to "car-group"
data-api-key	string	-	API key for authentication with the Carpose backend services. Required for data fetching.
data-car-group-id	string	-	ID of the car group to display. Required to fetch the specific group of vehicles.

Features

• Displays a collection of vehicles belonging to a specific group

• Provides sorting options for the displayed vehicles:

  • Price (ascending/descending)

  • Mileage (ascending/descending)

  • Power (ascending/descending)

• Responsive layout that adapts to different screen sizes

• Each vehicle is displayed using the CarCard component

Example

<div 
  data-carpose-component="car-group"
  data-api-key="your-api-key"
  data-car-group-id="550e8400-e29b-41d4-a716-446655440000"
></div>

Behavior

1. Data Loading:

   • On initialization, the component fetches car group data from the API using the provided car group ID and API key.

   • The component loads all vehicles associated with the specified car group.

2. Sorting:

   • Users can sort the displayed vehicles using the dropdown menu at the top.

   • Sorting options include:

     • Price (ascending/descending)

     • Mileage (ascending/descending)

     • Power (ascending/descending)

   • The default sort order is determined by the car group configuration in the backend.

   • Users can clear the sorting to return to the default order.

3. Vehicle Display:

   • Vehicles are displayed in a responsive grid layout using the CarCard component.

   • Each card shows key information about the vehicle.

Integration with Other Components

The Car Group component uses the CarCard component to display individual vehicles, providing a consistent user experience across the Carpose application. This component is ideal for showcasing featured vehicles, special offers, or thematic collections (e.g., SUVs, electric vehicles, etc.).