Offer Item

Overview

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.

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.

Installation

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

Usage

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

<div 
  data-carpose-component="offer-item"
  data-api-key="your-api-key"
  data-id="your-offer-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 "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

• 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

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

Behavior

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.