> For the complete documentation index, see [llms.txt](https://docs.carpose.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.carpose.de/vehicle-search-modules/06_vehicle-group.md). # Vehicle Group ### Overview The `Vehicle Group` component displays a closed collection of vehicles — a group curated in the Carposé admin — either as a sortable grid or as a slider. In the grid, users can sort the vehicles by price, mileage, or power in ascending or descending order; the slider has no controls and keeps the group's own order. For presenting a group as a promotion whose cards lead into the vehicle search instead, see [Featured Vehicles](/vehicle-search-modules/07_featured-vehicles.md). ### Installation The component is part of the Carpose application and requires no separate installation. ### Usage To use the Vehicle Group component in a standard HTML page: ```html
``` ### 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 "vehicle-group" (the former "car-group" selector still works but is deprecated and will be removed in v3.0) | | `data-api-key` | string | - | API key for authentication with the Carposé backend services. Required for data fetching. | | `data-id` | string | - | ID of the vehicle group to display. Required — nothing renders without it. | | `data-variant` | string | `tiles` | Layout: `tiles` (responsive grid below a bar with the vehicle count, sorting and payment-type selector) or `slider` (swipeable row — three cards per view, one on narrow screens — without that bar, in the group's own order and default payment type). Any other value falls back to `tiles`. | | `data-card-variant` | string | `classic` | Card layout: `classic` (portrait card, image on top), `compact` (dense portrait card for high-density grids) or `horizontal` (full-width row, image left, price right). | | `data-rates` | boolean | account setting | When `true`, cards show leasing and financing payment options. | | `data-wishlist` | boolean | group setting | Wishlist button on the cards. See [Feature switches](#feature-switches). | | `data-compare` | boolean | group setting | Comparison button on the cards. See [Feature switches](#feature-switches). | | `data-history` | boolean | group setting | Visit history of the detail pages opened from the group. See [Feature switches](#feature-switches). | | `data-price-alert` | boolean | group setting | Price alert on the detail pages opened from the group. See [Feature switches](#feature-switches). | | `data-ai-assistant` | boolean | `false` | AI assistant button. Off unless set to `"true"`; neither the group nor the account setting switches it on. | Like every component, it also accepts the [global color overrides](/readme.md#colors--theming) (`data-primary-color`, `data-secondary-color`, `data-accent-color`, `data-color-scheme`). ### Feature switches Unlike the vehicle search, a group does **not** inherit the account's vehicle-search settings for wishlist, comparison, history and price alert. Each of them is switched on per group in the Carposé admin (vehicle group → tab *Funktionen in der Einbindung*), where all four default to off. The API exposes them on `GET /api/vehicle-groups/{id}` as `wishlistEnabled`, `compareEnabled`, `historyEnabled` and `priceAlertEnabled`. The embed decides in three modes: | Attribute value | Result | | --------------- | ----------------------------------- | | omitted | The group's switch applies (*Auto*) | | `"true"` | On, whatever the group says | | `"false"` | Off, whatever the group says | While the group is loading, all four are off, so nothing appears and disappears again. ### Features * Displays a collection of vehicles belonging to a specific group * Grid or slider layout, picked by `data-variant` * Provides sorting options for the displayed vehicles (grid only): * Price (ascending/descending) * Mileage (ascending/descending) * Power (ascending/descending) * Responsive layout that adapts to different screen sizes * Each vehicle is displayed as a vehicle card in the layout picked by `data-card-variant` ### Example ```html
``` #### Slider ```html
``` The Carposé admin offers this embed ready to copy in the group's *Shortcode* tab. ### Behavior 1. **Data Loading**: * On initialization, the component fetches the group data from the API using the provided vehicle group ID and API key. * The component loads all vehicles associated with the specified group. 2. **Sorting** (grid only): * Users can sort the displayed vehicles using the dropdown menu at the top. The slider has no control bar at all — no count, sorting or payment-type selector — and keeps the order and default payment type configured on the group. * Sorting options include: * Price (ascending/descending) * Mileage (ascending/descending) * Power (ascending/descending) * The default sort order is determined by the vehicle group configuration in the backend. * Users can clear the sorting to return to the default order. 3. **Vehicle Display**: * Vehicles are displayed as vehicle cards in a responsive grid, or in a swipeable row with arrows and bullets for `data-variant="slider"`. * Each card shows key information about the vehicle and resolves in place — the group is a self-contained listing.