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

# Angebote Countdown

> Countdown für zeitlich begrenzte Sonderpreise aus der JTL-Wawi

## Allgemeine Beschreibung

Das **Angebote Countdown**-Widget zeigt auf der Produktdetailseite einen Countdown an, wenn ein Produkt zu einem zeitlich begrenzten Sonderpreis angeboten wird.

Dieses Widget hilft dabei, den Kunden visuell zu vermitteln, wie viel Zeit noch verbleibt, um das Angebot zu nutzen. Der Countdown erzeugt ein Gefühl der Dringlichkeit und motiviert die Kunden, schneller eine Kaufentscheidung zu treffen, um den Sonderpreis nicht zu verpassen.

Durch die Darstellung des Angebotsendes trägt das Widget dazu bei, die Konversionsrate zu erhöhen, indem es den Kunden einen klaren Anreiz bietet, unverzüglich zu handeln.

## 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/GAge2e4E9z3ZBdkW/images/angebote-countdown-funktionen.jpg?fit=max&auto=format&n=GAge2e4E9z3ZBdkW&q=85&s=2ad3f30b765b3f4a9d0bc0827886f6e2" alt="Funktionen" width="2068" height="280" data-path="images/angebote-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. Bei jedem Produkt wird dann ein Countdown erzeugt, der anzeigt wann das fiktive Sonderangebot endet.

  <Warning>
    Diese Funktion ist nicht für den produktiven Shop geeignet.
  </Warning>
</ParamField>

<br />

### Sichtbarkeit

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

Du kannst das Widget gezielt bei Produkten ausblenden, indem du dem Artikel das Funktionsattribut `dzm_hide_special_offer_countdown` vom Typ Checkbox anhängst und die Checkbox aktivierst.

<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/GAge2e4E9z3ZBdkW/images/angebote-countdown-vorschau.jpg?fit=max&auto=format&n=GAge2e4E9z3ZBdkW&q=85&s=b600d1883a762f537d498f944f21a801" alt="Vorschau" width="2058" height="230" data-path="images/angebote-countdown-vorschau.jpg" />
  </Frame>
</div>

Hier siehst du dein Widget in der Vorschau.

<br />

### Styles

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/GAge2e4E9z3ZBdkW/images/angebote-countdown-styles.jpg?fit=max&auto=format&n=GAge2e4E9z3ZBdkW&q=85&s=593797136258ddf376f157de99fda7f9" alt="Styles" width="2064" height="512" data-path="images/angebote-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/GAge2e4E9z3ZBdkW/images/angebote-countdown-einfuegeoptionen.jpg?fit=max&auto=format&n=GAge2e4E9z3ZBdkW&q=85&s=c7e1d75043902190cb97de1df055f19e" alt="Einfügeoptionen" width="2060" height="308" data-path="images/angebote-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_special_offer_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'}} />