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

# Release Countdown

> Countdown für kommende Produktveröffentlichungen

## Allgemeine Beschreibung

Das Release-Countdown Widget wird auf der Produktdetailseite eingesetzt, wenn ein Artikel ein zukünftiges Erscheinungsdatum hat. Es zeigt einen Countdown, der die verbleibende Zeit bis zum Release des Artikels anzeigt, zusammen mit einem über Sprachvariablen anpassbaren Text.

Dieses Widget macht es einfach, die Aufmerksamkeit der Kunden auf bevorstehende Produkte zu lenken und die Vorfreude darauf zu steigern. Durch den Countdown und die klare Aufforderung zur Vorbestellung werden Kunden motiviert, ihre Kaufentscheidung nicht aufzuschieben.

## 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="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/S7l8z9p91z2HhYaS/images/release-countdown-funktionen.jpg?fit=max&auto=format&n=S7l8z9p91z2HhYaS&q=85&s=342ec434849e566075a2de4bda63f2ad" alt="Funktionen" width="2058" height="278" data-path="images/release-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="Demo Modus" type="boolean">
  Aktiviere den Demo Modus, um das Widget zu testen.

  <Warning>
    Diese Funktion ist nicht für den produktiven Shop geeignet.
  </Warning>
</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_release_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/S7l8z9p91z2HhYaS/images/release-countdown-sichtbarkeit.jpg?fit=max&auto=format&n=S7l8z9p91z2HhYaS&q=85&s=18c6b56a3267a8bc7a3c2fd49c3083aa" alt="Sichtbarkeit" width="2066" height="232" data-path="images/release-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

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

Hier siehst du eine Vorschau des Widgets.

<br />

### Styles

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

<ParamField path="Icon" type="icon">
  Wähle das angezeigte Icon für das Widget - du kannst aus einer umfangreichen Bibliothek frei wählen.
</ParamField>

<ParamField path="Stil" type="select">
  Wähle aus verschiedenen Darstellungsoptionen, wie das Widget angezeigt werden soll.
</ParamField>

<ParamField path="Countdownstil" type="select">
  Wähle hier aus verschiedenen Darstellungsoptionen für die verbleibende Countdown-Zeit.
</ParamField>

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

<br />

### Einfügeoptionen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/S7l8z9p91z2HhYaS/images/release-countdown-einfuegeoptionen.jpg?fit=max&auto=format&n=S7l8z9p91z2HhYaS&q=85&s=cb7d62ce35a7b90bcecf725fdba2f20f" alt="Einfügeoptionen" width="2066" height="306" data-path="images/release-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_release_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>

## 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'}} />