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

# Free Gifts Progressbar

> Motiviere Kunden zu höheren Warenkorbwerten mit einer Fortschrittsleiste

## Allgemeine Beschreibung

Die Goodie-Progressbar wird standardmäßig auf der Warenkorbseite eingesetzt und zeigt eine Fortschrittsleiste an, die deinen Kunden anzeigt, wie viel sie noch einkaufen müssen, um das nächste Gratisgeschenk oder die versandkostenfreie Lieferung zu erhalten.

Diese Funktion motiviert Kunden, ihren Einkauf fortzusetzen, um von zusätzlichen Belohnungen zu profitieren. Durch klare visuelle Marker und anpassbare Texte können Kunden ihre Fortschritte leicht verfolgen und werden ermutigt, mehr zu kaufen.

## Featureübersicht

<AccordionGroup>
  <Accordion title="Widget auf der Warenkorbseite">
    Die Goodie-Progressbar wird standardmäßig auf der Warenkorbseite angezeigt.
  </Accordion>

  <Accordion title="Auch als Portlet verfügbar">
    Möchtest du die Goodie-Progressbar an mehreren Stellen auf der Produktseite oder anderen Seiten platzieren, kannst du sie ganz einfach per OnPage-Composer an der gewünschten Stelle einfügen.
  </Accordion>

  <Accordion title="Anpassbarer Text">
    Passe den angezeigten Text ganz einfach per Sprachvariable an, um die Kunden optimal zu informieren.
  </Accordion>

  <Accordion title="Anpassbare Styles">
    Gestalte das Aussehen der Progressbar nach Belieben und passe Farben, Icons und Layouts an dein Shop-Design an.
  </Accordion>

  <Accordion title="Verschiedene Einfügeoptionen">
    Entscheide selbst per CSS-Selektor, an welcher Stelle die Progressbar angezeigt 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/OMwOj1KxvWGsEUoi/images/goodie-progressbar-funktionen.jpg?fit=max&auto=format&n=OMwOj1KxvWGsEUoi&q=85&s=3134215310ad5c6bf19fc66af0ae09f7" alt="Funktionen" width="2068" height="1425" data-path="images/goodie-progressbar-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="Gratis Geschenke anzeigen" type="boolean">
  Entscheide, ob Gratisgeschenke als Marker auf der Progressbar angezeigt werden sollen.
</ParamField>

<ParamField path="Versandkostenfreigrenze anzeigen" type="boolean">
  Entscheide, ob du die Versandkostenfreigrenze als Marker auf der Progressbar angezeigt werden soll.
</ParamField>

<ParamField path="Versandkostenfreigrenze immer einblenden" type="boolean">
  Wenn du etwas anderes als "Alle Ziele anzeigen" im Anzeigenmodus auswählst, kannst du hier festlegen ob die Versandkostenfreigrenze trotzdem immer angezeigt werden soll. Auch wenn diese bereits erreicht ist und/oder es andere Ziele gibt, die niedriger liegen.
</ParamField>

<ParamField path="Fallback Versandkostenfreigrenze" type="number">
  Wenn ein Kunde noch nichts im Warenkorb liegen hat, kann der Shop die Versandkostenfreigrenze nicht berechnen. Trage hier einen Fallback Wert ein, um auch bei leeren Warenkörben die Marke in der Progressbar anzuzeigen. Dieser Wert wird überschrieben, sobald ein Artikel im Warenkorb des Kunden liegt.
</ParamField>

<br />

### Beschriftung

<ParamField path="Wert auf Progressbar anzeigen Desktop" type="boolean">
  Entscheide, ob der aktuelle Warenkorbwert bzw. der Wert des nächsten Markers auf der Progressbar angezeigt werden soll.
</ParamField>

<ParamField path="Info Text unter Progressbar anzeigen" type="boolean">
  Lege fest, ob der Info-Text unter der Progressbar angezeigt werden soll. Diesen kannst du für jeden Marker einzeln unter dem Menüpunkt "Custom Gifts" über Sprachvariablen definieren.
</ParamField>

<ParamField path="Icons darstellen" type="boolean">
  Entscheide, ob die Icons (definierbar unter Styles) auf der Progressbar angezeigt werden sollen.
</ParamField>

<br />

### Darstellungsmodus

<ParamField path="Auf Desktop kompakt darstellen" type="boolean">
  Wenn aktiv, werden im kompakten Darstellungsmodus die Icons immer ausgeblendet. Der Text auf der Progressbar wird nicht angezeigt, und die Progressbar schrumpft auf eine geringere Höhe. Dadurch bleibt mehr Platz für Inhalt.
</ParamField>

<ParamField path="Auf Tablet kompakt darstellen" type="boolean">
  Wenn aktiv, werden im kompakten Darstellungsmodus die Icons immer ausgeblendet. Der Text auf der Progressbar wird nicht angezeigt, und die Progressbar schrumpft auf eine geringere Höhe. Dadurch bleibt mehr Platz für Inhalt.
</ParamField>

<ParamField path="Auf Mobil kompakt darstellen" type="boolean">
  Wenn aktiv, werden im kompakten Darstellungsmodus die Icons immer ausgeblendet. Der Text auf der Progressbar wird nicht angezeigt, und die Progressbar schrumpft auf eine geringere Höhe. Dadurch bleibt mehr Platz für Inhalt.
</ParamField>

<ParamField path="Höhe der Progressbar im Kompaktmodus in px" type="number">
  Definiere hier die Höhe der Progressbar in Pixeln, wenn der Kompaktmodus aktiviert ist.
</ParamField>

<ParamField path="Anzeigemodus der Marken Desktop" type="select">
  Lege hier fest, welche Ziele auf der Progressbar dargestellt werden sollen.

  **Optionen:**

  * Alle Ziele
  * Alle erreichten und das nächste Ziel
  * Das letzte und das nächste Ziel
</ParamField>

<ParamField path="Anzeigemodus der Marken Tablet" type="select">
  Lege hier fest, welche Ziele auf der Progressbar dargestellt werden sollen.

  **Optionen:**

  * Alle Ziele
  * Alle erreichten und das nächste Ziel
  * Das letzte und das nächste Ziel
</ParamField>

<ParamField path="Anzeigemodus der Marken Mobil" type="select">
  Lege hier fest, welche Ziele auf der Progressbar dargestellt werden sollen.

  **Optionen:**

  * Alle Ziele
  * Alle erreichten und das nächste Ziel
  * Das letzte und das nächste Ziel
</ParamField>

<br />

### Vorschau

Hier siehst du eine Vorschau der Progressbar mit deinen aktuellen Einstellungen.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/OMwOj1KxvWGsEUoi/images/goodie-progressbar-vorschau.jpg?fit=max&auto=format&n=OMwOj1KxvWGsEUoi&q=85&s=a38ad744377ed79ef4b9145162a572eb" alt="Vorschau" width="2082" height="266" data-path="images/goodie-progressbar-vorschau.jpg" />
  </Frame>
</div>

<br />

### Custom Gifts

Hier kannst du unabhängig von Gratisgeschenken oder Versandkostenfreigrenzen eigene Marker setzen, um deine Kunden immateriell zu belohnen. Beispiel: Baum pflanzen oder Spende an gemeinnützige Organisation.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/OMwOj1KxvWGsEUoi/images/goodie-progressbar-custom-gifts.jpg?fit=max&auto=format&n=OMwOj1KxvWGsEUoi&q=85&s=000ec3a3692abd05e24e7a748eb45332" alt="Custom Gifts" width="2074" height="602" data-path="images/goodie-progressbar-custom-gifts.jpg" />
  </Frame>
</div>

<ParamField path="Interner Name" type="string">
  Vergebe einen internen Namen für das Custom Gift. Dieser wird nicht im Shop ausgespielt und dient lediglich der Verwaltung von den Custom Gifts.
</ParamField>

<ParamField path="Sprachvariablen" type="string">
  Um Sprachvariablen zu verwenden, musst du diese zunächst über das Resources & Health-Dashboard in der Region "Custom" anlegen. Lege eine Sprachvariable für den Titel des CustomGifts an, der auf der Progressbar angezeigt wird, und eine Sprachvariable für den Infotext, der unterhalb der Progressbar angezeigt wird.
</ParamField>

<ParamField path="Wert" type="number">
  Trage hier den Warenkorbwert ein, der benötigt wird um das Custom Gift zu erreichen.
</ParamField>

<ParamField path="Hinzufügen" type="button">
  Durch Klick auf diesen Button speicherst du das Custom Gift und fügst es deiner Progressbar hinzu.
</ParamField>

<ParamField path="Deine Custom Gifts" type="list">
  Zeigt eine Übersicht aller gespeicherten Custom Gifts mit Name, Wert, Titel Variable und Info Variable. Hier kannst du eingetragene Gifts einsehen und verwalten.
</ParamField>

<br />

### Styles

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/OMwOj1KxvWGsEUoi/images/goodie-progressbar-styles.jpg?fit=max&auto=format&n=OMwOj1KxvWGsEUoi&q=85&s=ef5fd0fa23d9c33c6b771e642f0faf5e" alt="Styles" width="2072" height="720" data-path="images/goodie-progressbar-styles.jpg" />
  </Frame>
</div>

<ParamField path="Icon Gratisgeschenke" type="icon">
  Wähle hier das Icon, das für den Gratisgeschenk-Marker verwendet werden soll.
</ParamField>

<ParamField path="Icon Versandkostenfrei" type="icon">
  Wähle hier das Icon, das für den Versandkostenfrei-Marker verwendet werden soll.
</ParamField>

<ParamField path="Icon Custom Geschenk" type="icon">
  Wähle hier das Icon, das für den Custom Geschenk-Marker verwendet werden soll.
</ParamField>

<ParamField path="Farbe Progress" type="color">
  Wähle eine Farbe für die Progressbar.
</ParamField>

<ParamField path="Farbe Bar (Hintergrund)" type="color">
  Wähle eine Hintergrundfarbe für die Progressbar.
</ParamField>

<ParamField path="Farbe Icon und Schrift" type="color">
  Wähle eine Farbe für die Icons und Schrift auf der Progressbar.
</ParamField>

<br />

### Einfügeoptionen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/OMwOj1KxvWGsEUoi/images/goodie-progressbar-einfuegeoptionen.jpg?fit=max&auto=format&n=OMwOj1KxvWGsEUoi&q=85&s=4fdfdc0944b29f71e82f42dae36dcf1e" alt="Einfügeoptionen" width="2068" height="316" data-path="images/goodie-progressbar-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="#main-wrapper">
  Wähle hier einen oder mehrere CSS Selektoren in die das Widget geladen wird. Du kannst mehrere Selektoren mit Komma (,) trennen. Wenn du den CSS-Selektor leer lässt, wird das Widget nur im Warenkorb ausgespielt.
</ParamField>

## Widget als Portlet nutzen

Um das Widget als Portlet zu nutzen, muss das Widget in den Einstellungen aktiviert sein. Dadurch kann das Widget flexibel im OnPage-Composer (OPC) verwendet werden. Du kannst es per Drag & Drop an den gewünschten Mountpoints an beliebigen Stellen in deinem Shop platzieren.

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