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.
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:
Configuration Attributes
The component reads configuration from data attributes on the provided element:
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.)
Related vehicles notification when similar cars are available
Integrated contact form with:
Topic selection
Store/location selection
Contact information fields
Privacy policy consent
Example
Behavior
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.
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.
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.
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.
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.
Integration with Other Components
The Offer Item component is typically accessed from the Offer Slider component. When a user clicks on an offer in the slider, they're directed to the detailed view provided by this component. The OfferItem also integrates with the car search functionality by allowing users to view similar vehicles in inventory.
Last updated