Carpose.de - Documentation
Carpose.de
  • React Integration
    • Getting Started
    • Demo
  • Car Search Modules
    • Car Search Form
    • Car Search Small
    • Car Search (KI)
    • Car Group
  • Offer Modules
    • Offer Slider
    • Offer Item
  • Misc Modules
    • Employee List
    • Store List
  • Components
    • Image Slider Viewer
    • 360° Interior Viewer
    • 360° Exterior Viewer
    • CO2 Class Label
    • Consumption Box
  • Angular Integration [DEPRECATED]
    • Getting Started
    • Slider
    • 360° Interior Viewer
    • 360° Exterior Viewer
Powered by GitBook
On this page
  • Overview
  • Installation
  • Usage
  • Configuration Attributes
  • Display Variants
  • Features
  • Examples
  • Behavior
  • Integration with Other Components
  1. Offer Modules

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.

PreviousCar GroupNextOffer Item

Last updated 2 days ago