> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Countdown Plus

> Flexibler Countdown für einmalige oder wiederkehrende Zeiträume

## Allgemeine Beschreibung

Mit dem Countdown Plus-Portlet kannst du einen Countdown an beliebiger Stelle in deinem Onlineshop platzieren. Hierbei kann entweder ein einmaliges Enddatum oder ein wiederkehrendes Enddatum/-uhrzeit gewählt werden.

Außerdem lässt sich der Text vor und hinter dem Countdown nach belieben anpassen. Zusätzlich kannst du entscheiden, was angezeigt werden soll, wenn der Timer abgelaufen ist.

## Featureübersicht

* Einmaliges oder wiederkehrendes Enddatum
* Anpassbarer Text vor und nach dem Countdown
* Verschiedene Darstellungsoptionen für abgelaufene Timer
* Umfangreiche Animationsoptionen

## Settings

### Allgemein

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/_pYT-T7UQFx_LKie/images/countdown-plus-allgemein.png?fit=max&auto=format&n=_pYT-T7UQFx_LKie&q=85&s=6cff126331db86e9bf29d9a75ddf1b4e" alt="Allgemein" width="1342" height="810" data-path="images/countdown-plus-allgemein.png" />
  </Frame>
</div>

<ParamField path="Timer Typ" type="select">
  Wähle, ob der Timer ein einmaliges Enddatum haben soll oder regelmäßig wiederholt werden soll.
</ParamField>

<ParamField path="Fixes Enddatum" type="datetime">
  Wähle hier das fixe Enddatum für den Timer.
</ParamField>

<ParamField path="Text vor dem Countdown" type="string">
  Trage hier den Text ein, der vor dem Countdown ausgegeben werden soll.
</ParamField>

<ParamField path="Text nach dem Countdown" type="string">
  Trage hier den Text ein, der nach dem Countdown ausgegeben werden soll.
</ParamField>

<br />

### Darstellung

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/_pYT-T7UQFx_LKie/images/countdown-plus-darstellung.png?fit=max&auto=format&n=_pYT-T7UQFx_LKie&q=85&s=1cc7f782b1dc38176018443102fc2a22" alt="Darstellung" width="1336" height="1036" data-path="images/countdown-plus-darstellung.png" />
  </Frame>
</div>

<ParamField path="Schreibstil der Zeiteinheiten" type="select">
  Wähle aus verschiedenen Schreibstilen der Zeiteinheiten des Countdowns.
</ParamField>

<ParamField path="Abgelaufene Timerbereiche ausblenden" type="boolean">
  Entscheide, ob abgelaufene Timerbereiche ausgeblendet werden sollen.
</ParamField>

<ParamField path="Hintergrundfarbe des Countdowns" type="color">
  Wähle hier die Hintergrundfarbe, die hinter dem Countdown angezeigt werden soll.
</ParamField>

<ParamField path="Textfarbe des Countdowns" type="color">
  Wähle hier die Textfarbe des Countdowns.
</ParamField>

<ParamField path="Ausrichtung des Inhalts" type="select">
  Wähle, ob der Countdown innerhalb des Containers linksbündig oder zentriert angezeigt werden soll.
</ParamField>

<br />

### Abgelaufener Countdown

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/PAoB158jlYd1TGQa/images/countdown-plus-abgelaufener-countdown.png?fit=max&auto=format&n=PAoB158jlYd1TGQa&q=85&s=bf4dfaa64acb1b01eb4d6c17c63221fd" alt="Abgelaufener Countdown" width="1336" height="436" data-path="images/countdown-plus-abgelaufener-countdown.png" />
  </Frame>
</div>

<ParamField path="Was wird dargestellt, wenn der Timer abgelaufen ist" type="select">
  Entscheide darüber, was angezeigt werden soll, wenn der Timer abgelaufen ist.

  **Optionen:**

  * Komplett ausblenden
  * Timer ausblenden, Alternativtext anzeigen
  * Abgelaufenen Timer darstellen mit Alternativtext

  Die Alternativtexte lassen sich anpassen, wenn die entsprechende Version gewählt wurde.
</ParamField>

<br />

### Animation

<ParamField path="Animationstyp" type="select">
  Entscheide dich für einen der vielen Animationstypen.
</ParamField>

<ParamField path="Dauer" type="number">
  Lege die Dauer der Animation in Sekunden (s) fest.
</ParamField>

<ParamField path="Verzögerung" type="number">
  Definiere die verstrichene Zeit bevor die Animation anfängt.
</ParamField>

<ParamField path="Wiederholung" type="number">
  Lege die Anzahl der Wiederholungen fest.
</ParamField>

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />