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.

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

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

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.

Custom Events

The Offer Slider component dispatches custom events for tracking user interactions and component state changes.

For detailed information about the event system, event types, analytics integration, and best practices, see the Custom Events System documentation.

Quick Event Reference

• carpose-offer-selected: When user clicks "zum Angebot" button

• carpose-offer-contact: When user initiates contact about an offer

• carpose-error: When API requests fail or errors occur

Note: The event prefix has been updated from carpose-de- to carpose- and the component loaded event has been removed in the latest version.