Offer Slider

Overview

The Offer Slider component displays promotional offers from a specified offer group. It provides three display variants: a carousel slider (default), a tile grid using Ant Design Cards, or a vertical list layout.

Installation

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

Usage

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

<div 
  data-carpose-component="offer-slider"
  data-api-key="your-api-key"
  data-offer-group-id="your-offer-group-id"
  data-variant="slider"
></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-slider"
data-api-key	string	-	API key for authentication with the Carpose backend services. Required for data fetching.
data-offer-group-id	string	-	ID of the offer group to display. Required to fetch the specific collection of offers.
data-variant	string	"slider"	Display variant. Options: "slider", "tile", or "list"

Display Variants

Slider Variant (Default)

The default carousel view with navigation controls:

• Displays one offer at a time with navigation arrows and pagination dots

• Shows image on the left and content on the right on desktop

• Stacks image above content on mobile

Tile Variant

A grid layout using Ant Design Card components:

• Displays offers in a responsive grid (2 columns on desktop, 1 on mobile)

• Each offer is shown in a card with the image at the top

• Includes all offer details in a compact format

List Variant

A vertical list of offers:

• Displays offers in a vertical stacked list

• Each offer shows image on the left and content on the right on desktop

• Stacks image above content on mobile

Features

• Multiple display variants (slider, tile, list)

• Responsive layout that adapts to different screen sizes

• Navigation controls for slider variant

• For each offer displays:

  • Headline and subheadline

  • Offer image

  • Details list

  • Condition information

  • Link to the full offer page

Examples

Default Slider Variant

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

Tile Variant

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

List Variant

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

Behavior

1. Data Loading:

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

   • The component loads all offers associated with the specified offer group.

2. Display Variant:

   • The component renders according to the specified variant (slider, tile, or list).

   • If no variant is specified, it defaults to the slider view.

3. Slider Navigation (Slider variant only):

   • Users can navigate between offers using the arrow buttons or pagination dots.

   • The slider transitions smoothly between offers.

4. Offer Display:

   • Each offer is displayed with its headline, subheadline, and image.

   • Detailed information is shown in a list format.

   • Each offer includes a link to view the full offer details.

   • If available, image captions and consumption text are displayed.

   • Images are displayed with consistent heights (350px for slider and list, adjustable for tiles).

5. Responsive Layout:

   • All variants are fully responsive and adapt to different screen sizes.

   • Layout adjusts automatically based on the device viewport.

Integration with Other Components

The Offer Slider component links to individual offer detail pages, allowing users to get comprehensive information about each promotion. This component is ideal for showcasing special financing deals, seasonal promotions, or featured vehicle offers on the homepage or landing pages.