> ## 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.

# Versand Countdown

> Informiere Besucher über den nächsten Versandzeitpunkt

## Allgemeine Beschreibung

Das Versand-Countdown Widget erscheint auf der Produktdetailseite und informiert den Besucher über den Zeitpunkt des nächsten Versands. Es zeigt einen Countdown, der angibt, wie viel Zeit noch verbleibt, bis der nächste Versandprozess für das Produkt beginnt.

Dieses direkte Informationsangebot motiviert Kunden, ihre Kaufentscheidung zu beschleunigen, um die Sendung zum nächstmöglichen Zeitpunkt zu erhalten. Indem es die Frist für den bevorstehenden Versand klar kommuniziert, hilft das Widget, die Kundenerwartungen hinsichtlich der Lieferzeit zu managen und fördert schnelle Kaufabschlüsse.

## Featureübersicht

<AccordionGroup>
  <Accordion title="Widget auf allen Produktseiten">
    Das Widget wird automatisch auf all Deinen Produktseiten ausgespielt.
  </Accordion>

  <Accordion title="Auch als Portlet verfügbar">
    Möchtest Du es an mehreren Stellen auf der Produktseite platzieren, kannst Du das Widget ganz einfach per OnPage-Composer an der gewünschten Stelle platzieren.
  </Accordion>

  <Accordion title="Frei definierbare Versandzeiten">
    Definiere selbst an welchen Tagen und bis zu welcher Uhrzeit Bestellungen versendet werden. Auch Feiertage und andere versandfreie Tage lassen sich problemlos hinterlegen.
  </Accordion>

  <Accordion title="Anpassbarer Text">
    Passe den angezeigten Text ganz einfach per Sprachvariable an.
  </Accordion>

  <Accordion title="Anpassbare Styles">
    Passe das Aussehen des Widgets nach Belieben an.
  </Accordion>

  <Accordion title="Verschiedene Einfügeoptionen">
    Entscheide selbst per CSS-Selektor an welcher Stelle das Widget auf der Produktdetailseite ausgespielt werden soll.
  </Accordion>
</AccordionGroup>

## Settings

### Funktionen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/ciOqRPGlzx873gHa/images/versand-countdown-funktionen.jpg?fit=max&auto=format&n=ciOqRPGlzx873gHa&q=85&s=49b5d9ea76cc1b136a52db8e20a5fc7d" alt="Funktionen" width="2060" height="388" data-path="images/versand-countdown-funktionen.jpg" />
  </Frame>
</div>

<ParamField path="Widget aktiv" type="boolean">
  Entscheide, ob das Widget aktiv und automatisch an der per CSS-Selektor gewählten Stelle platziert werden soll.
</ParamField>

<ParamField path="DEBUG Modus aktivieren" type="boolean">
  Hier kannst du den DEBUG Modus aktivieren.

  <Warning>
    Deaktiviere diesen sobald dein Shop produktiv agiert.
  </Warning>
</ParamField>

<ParamField path="Abgelaufener Countdown" type="select">
  Wähle hier was dargestellt werden soll, wenn der Countdown für den heutigen Tag abgelaufen ist.

  **Optionen:**

  * **Widget ausblenden:** Widget wird ausgeblendet und erst am nächsten Versandtag wieder eingeblendet
  * **Alternativtext zeigen:** Zeigt anstelle des Countdowns einen Alternativtext, der sich per JTL-Sprachvariable `shipping_countdown_alt_text` anpassen lässt
  * **Nächstes Versanddatum ausgeben:** Gibt anstelle des Countdowns das nächste Versanddatum aus
  * **Countdown bis zum nächsten Versand:** Widget zeigt einen Countdown bis zum nächsten Versandtag an
</ParamField>

<br />

### Sichtbarkeit

In diesem Bereich kannst du steuern, unter welchen Bedingungen das Widget im Onlineshop für deine Kunden sichtbar sein soll. Du kannst das Widget gezielt bei Produkten ausblenden, indem du dem Artikel das Funktionsattribut `dzm_hide_shipping_countdown` vom Typ Checkbox anhängst und die Checkbox aktivierst.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/ciOqRPGlzx873gHa/images/versand-countdown-sichtbarkeit.jpg?fit=max&auto=format&n=ciOqRPGlzx873gHa&q=85&s=75967ef002900fec7f4612d6960e257f" alt="Sichtbarkeit" width="2062" height="230" data-path="images/versand-countdown-sichtbarkeit.jpg" />
  </Frame>
</div>

<ParamField path="Nur bei Attribut sichtbar schalten" type="boolean">
  Wenn du diesen Schalter aktivierst, wird das Widget standardmäßig ausgeblendet und erscheint nur bei den Artikeln, die das entsprechende Funktionsattribut explizit zugewiesen haben.
</ParamField>

<br />

### Vorschau

Hier siehst du beide Widgets in der Vorschau.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/ciOqRPGlzx873gHa/images/versand-countdown-vorschau.jpg?fit=max&auto=format&n=ciOqRPGlzx873gHa&q=85&s=24ff40e5f9b8e8fa2a955f6079275a77" alt="Vorschau" width="2068" height="350" data-path="images/versand-countdown-vorschau.jpg" />
  </Frame>
</div>

<ParamField path="Demo Datum" type="datetime">
  Stelle hier ein Demo Datum ein, um zu testen wie das Widget für deine Besucher zur angegebenen Zeit ausgespielt wird.
</ParamField>

<ParamField path="Vorschau Versandcountdown" type="string">
  Zeigt eine Live-Vorschau des Versand-Countdown-Widgets mit deinen aktuellen Einstellungen.
</ParamField>

<br />

### Wir versenden... außer an folgenden Tagen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/ciOqRPGlzx873gHa/images/versand-countdown-versendung.jpg?fit=max&auto=format&n=ciOqRPGlzx873gHa&q=85&s=74da715978bcb8046dffe4fbbf4179e3" alt="Wir versenden" width="2070" height="1358" data-path="images/versand-countdown-versendung.jpg" />
  </Frame>
</div>

<ParamField path="Montag – Sonntag" type="boolean + time">
  Aktiviere die Tage, an denen du versendest, und lege jeweils die späteste Uhrzeit fest, bis zu der Bestellungen noch am selben Tag versendet werden.
</ParamField>

<ParamField path="Region" type="select">
  Wähle eine passende Feiertags-Region für deinen Versand. Klicke anschließend auf "Feiertage aktualisieren", um die Feiertagsliste zu befüllen.
</ParamField>

<ParamField path="Feiertag" type="select">
  Wähle einen Feiertag aus der Liste und klicke auf "Hinzufuegen", um ihn als versandfreien Tag einzutragen. Über "Alle hinzufuegen" kannst du alle Feiertage der gewählten Region auf einmal hinzufügen.
</ParamField>

<ParamField path="Eigener versandfreier Tag" type="date">
  Trage hier einen eigenen versandfreien Tag ein. Vergib einen Namen (nur intern sichtbar), wähle das Datum und klicke auf "Hinzufuegen".
</ParamField>

<br />

### Styles

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/ciOqRPGlzx873gHa/images/versand-countdown-styles.jpg?fit=max&auto=format&n=ciOqRPGlzx873gHa&q=85&s=4f15025f2b523e40f2b34df4f8478298" alt="Styles" width="2066" height="1641" data-path="images/versand-countdown-styles.jpg" />
  </Frame>
</div>

<ParamField path="Icon bei laufendem Countdown" type="icon">
  Wähle hier ein passendes Icon für das Widget oder entferne es, wenn du kein Icon haben möchtest.
</ParamField>

<ParamField path="Farbe Icon Hauptwidget" type="color">
  Wähle die Farbe des Icons bei laufendem Countdown. Wenn du die Standardfarbe wählen willst, entferne die Farbe aus dem ColorPicker.
</ParamField>

<ParamField path="Icon bei abgelaufenem Countdown" type="icon">
  Wähle hier ein passendes Icon für das Widget bei abgelaufenem Countdown, wenn du kein Icon haben möchtest, entferne es einfach.
</ParamField>

<ParamField path="Farbe Icon abgelaufener Countdown" type="color">
  Wähle hier die Farbe, die für das Icon beim abgelaufenen Countdown angezeigt werden soll.
</ParamField>

<ParamField path="Icon bei Alternativtext" type="icon">
  Wähle hier ein passendes Icon für das Widget, wenn ein Alternativtext angezeigt wird.
</ParamField>

<ParamField path="Farbe Icon Alternativtext" type="color">
  Wähle hier die Farbe, die für das Icon beim Alternativtext angezeigt werden soll.
</ParamField>

<ParamField path="Schreibstil des Countdowns" type="select">
  Wähle hier aus verschiedenen Schreibstilen für den Countdown. Die Vorschau zeigt die Änderungen sofort an, nachdem du unten rechts auf speichern gedrückt hast.

  **Optionen:**

  * **Volltext:** Zeigt den Countdown als vollständigen Text an
  * **Kurz:** Kompakte Darstellung des Countdowns
  * **Digital:** Digitale Uhranzeige
  * **Digital mit Tagen:** Digitale Uhranzeige mit zusätzlicher Tagesangabe
  * **nur Enddatum anzeigen:** Zeigt ausschließlich das Enddatum an
  * **Unformatiert (für eigenes CSS):** Ausgabe ohne Formatierung für individuelle CSS-Gestaltung
  * **Unformatiert mit Tagen (für eigenes CSS):** Ausgabe mit Tagen, ohne Formatierung für individuelle CSS-Gestaltung
</ParamField>

<ParamField path="Style des Hauptwidgets" type="select">
  Wähle einen Style für das Hauptwidget aus.

  **Optionen:**

  * **Clean:** Aufgeräumte, minimalistische Darstellung ohne Rahmen
  * **Card:** Widget wird als Karte mit Hintergrund dargestellt
  * **Bordered:** Widget mit sichtbarem Rahmen
  * **Full:** Widget erstreckt sich über die volle Breite
  * **Alert Info:** Darstellung als informativer Hinweis
  * **Alert Warning:** Darstellung als Warnhinweis
  * **Alert Danger:** Darstellung als Gefahrenhinweis
  * **Alert Success:** Darstellung als Erfolgshinweis

  <Tip>
    **Für Profis:** Du kannst ein eigenes Custom Template im Pluginordner anlegen und das Widget völlig frei gestalten. Erstelle dazu ein File unter:

    `dzm_opc_salesbooster/Portlets/DZMObservers/DZMObservers_custom.tpl`
  </Tip>
</ParamField>

<ParamField path="Style des abgelaufenen Countdowns" type="select">
  Wähle einen Style für das Widget, wenn der Timer abgelaufen ist.

  **Optionen:**

  * **Clean:** Aufgeräumte, minimalistische Darstellung ohne Rahmen
  * **Card:** Widget wird als Karte mit Hintergrund dargestellt
  * **Bordered:** Widget mit sichtbarem Rahmen
  * **Full:** Widget erstreckt sich über die volle Breite
  * **Alert Info:** Darstellung als informativer Hinweis
  * **Alert Warning:** Darstellung als Warnhinweis
  * **Alert Danger:** Darstellung als Gefahrenhinweis
  * **Alert Success:** Darstellung als Erfolgshinweis
</ParamField>

<ParamField path="Style des Alternativtexts" type="select">
  Wähle einen Style für das Widget, wenn unter *Funktionen > abgelaufener Countdown > Alternativtext anzeigen* gewählt wurde.

  **Optionen:**

  * **Clean:** Aufgeräumte, minimalistische Darstellung ohne Rahmen
  * **Card:** Widget wird als Karte mit Hintergrund dargestellt
  * **Bordered:** Widget mit sichtbarem Rahmen
  * **Full:** Widget erstreckt sich über die volle Breite
  * **Alert Info:** Darstellung als informativer Hinweis
  * **Alert Warning:** Darstellung als Warnhinweis
  * **Alert Danger:** Darstellung als Gefahrenhinweis
  * **Alert Success:** Darstellung als Erfolgshinweis
</ParamField>

<ParamField path="Farbe des Countdowns" type="color">
  Färbt den Countdown. Wenn du die Standardfarbe wählen willst, entferne die Farbe aus dem ColorPicker.
</ParamField>

<ParamField path="Farbe des abgelaufenen Countdowns" type="color">
  Färbt den Text vor und hinter dem Countdown, wenn der Countdown abgelaufen ist. Wenn du die Standardfarbe wählen willst, entferne die Farbe aus dem ColorPicker.
</ParamField>

<ParamField path="Farbe des Textes vor und nach dem Countdown" type="color">
  Färbt den Text vor und nach dem Countdown. Wenn du die Standardfarbe wählen willst, entferne die Farbe aus dem ColorPicker.
</ParamField>

<ParamField path="Farbe des Texts bei abgelaufenem Countdown" type="color">
  Nur notwendig wenn bei "Abgelaufener Countdown: Nächstes Versanddatum ausgeben" oder "Countdown bis zum nächsten Versand starten" ausgewählt ist. Wenn du die Standardfarbe wählen willst, entferne die Farbe aus dem ColorPicker.
</ParamField>

<ParamField path="Farbe des Texts bei Alternativtext" type="color">
  Nur notwendig wenn bei "Abgelaufener Countdown: Alternativtext anzeigen" ausgewählt ist. Wenn du die Standardfarbe wählen willst, entferne die Farbe aus dem ColorPicker.
</ParamField>

<br />

### Einfügeoptionen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/ciOqRPGlzx873gHa/images/versand-countdown-einfuegeoptionen.jpg?fit=max&auto=format&n=ciOqRPGlzx873gHa&q=85&s=f724d8a34a0e9533964650cdb82d62d4" alt="Einfügeoptionen" width="2066" height="318" data-path="images/versand-countdown-einfuegeoptionen.jpg" />
  </Frame>
</div>

<ParamField path="Einfügemethode" type="select">
  Wähle aus verschiedenen Einfügemethoden, wie das Widget an den CSS-Selektor eingefügt werden soll.

  **Optionen:**

  * **Anhängen:** Hängt das Widget an den restlichen Inhalt an
  * **Voranstellen:** Stellt das Widget dem restlichen Inhalt voran
  * **Vor dem Container:** Fügt das Widget vor dem Container ein
  * **Nach dem Container:** Hängt das Widget an den Container an
  * **Ersetzen:** Ersetzt den restlichen Inhalt des Containers mit dem Widget
</ParamField>

<ParamField path="Selektor" type="string" default="#dzm_shipping_countdown_container">
  Wähle hier einen oder mehrere CSS Selektoren in die das Widget geladen wird. Du kannst mehrere Selektoren mit Komma (,) trennen. Der Standard Selektor fügt das Widget über der Lagerbestandsanzeige ein. Wenn du das Feld komplett leer lässt, wird das Widget nicht injiziert und du kannst es per Portlet einbinden wo du möchtest.
</ParamField>

<br />

### Textinhalt

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/ciOqRPGlzx873gHa/images/versand-countdown-textinhalt.jpg?fit=max&auto=format&n=ciOqRPGlzx873gHa&q=85&s=0605f0ad33a6b9b8d4715d74be5c5d51" alt="Textinhalt" width="2064" height="462" data-path="images/versand-countdown-textinhalt.jpg" />
  </Frame>
</div>

Alle Textinhalte des Countdowns können über JTL-Sprachvariablen eingestellt werden.

Folgende Sprachvariablen stehen zur Verfügung:

| Sprachvariable                           | Beschreibung                         |
| ---------------------------------------- | ------------------------------------ |
| `shipping_countdown_text_before`         | Text vor dem Countdown               |
| `shipping_countdown_text_after`          | Text nach dem Countdown              |
| `shipping_countdown_expired_text_before` | Text vor dem abgelaufenen Countdown  |
| `shipping_countdown_expired_text_after`  | Text nach dem abgelaufenen Countdown |
| `shipping_countdown_alt_text`            | Alternativtext                       |
| `shipping_countdown_string_day`          | "Tag" (Singular)                     |
| `shipping_countdown_string_days`         | "Tage" (Plural)                      |
| `shipping_countdown_string_hour`         | "Stunde" (Singular)                  |
| `shipping_countdown_string_hours`        | "Stunden" (Plural)                   |
| `shipping_countdown_string_minute`       | "Minute" (Singular)                  |
| `shipping_countdown_string_minutes`      | "Minuten" (Plural)                   |
| `shipping_countdown_string_second`       | "Sekunde" (Singular)                 |
| `shipping_countdown_string_seconds`      | "Sekunden" (Plural)                  |
| `shipping_countdown_string_today`        | "heute"                              |
| `shipping_countdown_string_tomorrow`     | "morgen"                             |
| `shipping_countdown_string_until`        | "bis"                                |
| `shipping_countdown_string_clock`        | "Uhr"                                |
| `shipping_countdown_string_and`          | "und"                                |

## Widget als Portlet nutzen

Um das Widget als Portlet zu nutzen, muss das Widget in den Einstellungen aktiviert sein. Um zu vermeiden, dass es auf allen Produktseiten erscheint, muss der CSS-Selektor leer gelassen werden. Dadurch kann das Widget flexibel im OnPage-Composer (OPC) verwendet werden. Du kannst es per Drag & Drop an den gewünschten Mountpoints auf den jeweiligen Produktseiten platzieren.

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