> 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/offer-modules/02_offer-item.md).

# Offer Item

### Overview <a href="#overview" id="overview"></a>

The `Offer Item` component displays a detailed view of a specific promotional offer, including images, conditions, highlights, and an integrated contact form. It serves as the detailed view after clicking on an offer in the Offer Slider.

{% hint style="info" %}
An offer's content — images, prices, condition variants, highlights, the OEM configurator code, and the share link — is configured by the dealer in the Carposé dashboard. The component only needs the offer's `data-id`; it renders whatever the dashboard provides.
{% endhint %}

### Installation <a href="#installation" id="installation"></a>

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

### Usage <a href="#usage" id="usage"></a>

To use the Offer Item component in a standard HTML page:

```html
<div 
  data-carpose-component="offer-item"
  data-api-key="your-api-key"
  data-id="your-offer-id"
></div>
```

### Configuration Attributes <a href="#configuration-attributes" id="configuration-attributes"></a>

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 "offer-item"                                |
| `data-api-key`           | string | -       | API key for authentication with the Carpose backend services. Required for data fetching. |
| `data-id`                | string | -       | ID of the specific offer to display. Required unless the ID is provided in the URL route. |

### Features <a href="#features" id="features"></a>

* Displays comprehensive information about a promotional offer
* Image carousel with thumbnails for easy navigation
* Highlights section with icons and descriptions
* Detailed condition information (price, financing terms, etc.). When an offer defines several **condition variants** — for example different financing or leasing options — they are shown as selectable tabs, each with its own pricing and terms
* Manufacturer (OEM) configurator code with a copy button, plus a link to open the manufacturer's configurator, when provided for the offer
* A share link for the offer
* Related vehicles notification when similar cars are available
* Integrated contact form with:
  * Topic selection
  * Store/location selection
  * Contact information fields
  * Privacy policy consent

### Example <a href="#example" id="example"></a>

```html
<div 
  data-carpose-component="offer-item"
  data-api-key="your-api-key"
  data-id="550e8400-e29b-41d4-a716-446655440000"
></div>
```

### Behavior <a href="#behavior" id="behavior"></a>

1. **Data Loading**:
   * On initialization, the component fetches offer data from the API using the provided offer ID and API key.
   * The component also checks for existing vehicles that match the offer's manufacturer and model criteria.
2. **Image Carousel**:
   * The component displays images in a carousel with navigation controls.
   * Thumbnails below allow direct navigation to specific images.
   * Autoplay is enabled by default but stops when manual navigation occurs.
3. **Related Vehicles**:
   * If matching vehicles exist in inventory, a notification is displayed.
   * Clicking on this notification navigates to the search page with appropriate filters applied.
4. **Contact Form**:
   * The integrated form validates required fields.
   * On submission, it sends the inquiry data to the backend.
   * Success/error messages are displayed after submission.
5. **Content Display**:
   * Headline and subheadline are prominently displayed.
   * Condition information shows price and financing terms.
   * Highlights section displays important features with icons.
   * Additional text content is rendered from HTML.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.carpose.de/offer-modules/02_offer-item.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.